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  …

George Nicolaou

picsta

<p>Who can benefit from the plugin GM Adaptive CSS Grid Columns? (Short: GM Grid)<br />
The plugin is made to help everyone who wants to have an easy, lightweight and worry-free solution to set up a maximum grid count on their website.<br />
Of course, you can have fewer columns as those you have defined. They will automatically take the right percentage like 33.3%, 50% or even 100% of the available width.</p>
<h3>Do I have to know CSS?</h3>
<p>Absolutely not! Especially beginners and non-coders will start to love this plugin soon.</p>
<h3>Hold on, not another plugin, what happens to my page speed?</h3>
<p>Don’t panic, we took care of this by keeping this plugin lightweight and the CSS is minified by default.</p>
<h3>Important Notice:</h3>
<p>The plugin only works if you correctly identify and target the parent, and it’s direct child elements. Otherwise, the plugin can’t work.<br />
Recommended page builder are Bricks, Oxygen and Breakdance.</p>
<h3>How to use:</h3>
<p>The setup is quite simple. Basically, you just add two CSS classes to your elements and the plugin does the magic for you.<br />
Make sure to add the following classes to the container and direct child elements. Use a DIV instead of a section, container, or block<br />
to avoid conflicting predefined styles.</p>
<p>Parent/Container Element class: grid-container<br />
Child Element class: grid-item</p>
<p>Additionally, there is one more CSS class available. By using grid-center on your parent (container) element, you achieve three things.<br />
1. The container will be centred on the page<br />
2. Add your desired width (in rem)<br />
3. Add horizontal spacing across all break points</p>
<h3>Minimum Setup:</h3>
<ol>
<li>Define the maximum column count for your medium and large screen size.</li>
<li>Add the desired gap size (in rem)</li>
<li>Define the medium and large breakpoint (in em).<br />
Save!</li>
</ol>
<p><strong>Quick overview of GM Adaptive CSS Grid Columns by <a href="https://websquadron.co.uk/" rel="nofollow ugc">Imran Siddiq</a></strong></p>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/lDibIKlmyv4?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<h3>Translations</h3>
<p>GM Adaptive CSS Grid Column can be used in these different languages thanks to the following translators:</p>
<ul>
<li>Afrikaans <a href="https://www.georgenicolaou.me/" rel="nofollow ugc">George Nicolaou</a></li>
<li>German <a href="https://profiles.wordpress.org/picsta/" rel="nofollow ugc">Michael Kellersmann</a></li>
<li>Greek <a href="https://www.georgenicolaou.me/" rel="nofollow ugc">George Nicolaou</a></li>
</ul>


GM Adaptive CSS Grid Columns


This is an awesome plugin especially with a page builder like bricks / breakdance, etc. to easily and quickly bring in the use of CSS grid. This is how it should be implemented and find using GM grid a real time saver. 😎 


Very easy to use and implement Grid CSS

Allows you to create Adaptive CSS Grid Columns

Levels Block Editor Styles for Oxygen Builder vs GM Adaptive CSS Grid Columns