Core Framework

<p>Hey there! If you’re tinkering with WordPress and have a knack for making sites look just right, you might like what we’ve cooked up with Core Framework. It’s like a Swiss Army knife for your CSS woes but way easier to use and with a lot more fun involved.</p>
<h3>What’s Cooking?</h3>
<p>✅ <strong>Make It Yours</strong>: Ever felt boxed in by CSS frameworks? We get it. That’s why we made Core Framework as customizable as a build-your-own pizza. You start with our base (which is pretty awesome on its own), and then add, tweak, or remove anything you don’t need. It’s all about making it fit your project like a glove.</p>
<p>✅ <strong>Play Well with Others</strong>: Whether you’re team Gutenberg, all about Bricks, or an Oxygen fan, we’ve got your back. Core Framework slides right into your workflow, making it that much smoother to sprinkle your design magic everywhere.</p>
<p>✅ <strong>A Dash of This, A Dash of That</strong>: Organize your colors, manage those borders, and set your typography scale just right. We’re all about making the tedious tasks a piece of cake, so you can focus on the fun parts of design.</p>
<p>✅ <strong>Components Galore</strong>: Reusable components are your best friends. Buttons, input styles, cards – you name it, we help you keep it all neat and tidy, ready to be reused whenever you need them.</p>
<p>✅ <strong>Join the Club</strong>: With over 4,000 buddies already in the Core Framework family, you’re in good company. Our <a href="https://coreframework.com/marketplace" rel="nofollow ugc">marketplace</a> is like a treasure chest of our ecosystem, full of add-ons, UI kits, and templates. Plus, you’re more than welcome to contribute as an author!</p>
<h3>Who’s It For?</h3>
<p>From solo freelancers to big-time agencies, if you’re crafting websites, you’ll feel right at home with Core Framework. It’s all about making your life a bit easier and a lot more creative.</p>
<h3>Easy Peasy Setup</h3>
<p>Getting started is as simple as installing any WordPress plugin. Find Core Framework in your dashboard, hit “Save” after making changes, and voila! The framework is live on your site.</p>
<p>Learn more about all settings in our <a href="https://docs.coreframework.com/" rel="nofollow ugc">documentation</a> portal.</p>
<h3>Customize to Your Heart’s Content</h3>
<p>Inside Core Framework, everything can be tweaked. Colors, classes, variables – mix and match them to create something that’s uniquely yours.</p>
<h3>Need a Hand?</h3>
<p>Our support crew is here for you via Intercom on our site, and our docs are always available for a quick how-to or when you’re in the mood for some light reading.</p>
<p>Simply contact us at any time using the Intercom at the <a href="https://coreframework.com/" rel="nofollow ugc">Core Framework</a> website or in our Facebook community <a href="https://www.facebook.com/groups/coreframework" rel="nofollow ugc">group</a>.</p>
<h3>Keeping It Fresh</h3>
<p>We’re always rolling out updates and staying on top of WordPress changes to make sure you’ve got the smoothest ride possible.</p>
<p>Find out about every Core Framework update in our <a href="https://docs.coreframework.com/changelog/changelog" rel="nofollow ugc">changelog</a>.</p>
<h3>From Friends You Trust</h3>
<p>Brought to you by the folks behind <a href="https://motion.page/" rel="nofollow ugc">Motion.page</a>, we’ve been around the block and we’re here to stay. We love hearing from our users, so don’t be shy!</p>
<h3>Come On In, The Water’s Fine</h3>
<p>Core Framework isn’t just about making sites look pretty (although it does that pretty well). It’s about enjoying the process, exploring new possibilities, and being part of a community that gets it. So, why not give it a whirl?</p>


Say hello to Core Framework - a FREE modular CSS framework platform.

Levels Branding and Webdevelopment

<p>Levels Block Editor Styles for Oxygen Builder automatically injects your Oxygen Builder CSS into the WordPress block editor, ensuring that what you see in the editor matches what appears on the frontend.</p>
<h4>Features</h4>
<ul>
<li><strong>Automatic Style Detection</strong> – Automatically finds and loads all relevant Oxygen CSS files</li>
<li><strong>Scoped Styling</strong> – All CSS is scoped to prevent affecting editor UI elements</li>
<li><strong>Reusable Block Support</strong> – Detects and loads styles for embedded reusable blocks</li>
<li><strong>Smart Context Detection</strong> – Only loads in the block editor for users with edit permissions</li>
<li><strong>Performance Optimized</strong> – Live-read approach with minimal overhead</li>
<li><strong>Responsive Images</strong> – Automatically converts img tags to responsive versions with srcset and sizes attributes</li>
<li><strong>Per-Image Size Control</strong> – Use the <code>data-image-size</code> attribute to override the default image size per element</li>
<li><strong>Settings Page</strong> – Configure features under Oxygen > Block Editor Styles</li>
</ul>
<h4>Block Editor Styles</h4>
<p>The plugin collects CSS from four sources:</p>
<ol>
<li><strong>oxygen.css</strong> – Core Oxygen framework styles</li>
<li><strong>universal.css</strong> – Site-wide Oxygen styles</li>
<li><strong>Page-specific CSS</strong> – Cached page styles</li>
<li><strong>Reusable block CSS</strong> – Styles for embedded reusable blocks</li>
</ol>
<p>All CSS selectors are automatically rewritten to be scoped within the editor content area to prevent affecting the WordPress admin UI.</p>
<h4>Responsive Images</h4>
<p>When enabled, the plugin automatically replaces <code><img></code> tags in your content with responsive versions that include <code>srcset</code> and <code>sizes</code> attributes. This provides optimized images for all screen sizes without any manual work.</p>
<p><strong>How to use in Oxygen Builder:</strong></p>
<ol>
<li>Go to <strong>Oxygen > Block Editor Styles</strong> in the WordPress admin</li>
<li>Enable “Responsive Images”</li>
<li>Choose a default image size (e.g. “large”)</li>
<li>All images in your content will now automatically get srcset attributes</li>
</ol>
<p><strong>Per-image size override:</strong></p>
<p>You can override the default size on individual images using the <code>data-image-size</code> attribute:</p>
<ol>
<li>Select your Image element in Oxygen</li>
<li>Go to <strong>Advanced > Attributes</strong></li>
<li>Add attribute: <code>data-image-size</code></li>
<li>Set value to any registered image size: <code>thumbnail</code>, <code>medium</code>, <code>medium_large</code>, <code>large</code>, or <code>full</code></li>
</ol>
<p>The <code>data-image-size</code> attribute is automatically removed from the final HTML output – it only serves as a control attribute for the plugin.</p>
<h4>Requirements</h4>
<ul>
<li>Oxygen Builder 4.x (must be installed and activated)</li>
<li>WordPress 5.8 or higher</li>
<li>PHP 7.4 or higher</li>
</ul>
<h4>Related Plugins</h4>
<p>Looking to speed up your Oxygen workflow? Check out <a href="https://wordpress.org/plugins/ready-made-oxygen-integration/" rel="ugc">Ready Made Oxygen Integration</a> – Turn Figma designs into editable Oxygen Builder sections – copy & paste, just like that.</p>
<h4>Optional Dependencies</h4>
<p>For 100% reliable CSS scoping, you can install the CSS parser library via Composer:</p>
<pre><code>composer install --no-dev
</code></pre>
<p>Without the library, the plugin uses a regex fallback that works for most cases.</p>
<h3>Credits</h3>
<p>Developed by Levels Branding & Webdevelopment OG</p>


Levels Block Editor Styles for Oxygen Builder

Syncs Oxygen Builder 4.x styles into the block editor for visual parity between editor and frontend. Includes responsive images with automatic srcset  …

Core Framework vs Levels Block Editor Styles for Oxygen Builder