feed.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/">
    <title>Recoda Docs</title>
    <link href="https://docs.recoda.me/feed.xml" rel="self" />
    <link href="https://docs.recoda.me" />
    <updated>2023-06-04T15:54:30+02:00</updated>
    <author>
        <name>Renato</name>
    </author>
    <id>https://docs.recoda.me</id>

    <entry>
        <title>Design</title>
        <author>
            <name>Renato</name>
        </author>
        <link href="https://docs.recoda.me/design/"/>
        <id>https://docs.recoda.me/design/</id>

        <updated>2023-06-04T15:52:57+02:00</updated>
            <summary>
                <![CDATA[
                    Grid Guides Grid Guide helpers offers you a frontend debug tool to evaluate your design. You can customize everything at every breakpoint, so it fits&hellip;
                ]]>
            </summary>
        <content type="html">
            <![CDATA[
                <h2>Grid Guides</h2>
<p>Grid Guide helpers offers you a frontend debug tool to evaluate your design.<br>You can customize everything at every breakpoint, so it fits with the grid system from Figma design and makes it easier to transfer the desired design to a real website.</p>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/25/grid-guides-v2.jpg" alt="" width="1440" height="897" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/25/responsive/grid-guides-v2-xs.webp 300w ,https://docs.recoda.me/media/posts/25/responsive/grid-guides-v2-sm.webp 480w ,https://docs.recoda.me/media/posts/25/responsive/grid-guides-v2-md.webp 768w"></figure>
<p><strong>Global options to edit:</strong></p>
<ul>
<li>Color</li>
<li>Max-width - maximal width of the grid, 100% will create a fluid grid, and value in px will create a fixed grid</li>
</ul>
<p><strong>Per breakpoint options to edit:</strong></p>
<ul>
<li>Offset - minimal grid margin to the edge of the screen</li>
<li>Gutter - gap between columns</li>
<li>Columns - number of columns</li>
</ul>
<p class="msg msg--info">Additional resources:<br>- <a href="https://www.wednesday.is/writing-articles/figma-how-to-build-responsive-and-scalable-grids-for-web-design" target="_blank" rel="noopener noreferrer">Fluid and Fixed grids</a></p>
<h2>X-mode</h2>
<p id="text_block-120-409" class="ct-text-block visible">X-mode is a grayscale view of your site's canvas that visually displays each element's border. Grayscale helps you evaluate layout at lower fidelity, and border outline on the other side helps you evaluate space between elements and catch elements which are breaking desired design flow.</p>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/25/X-mode-Featured-Image.jpg" alt="" width="1439" height="897" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/25/responsive/X-mode-Featured-Image-xs.webp 300w ,https://docs.recoda.me/media/posts/25/responsive/X-mode-Featured-Image-sm.webp 480w ,https://docs.recoda.me/media/posts/25/responsive/X-mode-Featured-Image-md.webp 768w"></figure>
<h2>Color tools (video)</h2>
<p>Powerful color tools that give you feedback about contrast ratio and WCAG level against the current background.</p>
<p>👇 Check this video below, and find out what is so special about this! 👇</p>
<div class="post__iframe"><iframe style="width: 100%; max-width: 982px; min-height: 570px;" title="rawColorTools" src="https://app.gemoo.com/embed/home?codeId=DWNKdeOKYp81r" frameborder="0" allowfullscreen="allowfullscreen" loading="lazy"></iframe></div>
<h2>Box Model</h2>
<p>To make your life easier we have made a super component inside Oxygen Builder called the Box Model. </p>
<p>This component is composed of 6-in-1 panels so it could take just a fraction of your screen and provide all needed data.<br><br><strong>There are three main panels:</strong></p>
<ol>
<li><strong>Space</strong> (Margin &amp; Padding controls, and preview of computed element size)</li>
<li><strong>Border</strong> (Edit borders and border-radius)</li>
<li><strong>Size</strong> (Height, Width, and Overflow control)</li>
</ol>
<figure class="post__image"><figure class="is-loaded"><img  src="file:///Users/renatocorluka/Documents/Publii/sites/recoda-docs/preview/media/posts/16/box-model-parts.jpg" sizes="(max-width: 768px) 100vw, 768px" srcset="file:///Users/renatocorluka/Documents/Publii/sites/recoda-docs/preview/media/posts/16/responsive/box-model-parts-xs.webp 300w, file:///Users/renatocorluka/Documents/Publii/sites/recoda-docs/preview/media/posts/16/responsive/box-model-parts-sm.webp 480w, file:///Users/renatocorluka/Documents/Publii/sites/recoda-docs/preview/media/posts/16/responsive/box-model-parts-md.webp 768w" alt="" width="469" height="276" loading="lazy" sizes="(max-width: 768px) 100vw, 768px" srcset="file:///Users/renatocorluka/Documents/Publii/sites/recoda-docs/preview/media/posts/16/responsive/box-model-parts-xs.webp 300w ,file:///Users/renatocorluka/Documents/Publii/sites/recoda-docs/preview/media/posts/16/responsive/box-model-parts-sm.webp 480w ,file:///Users/renatocorluka/Documents/Publii/sites/recoda-docs/preview/media/posts/16/responsive/box-model-parts-md.webp 768w"></figure></figure>
<p>Shortcuts (QWERTY):<br>Z - Space<br>X - Border<br>C - Size<br>V - collapse/expand panels</p>
<p><strong>Supports:</strong><br>     ✅  Auto PX to REM conversion<br>     ✅  CSS variables shorthands <br>     ✅  CSS functions</p>
<p class="msg msg--info">Find out more about <a href="https://docs.recoda.me/box-model-2/">the box model by clicking here</a>!</p>
<h2>Live Server:</h2>
<p>Usually, you open the front end in a new tab to have a more accurate view of the webpage. And with every save, you need to reload that page to see changes and scroll to the working section.</p>
<p><strong>Solution:</strong></p>
<p>With the Live Server extension, you can open fronted and have auto-reload on every page + it removes the WordPress Admin bar so you can look with less distraction.</p>
<p>With Recoda Live Server, Oxygen Builder can hot-reload the website front-end. This means that any changes made to the website's design or code will be automatically reflected in the browser without the need for a page refresh.</p>
<p>Web developers love hot-reloading because it allows them to see their changes in real-time and iterate quickly. This can save a lot of time and make the development process more efficient. If you find that you are doing page reload many times throughout the day, probably you will find great benefits in having this feature.</p>
<p>A key benefit of the Recoda Live Server extension is that it integrates seamlessly with Oxygen Builder. This popular page builder plugin for WordPress allows users to create custom designs for their websites.</p>
<p>With the Recoda Live Server extension, Oxygen Builder users can now take advantage of hot-reloading.</p>
<p>Recoda Live Server is a valuable addition to Oxygen Builder that helps make the web development process quicker and more efficient. Any Oxygen Builder user looking to improve their workflow will benefit from this seamless integration.</p>
<p>👇 Watch it in action! 👇</p>
<h2>HSL color wheel</h2>
<p>You have a Hue wheel and box with Saturation and Lightness control like shown in the image below: </p>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/25/CleanShot-2023-06-04-at-01.20.05.png" alt="" width="276" height="351" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/25/responsive/CleanShot-2023-06-04-at-01.20.05-xs.webp 300w ,https://docs.recoda.me/media/posts/25/responsive/CleanShot-2023-06-04-at-01.20.05-sm.webp 480w ,https://docs.recoda.me/media/posts/25/responsive/CleanShot-2023-06-04-at-01.20.05-md.webp 768w"></figure>
<h2>Advanced radius editor:</h2>
<p>Unlocking the full potential of border-radius editing.</p>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/25/Box-Model-Recoda-Docs.webp" alt="" width="319" height="378" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/25/responsive/Box-Model-Recoda-Docs-xs.webp 300w ,https://docs.recoda.me/media/posts/25/responsive/Box-Model-Recoda-Docs-sm.webp 480w ,https://docs.recoda.me/media/posts/25/responsive/Box-Model-Recoda-Docs-md.webp 768w"></figure>
<p class="msg msg--info">Find out more about <a href="https://docs.recoda.me/box-model-2/">the box model and border edits by clicking here</a>!</p>
<h2>Blob radius maker:</h2>
<p>Making blob shapes by tweaking borders has never been easier.</p>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/25/Box-Model-Recoda-Docs-2.webp" alt="" width="334" height="398" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/25/responsive/Box-Model-Recoda-Docs-2-xs.webp 300w ,https://docs.recoda.me/media/posts/25/responsive/Box-Model-Recoda-Docs-2-sm.webp 480w ,https://docs.recoda.me/media/posts/25/responsive/Box-Model-Recoda-Docs-2-md.webp 768w"></figure>
            ]]>
        </content>
    </entry>
    <entry>
        <title>Bug reporting</title>
        <author>
            <name>Renato</name>
        </author>
        <link href="https://docs.recoda.me/bug-reporting/"/>
        <id>https://docs.recoda.me/bug-reporting/</id>

        <updated>2023-06-03T13:47:41+02:00</updated>
            <summary>
                <![CDATA[
                    To help us make the product better, and to solve the problem you are facing please use our standard bug reporting template in the described&hellip;
                ]]>
            </summary>
        <content type="html">
            <![CDATA[
                <p>To help us make the product better, and to solve the problem you are facing please use our standard bug reporting template in the described way.</p>
<h2>I've seen compatibility and troubleshooting pages</h2>
<p>If so, you now understand why we need the following.</p>
<p class="msg msg--warning">If not, please read these two and get back here after reading them:</p>
<ul>
<li><a href="https://docs.recoda.me/compatibility/">Compatibility</a></li>
<li><a href="https://docs.recoda.me/troubleshooting/">Troubleshooting</a></li>
</ul>
<h2>TEMPLATE - BUG REPORTING</h2>
<hr>
<p><strong>Could you provide a staging site or sandbox with a replicated problem:</strong> ❌<br><em>(It is much easier for us to fix if we can, if you can't please provide as much as you can additional information )</em></p>
<p><strong>Browser:</strong> ❌<br><em>(please fill in information in this form: <span style="text-decoration: underline;">Safari - Version 16.5</span> )<br><br></em><strong>Have you tried to see does this bug persists in some other browsers:</strong> ❌<br><em>(Fill in which also browser you have tried like <span style="text-decoration: underline;">Firefox</span> - this eliminates browser extension collision,  browser cache problems, and potential rendering problems with certain browser engines)</em></p>
<p><strong>Describe problem:</strong> <br><em>(Please give your best to explain, please be precise as you can and describe in fashion When I go here and do that, that, this problem happens )</em></p>
<p>❌❌❌</p>
<p><strong>Additional information:</strong> ❌<br><em>(Send us a video or at least an image which explains the problem, please use a screenshot or screen recording software and not your phone for screen recording)</em></p>
<hr>
<p>You could copy the template above and report a bug here.</p>
            ]]>
        </content>
    </entry>
    <entry>
        <title>Troubleshooting</title>
        <author>
            <name>Renato</name>
        </author>
        <link href="https://docs.recoda.me/troubleshooting/"/>
        <id>https://docs.recoda.me/troubleshooting/</id>

        <updated>2023-06-03T13:46:23+02:00</updated>
            <summary>
                <![CDATA[
                    Before making a bug report Please go through these steps: Fixing bugs, 3rd party collisions often is not big problem and does not take that&hellip;
                ]]>
            </summary>
        <content type="html">
            <![CDATA[
                <h2>Before making a bug report</h2>
<p>Please go through these steps:</p>
<h3>Have in mind</h3>
<p>Fixing bugs, 3rd party collisions often is not big problem and does not take that much, if we know what is culprit, and we can replicate issue on our machine, we ship fixes often under 24h.</p>
<p><strong>Hardest part: </strong>replicate issues, and this is crucial for us to fix. We need to replicate that problem before fixing it, if we are not able to replicate the issue, we won't be able to fix the issue.<br><br><strong>How does bug fixing work?</strong></p>
<p>1. We need to replicate the issue <code>(hard part)</code> which often includes elimination, if a bug report lacks, we need kindly ask you to provide additional information so we can eliminate certain causes. So it will help if you follow our standard bug reporting procedure which you will find in our documentation.</p>
<p>2. Fixing problems - 95% of the time this is done in under 5 minutes</p>
<p>Please <strong>read this</strong>, before going to the chapter about bug submission and doing bug reports. It is crucial for us that you understand our side and what it takes for us to help solve a problem.</p>
<h3>When it is a bug when it is a collision</h3>
<p>Recoda is designed to work with Oxygen Builder. So everything is in combination Oxygen Builder + Recoda without 3rd party plugins for Oxygen Builder.</p>
<p>Often we have seen problems with <strong>browser extensions</strong>. Read this guide and see how troubleshooting can help you discover these problems.</p>
<h3>There is something wrong with the editor, looks weird</h3>
<p>Clear browser cache and clear server cache.</p>
<p>This is how you could clear the browser cache:</p>
<ul>
<li><a href="https://support.mozilla.org/en-US/kb/how-clear-firefox-cache" target="_blank" rel="noopener noreferrer">Firefox</a></li>
<li><a href="https://support.google.com/accounts/answer/32050" target="_blank" rel="noopener noreferrer">Chrome</a></li>
<li><a href="https://support.apple.com/guide/safari/clear-your-browsing-history-sfri47acf5d6/mac" target="_blank" rel="noopener noreferrer">Safari</a></li>
</ul>
<p><strong>How to clear the server cache?</strong> Sorry, there are too many combinations here, if you don't know how you could do it on your host, please kindly ask hosting support to explain you.</p>
<h3>Collision with another 3rd party plugin for Oxygen Builder</h3>
<p>Please see the <a href="https://docs.recoda.me/compatibility/" target="_blank" rel="noopener noreferrer">compatibility page</a> about actions that you can do to prevent this.</p>
<p>If that doesn't solve the problem, please try disabling features one-by-one and give us the precise source of the problem, if you can't replicate it in that form please provide us with information like an image or screen recording of the issue and try to describe it as much as you can.</p>
<p class="msg msg--warning"><strong>Problem:</strong> If you don't provide enough data or don't follow procedure, we won't go and guess what scenario you could have on your install because we could never hit.</p>
<p class="msg msg--success"><strong>Solution:</strong> Please deactivate all 3rd party plugins except Recoda, and try to see if the problem persists. This way we eliminate 3rd party collisions, and if Recoda + Oxygen works, activate plugins one by one and report exactly which combination is causing problems.</p>
<h3>Collision with a browser extension</h3>
<p>As Recoda is a tool that lives on the front, there is a chance that certain features could collide with certain browser extensions. And it can be time-consuming for us to fight and try replicating, but we just can't because we don't use any browser extensions on our development machine and there is virtually no chance for us to replicate these issues.  </p>
<p class="msg msg--warning"><strong>Problem:</strong> We have zero chance to replicate what extension you could use.</p>
<p class="msg msg--success"><strong>Solution:</strong> Please open another browser and see does it solve the problem (recommended Firefox because it is our developing go-to tool). If you are already on Firefox please try in Chrome or Safari then. This will eliminate browser extension collision but could eliminate also browser cache issues or problems with rendering that persist with certain browser rendering engines. </p>
<p> </p>
            ]]>
        </content>
    </entry>
    <entry>
        <title>Compatibility</title>
        <author>
            <name>Renato</name>
        </author>
        <link href="https://docs.recoda.me/compatibility/"/>
        <id>https://docs.recoda.me/compatibility/</id>

        <updated>2023-06-03T13:47:12+02:00</updated>
            <summary>
                <![CDATA[
                    This page is about the compatibility of Recoda v2 and other 3rd party plugins which may have some functionality overlaps. For achieving the best compatibility&hellip;
                ]]>
            </summary>
        <content type="html">
            <![CDATA[
                <p>This page is about the compatibility of Recoda v2 and other 3rd party plugins which may have some functionality overlaps.</p>
<p>For achieving the best compatibility with other plugins we recommend a few things:</p>
<h2>1. UI tweaks collision </h2>
<p>To prevent collision of tweaks from Recoda and other plugins which might do the same you could <strong>disable all Editor Tweaks</strong> from Recoda.</p>
<p>See how you could do that, and get an idea what area could be affected when this is enabled.</p>
<div class="post__iframe"><iframe style="width: 100%; max-width: 982px; min-height: 570px;" title="editor tweaks" src="https://app.gemoo.com/embed/home?codeId=M0dAg9xq7paxN" frameborder="0" allowfullscreen="allowfullscreen" loading="lazy"></iframe></div>
<h2>2. Functionality overlaps</h2>
<p>Some features like right-click menu are present in some other 3rd party plugins, to avoid these situations you should disable the same feature in others or Recoda.<br><br>Here are some of the features which could cause overlaps and if you are using them in another plugin that you should disable them somewhere so you don't have functionality overlap.</p>
<h3><br>2.1 Right-click menu</h3>
<p><strong>Problem manifestation:</strong> When you are doing the right click you could see two context menus, or Editor could stuck due to some problem with overlapping features.</p>
<p><strong>Cure: </strong>Disable right-click menu feature in other 3rd party plugins, or disable it inside Recoda like shown in the image below:</p>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/22/CleanShot-2023-06-02-at-21.13.38.png" alt="" width="2843" height="1778" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/22/responsive/CleanShot-2023-06-02-at-21.13.38-xs.webp 300w ,https://docs.recoda.me/media/posts/22/responsive/CleanShot-2023-06-02-at-21.13.38-sm.webp 480w ,https://docs.recoda.me/media/posts/22/responsive/CleanShot-2023-06-02-at-21.13.38-md.webp 768w"></figure>
<h3>2.2 Code hints</h3>
<p><strong>Problem manifestation:</strong> When you are typing code, autocompletion doesn't work as expected, or if you are using emmet shortcuts while typing from another plugin.</p>
<p><strong>Cure: </strong>Disable code hint/emmet feature in other 3rd party plugins, or disable inside Recoda like shown in the image below:</p>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/22/CleanShot-2023-06-02-at-21.14.55.png" alt="" width="2843" height="1778" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/22/responsive/CleanShot-2023-06-02-at-21.14.55-xs.webp 300w ,https://docs.recoda.me/media/posts/22/responsive/CleanShot-2023-06-02-at-21.14.55-sm.webp 480w ,https://docs.recoda.me/media/posts/22/responsive/CleanShot-2023-06-02-at-21.14.55-md.webp 768w"></figure>
            ]]>
        </content>
    </entry>
    <entry>
        <title>Developer docs</title>
        <author>
            <name>Renato</name>
        </author>
        <link href="https://docs.recoda.me/developer-docs/"/>
        <id>https://docs.recoda.me/developer-docs/</id>

        <updated>2023-06-03T13:47:55+02:00</updated>
            <summary>
                <![CDATA[
                    Developer docs are under construction. Once we finish them we are going to provide you a list of events that you could use to extend&hellip;
                ]]>
            </summary>
        <content type="html">
            <![CDATA[
                <p class="msg msg--info">Developer docs are under construction. Once we finish them we are going to provide you a list of events that you could use to extend Recoda. Also here you'll find information on how you could integrate 3rd party or own CSS framework with Recoda tools for working with tokens inside Oxygen Builder.</p>
            ]]>
        </content>
    </entry>
    <entry>
        <title>Quickflow</title>
        <author>
            <name>Renato</name>
        </author>
        <link href="https://docs.recoda.me/quickflow/"/>
        <id>https://docs.recoda.me/quickflow/</id>

        <updated>2023-06-04T02:23:36+02:00</updated>
            <summary>
                <![CDATA[
                    Quickflow actions are in editor actions to boost your workflow and make it frictionless. You can find out more about them below: We could generate&hellip;
                ]]>
            </summary>
        <content type="html">
            <![CDATA[
                <p>Quickflow actions are in editor actions to boost your workflow and make it frictionless. You can find out more about them below:</p>
<h2>Copy selector</h2>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/20/CleanShot-2023-06-04-at-02.21.42.png" alt="" width="561" height="494" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/20/responsive/CleanShot-2023-06-04-at-02.21.42-xs.webp 300w ,https://docs.recoda.me/media/posts/20/responsive/CleanShot-2023-06-04-at-02.21.42-sm.webp 480w ,https://docs.recoda.me/media/posts/20/responsive/CleanShot-2023-06-04-at-02.21.42-md.webp 768w"></figure>
<h2>Generate breakpoint</h2>
<h3>Below Breakpoint</h3>
<p>We could generate media query by right-clicking on certain breakpoint inside the Oxygen Builder as shown in the image below:</p>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/20/CleanShot-2023-06-04-at-02.14.22.png" alt="" width="1065" height="753" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/20/responsive/CleanShot-2023-06-04-at-02.14.22-xs.webp 300w ,https://docs.recoda.me/media/posts/20/responsive/CleanShot-2023-06-04-at-02.14.22-sm.webp 480w ,https://docs.recoda.me/media/posts/20/responsive/CleanShot-2023-06-04-at-02.14.22-md.webp 768w"></figure>
<p class="msg msg--info">This is the way Oxygen Builder writes code for breakpoint (desktop first)</p>
<p>And this is something which we're going to get:</p>
<pre><code class="language-css">@media screen and ( max-width:  1366px) {</code><br><code class="language-css">  }</code></pre>
<h3>Above Breakpoint</h3>
<p>If we hold <code>CMD/CTRL</code> key, we could generate a media query above a certain breakpoint by right-clicking as shown in the image below:</p>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/20/CleanShot-2023-06-04-at-02.18.59.png" alt="" width="961" height="719" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/20/responsive/CleanShot-2023-06-04-at-02.18.59-xs.webp 300w ,https://docs.recoda.me/media/posts/20/responsive/CleanShot-2023-06-04-at-02.18.59-sm.webp 480w ,https://docs.recoda.me/media/posts/20/responsive/CleanShot-2023-06-04-at-02.18.59-md.webp 768w"></figure>
<p><br>And we're going to get code like this:</p>
<pre><code class="language-css">@media screen and ( min-width:  1366px) {</code><br><code class="language-css">  }</code></pre>
            ]]>
        </content>
    </entry>
    <entry>
        <title>Actions CLI</title>
        <author>
            <name>Renato</name>
        </author>
        <link href="https://docs.recoda.me/actions-cli-2/"/>
        <id>https://docs.recoda.me/actions-cli-2/</id>

        <updated>2023-06-04T12:27:00+02:00</updated>
            <summary>
                <![CDATA[
                    Action or command is the way to automate repeating tasks inside Oxygen Builder. If you need to do anything multiple or apply on multiple this&hellip;
                ]]>
            </summary>
        <content type="html">
            <![CDATA[
                <p>Action or command is the way to automate repeating tasks inside Oxygen Builder. If you need to do anything multiple or apply on multiple this will be go-to solution.<br><br>Some common use cases are:</p>
<ul>
<li>Adding multiple classes</li>
<li>Adding class to multiple elements</li>
<li>Removing class from multiple elements</li>
<li>Renaming multiple elements</li>
<li>Adding multiple elements</li>
<li>Adding single element at multiple places</li>
<li>Adding custom attribute to multiple elements</li>
</ul>
<h2>Supported Actions</h2>
<p>Actions are single job things which will help add elements, rename, change ID etc.<br>Real power is hidden in chaining them and repeating them on multiple elements.</p>
<p>In the table below we can see list of the supported actions and symbols which corresponds to certain action.</p>
<table class="table-striped" style="color: var(--text-primary-color); font-family: var(--editor-font-family); font-size: inherit; font-weight: var(--font-weight-normal); height: 589.984px; width: 100%;" border="1">
<tbody>
<tr style="height: 50.3594px;">
<td style="width: 23.2669%; height: 50.3594px;">Symbol</td>
<td style="width: 43.4948%; height: 50.3594px;">Action</td>
<td style="width: 33.3809%; height: 50.3594px;">Example</td>
</tr>
<tr style="height: 50.3594px;">
<td style="width: 23.2669%; height: 50.3594px;">&gt;</td>
<td style="width: 43.4948%; height: 50.3594px;">Add child element</td>
<td style="width: 33.3809%; height: 50.3594px;">&gt;div</td>
</tr>
<tr style="height: 50.3594px;">
<td style="width: 23.2669%; height: 50.3594px;">+</td>
<td style="width: 43.4948%; height: 50.3594px;">Add sibling element</td>
<td style="width: 33.3809%; height: 50.3594px;">section&gt;<strong>h2+p</strong></td>
</tr>
<tr style="height: 50.3594px;">
<td style="width: 23.2669%; height: 50.3594px;">.</td>
<td style="width: 43.4948%; height: 50.3594px;">Add class</td>
<td style="width: 33.3809%; height: 50.3594px;"><strong>.class-first.class2</strong></td>
</tr>
<tr style="height: 50.3594px;">
<td style="width: 23.2669%; height: 50.3594px;">@</td>
<td style="width: 43.4948%; height: 50.3594px;">Rename</td>
<td style="width: 33.3809%; height: 50.3594px;">@newName</td>
</tr>
<tr style="height: 107.953px;">
<td style="width: 23.2669%; height: 107.953px;">'</td>
<td style="width: 43.4948%; height: 107.953px;">Change Tag eg. 'li = set &lt;li&gt; custom tag eg. txt'li = add text element with custom li tag</td>
<td style="width: 33.3809%; height: 107.953px;">txt<strong>'li</strong></td>
</tr>
<tr style="height: 50.3594px;">
<td style="width: 23.2669%; height: 50.3594px;">*</td>
<td style="width: 43.4948%; height: 50.3594px;">Duplicate X times</td>
<td style="width: 33.3809%; height: 50.3594px;">div<strong>*5</strong></td>
</tr>
<tr style="height: 50.3594px;">
<td style="width: 23.2669%; height: 50.3594px;">[]</td>
<td style="width: 43.4948%; height: 50.3594px;">Set attribute</td>
<td style="width: 33.3809%; height: 50.3594px;">[data-demo=value]</td>
</tr>
<tr style="height: 50.3594px;">
<td style="width: 23.2669%; height: 50.3594px;">{}</td>
<td style="width: 43.4948%; height: 50.3594px;">Set new content: {newTxt}</td>
<td style="width: 33.3809%; height: 50.3594px;">{newTxt}</td>
</tr>
<tr style="height: 79.1562px;">
<td style="width: 23.2669%; height: 79.1562px;">^</td>
<td style="width: 43.4948%; height: 79.1562px;">Select parent (^X), where X is number of repeats</td>
<td style="width: 33.3809%; height: 79.1562px;">div&gt;div&gt;div<strong>^2</strong></td>
</tr>
</tbody>
</table>
<h2>Supported elements</h2>
<p>When you are using actions to add elements, you will have option to write HTML tags with emmet like syntax and generate Oxygen elements.<br><br>In the table below we can see how Recoda Action CLI will map them</p>
<table class="table-striped" style="color: var(--text-primary-color); font-family: var(--editor-font-family); font-size: inherit; font-weight: var(--font-weight-normal); height: 1143.92px; width: 100%;" border="1">
<tbody>
<tr style="height: 50.3594px;">
<td style="width: 27.6748%; height: 50.3594px;">Action</td>
<td style="width: 44.3652%; height: 50.3594px;">Oxygen Element</td>
<td style="width: 27.9601%; height: 50.3594px;">Custom Tag</td>
</tr>
<tr style="height: 50.3594px;">
<td style="width: 27.6748%; height: 50.3594px;">h1-h6</td>
<td style="width: 44.3652%; height: 50.3594px;">Heading element</td>
<td style="width: 27.9601%; height: 50.3594px;">h1-h6</td>
</tr>
<tr style="height: 50.3594px;">
<td style="width: 27.6748%; height: 50.3594px;">section</td>
<td style="width: 44.3652%; height: 50.3594px;">Section element</td>
<td style="width: 27.9601%; height: 50.3594px;"> </td>
</tr>
<tr style="height: 50.3594px;">
<td style="width: 27.6748%; height: 50.3594px;">p</td>
<td style="width: 44.3652%; height: 50.3594px;">Text block element</td>
<td style="width: 27.9601%; height: 50.3594px;">p</td>
</tr>
<tr style="height: 50.3594px;">
<td style="width: 27.6748%; height: 50.3594px;">a</td>
<td style="width: 44.3652%; height: 50.3594px;">Text link element</td>
<td style="width: 27.9601%; height: 50.3594px;">a</td>
</tr>
<tr style="height: 50.3594px;">
<td style="width: 27.6748%; height: 50.3594px;">aw</td>
<td style="width: 44.3652%; height: 50.3594px;">Link wrapper</td>
<td style="width: 27.9601%; height: 50.3594px;">a</td>
</tr>
<tr style="height: 107.945px;">
<td style="width: 27.6748%; height: 107.945px;">ab</td>
<td style="width: 44.3652%; height: 107.945px;">Button element</td>
<td style="width: 27.9601%; height: 107.945px;">a</td>
</tr>
<tr style="height: 50.3594px;">
<td style="width: 27.6748%; height: 50.3594px;">button</td>
<td style="width: 44.3652%; height: 50.3594px;">Button element</td>
<td style="width: 27.9601%; height: 50.3594px;">button</td>
</tr>
<tr style="height: 50.3594px;">
<td style="width: 27.6748%; height: 50.3594px;">img</td>
<td style="width: 44.3652%; height: 50.3594px;">Image element</td>
<td style="width: 27.9601%; height: 50.3594px;"> </td>
</tr>
<tr style="height: 50.3594px;">
<td style="width: 27.6748%; height: 50.3594px;">video</td>
<td style="width: 44.3652%; height: 50.3594px;">Video element</td>
<td style="width: 27.9601%; height: 50.3594px;"> </td>
</tr>
<tr style="height: 79.1484px;">
<td style="width: 27.6748%; height: 79.1484px;">icon</td>
<td style="width: 44.3652%; height: 79.1484px;">Icon element</td>
<td style="width: 27.9601%; height: 79.1484px;"> </td>
</tr>
<tr style="height: 50.3594px;">
<td style="width: 27.6748%; height: 50.3594px;">ib</td>
<td style="width: 44.3652%; height: 50.3594px;">Icon box element</td>
<td style="width: 27.9601%; height: 50.3594px;"> </td>
</tr>
<tr style="height: 50.3594px;">
<td style="width: 27.6748%; height: 50.3594px;">pb</td>
<td style="width: 44.3652%; height: 50.3594px;">Progress bar element</td>
<td style="width: 27.9601%; height: 50.3594px;"> </td>
</tr>
<tr style="height: 50.3594px;">
<td style="width: 27.6748%; height: 50.3594px;">gallery</td>
<td style="width: 44.3652%; height: 50.3594px;">Gallery element</td>
<td style="width: 27.9601%; height: 50.3594px;"> </td>
</tr>
<tr style="height: 50.3594px;">
<td style="width: 27.6748%; height: 50.3594px;">slider</td>
<td style="width: 44.3652%; height: 50.3594px;">Slider element</td>
<td style="width: 27.9601%; height: 50.3594px;"> </td>
</tr>
<tr style="height: 50.3594px;">
<td style="width: 27.6748%; height: 50.3594px;">tt</td>
<td style="width: 44.3652%; height: 50.3594px;">Testimonial element</td>
<td style="width: 27.9601%; height: 50.3594px;"> </td>
</tr>
<tr style="height: 50.3594px;">
<td style="width: 27.6748%; height: 50.3594px;">tabs</td>
<td style="width: 44.3652%; height: 50.3594px;">Tabs element</td>
<td style="width: 27.9601%; height: 50.3594px;"> </td>
</tr>
<tr style="height: 50.3594px;">
<td style="width: 27.6748%; height: 50.3594px;">superbox</td>
<td style="width: 44.3652%; height: 50.3594px;">Superbox element</td>
<td style="width: 27.9601%; height: 50.3594px;"> </td>
</tr>
<tr style="height: 50.3594px;">
<td style="width: 27.6748%; height: 50.3594px;">gg</td>
<td style="width: 44.3652%; height: 50.3594px;">Toggle element</td>
<td style="width: 27.9601%; height: 50.3594px;"> </td>
</tr>
<tr style="height: 50.3594px;">
<td style="width: 27.6748%; height: 50.3594px;">txt</td>
<td style="width: 44.3652%; height: 50.3594px;">Text element</td>
<td style="width: 27.9601%; height: 50.3594px;"> </td>
</tr>
<tr style="height: 50.3594px;">
<td style="width: 27.6748%; height: 50.3594px;">modal</td>
<td style="width: 44.3652%; height: 50.3594px;">Modal element</td>
<td style="width: 27.9601%; height: 50.3594px;"> </td>
</tr>
</tbody>
</table>
<p class="sc-fLlhyt dnUYCW msg msg--info"><span class="sc-dkzDqf kSNFbe">If Element is not in supported table, Recoda CLI will create div with custom tag so everything outside table will be DIV element with defined tags like main, aside, etc.</span></p>
<h2>Watch it in action</h2>
<p> </p>
<div data-slate-node="element" data-slate-void="true">
<div class="sc-ezOQGI edfgIq">
<div class="sc-cwSeag imynsI">
<div class="sc-bczRLJ kEeNDb">
<div class="sc-iTONeN jTNbzy">
<h3 class="sc-iAvgwm fUsnqc">Adding elements</h3>
<div class="post__iframe"><iframe style="width: 100%; max-width: 982px; min-height: 570px;" title="adding elements" src="https://app.gemoo.com/embed/home?codeId=DWN52yGebnwg8" frameborder="0" allowfullscreen="allowfullscreen" loading="lazy"></iframe></div>
<h3>Adding multiple classes</h3>
<div class="post__iframe"><iframe style="width: 100%; max-width: 982px; min-height: 570px;" title="adding multiple classes" src="https://app.gemoo.com/embed/home?codeId=P5JxGZ2Bj4Ado" frameborder="0" allowfullscreen="allowfullscreen" loading="lazy"></iframe></div>
<h3>Multiple classes to multiple elements</h3>
<div class="post__iframe"><iframe style="width: 100%; max-width: 982px; min-height: 570px;" title="multiple classes to multiple elements" src="https://app.gemoo.com/embed/home?codeId=PYNqxoj62k8OQ" frameborder="0" allowfullscreen="allowfullscreen" loading="lazy"></iframe></div>
<h3>Rename multiple elements</h3>
<div class="post__iframe"><iframe style="width: 100%; max-width: 982px; min-height: 570px;" title="rename multiple" src="https://app.gemoo.com/embed/home?codeId=Mpe4e9WgwZ1lm" frameborder="0" allowfullscreen="allowfullscreen" loading="lazy"></iframe></div>
</div>
</div>
<div class="sc-bczRLJ kEeNDb">
<div class="sc-iTONeN jTNbzy"> </div>
</div>
<div class="sc-bczRLJ kEeNDb">
<div class="sc-iTONeN jTNbzy">
<p class="sc-iAvgwm fUsnqc"> </p>
</div>
</div>
<div id="notice-code-block" class=" ace_editor ace_hidpi ace-terminal-theme ace_dark ace-editor"></div>
<div id="notice-code-block" class=" ace_editor ace_hidpi ace-terminal-theme ace_dark ace-editor">
<div>
<div> </div>
<div> </div>
</div>
</div>
<div class="sc-bczRLJ kEeNDb">
<div class="sc-iTONeN jTNbzy">
<p class="sc-iAvgwm fUsnqc"> </p>
</div>
</div>
</div>
</div>
</div>
            ]]>
        </content>
    </entry>
    <entry>
        <title>Accessibility &amp; SEO</title>
        <author>
            <name>Renato</name>
        </author>
        <link href="https://docs.recoda.me/accessibility-and-seo-3/"/>
        <id>https://docs.recoda.me/accessibility-and-seo-3/</id>

        <updated>2023-06-03T23:42:17+02:00</updated>
            <summary>
                <![CDATA[
                    Contrast ratio checker Inside the left sidebar, you will find some of the Recodas color tools. In the picture below you can see two circles&hellip;
                ]]>
            </summary>
        <content type="html">
            <![CDATA[
                <h2>Contrast ratio checker</h2>
<p>Inside the left sidebar, you will find some of the Recodas color tools. In the picture below you can see two circles which are quick-access tools for the foreground and background color.<br>Below them contrast checking tool is located.</p>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/18/CleanShot-2023-06-03-at-22.40.46.png" alt="" width="1433" height="1140" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/18/responsive/CleanShot-2023-06-03-at-22.40.46-xs.webp 300w ,https://docs.recoda.me/media/posts/18/responsive/CleanShot-2023-06-03-at-22.40.46-sm.webp 480w ,https://docs.recoda.me/media/posts/18/responsive/CleanShot-2023-06-03-at-22.40.46-md.webp 768w"></figure>
<p class="msg msg--info">The contrast checking tool will indicate the following states:<br>❌ - Failed to meet requirements<br>✔️ - Meets AA level requirement<br>✔️✔️ - Meets AAA level requirement</p>
<p><strong>What tool takes into account?</strong><br>Element type, font size, font weight, color, background color,</p>
<p class="msg msg--highlight "><strong>Limitations:</strong><br>Opacity, Gradients, Images. These areas would need direct access to a browser rendering engine or making images and doing pixel-by-pixel calculations to find value.<br>Keep in mind that doing this is far from a trivial task and even dedicated tools for accessibility checking have these limitations also.</p>
<p> </p>
<h2>Contrast color suggestion</h2>
<p>When we are picking a color, we have a dedicated tool here also which comes in handy. The color contrast suggestion tool will show which level potential color satisfies and you will have the option to nail contras and stay always in the green zone.</p>
<p>This reduces fixing issues, while the tool has limitations as mentioned above, it will nail 90% of use cases so later you need to run a site scan and fix a lot less issues related to the contras.</p>
<blockquote>
<p class="entry-title">An ounce of prevention is worth a pound of cure.</p>
</blockquote>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/18/CleanShot-2023-06-03-at-22.59.10.png" alt="" width="333" height="447" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/18/responsive/CleanShot-2023-06-03-at-22.59.10-xs.webp 300w ,https://docs.recoda.me/media/posts/18/responsive/CleanShot-2023-06-03-at-22.59.10-sm.webp 480w ,https://docs.recoda.me/media/posts/18/responsive/CleanShot-2023-06-03-at-22.59.10-md.webp 768w"></figure>
<p class="msg msg--info">The contrast checking tool will indicate the following states:<br>❌ - Failed to meet requirements<br>✔️ - Meets AA level requirement<br>✔️✔️ - Meets AAA level requirement</p>
<h2>Structure manager panel</h2>
<p>This panel is added by Recoda and it is acting as a popup which you can toggle by pressing Q or clicking on the structure icon in the top left corner of the screen.</p>
<p>This panel will assist you to improve both accessibility &amp; SEO, semantics are really important in the site creation process and you will have an overview of your tags to fix potential problems.</p>
<p class="msg msg--info">To edit tags, just <strong>double-click</strong> on any tag and that will open the tag editor.</p>
<h3>Tag view</h3>
<p>The tag view is something like the usual Oxygen Builder structure view with the addition of the elements tags as shown in the image below:</p>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/18/CleanShot-2023-06-03-at-23.09.02.png" alt="" width="815" height="670" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/18/responsive/CleanShot-2023-06-03-at-23.09.02-xs.webp 300w ,https://docs.recoda.me/media/posts/18/responsive/CleanShot-2023-06-03-at-23.09.02-sm.webp 480w ,https://docs.recoda.me/media/posts/18/responsive/CleanShot-2023-06-03-at-23.09.02-md.webp 768w"></figure>
<h3>Inspector view</h3>
<p>The inspector view is something like the inspector inside the browser dev tools view. It will show the tag, ID, and classes for each element, as shown in the image below:</p>
<figure class="post__image"><img loading="lazy"  style="color: var(--text-primary-color); font-family: var(--editor-font-family); font-size: inherit; font-weight: var(--font-weight-normal);" src="https://docs.recoda.me/media/posts/18/CleanShot-2023-06-03-at-23.23.03.png" alt="" width="591" height="630" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/18/responsive/CleanShot-2023-06-03-at-23.23.03-xs.webp 300w ,https://docs.recoda.me/media/posts/18/responsive/CleanShot-2023-06-03-at-23.23.03-sm.webp 480w ,https://docs.recoda.me/media/posts/18/responsive/CleanShot-2023-06-03-at-23.23.03-md.webp 768w"></figure>
<h3>Tag editing</h3>
<p>The quickest way to change tags is to open the tag editor by double-clicking on any tag and then selecting the desired tag.</p>
<p class="msg msg--info">To edit tags, just <strong>double-click</strong> on any tag and that will open the tag editor.</p>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/18/CleanShot-2023-06-03-at-23.27.33.png" alt="" width="1049" height="723" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/18/responsive/CleanShot-2023-06-03-at-23.27.33-xs.webp 300w ,https://docs.recoda.me/media/posts/18/responsive/CleanShot-2023-06-03-at-23.27.33-sm.webp 480w ,https://docs.recoda.me/media/posts/18/responsive/CleanShot-2023-06-03-at-23.27.33-md.webp 768w"></figure>
<p> </p>
<h2>Elements filter</h2>
<p>A feature that will help you filter and easily find code blocks, images, headings and buttons.</p>
<h3>Code Block</h3>
<p>Here we can see all the code blocks on the page, and we can see PHP, CSS, and JS indications on the right so you know what type of data each code block holds.</p>
<ol>
<li>PHP data present</li>
<li>CSS data present</li>
<li>JS data present</li>
</ol>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/18/CleanShot-2023-06-03-at-23.32.31.png" alt="" width="407" height="392" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/18/responsive/CleanShot-2023-06-03-at-23.32.31-xs.webp 300w ,https://docs.recoda.me/media/posts/18/responsive/CleanShot-2023-06-03-at-23.32.31-sm.webp 480w ,https://docs.recoda.me/media/posts/18/responsive/CleanShot-2023-06-03-at-23.32.31-md.webp 768w"></figure>
<h3>Image</h3>
<p>Here we can see all the images on the page and we can see does image contain alt attribute:</p>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/18/CleanShot-2023-06-03-at-23.36.10.png" alt="" width="411" height="615" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/18/responsive/CleanShot-2023-06-03-at-23.36.10-xs.webp 300w ,https://docs.recoda.me/media/posts/18/responsive/CleanShot-2023-06-03-at-23.36.10-sm.webp 480w ,https://docs.recoda.me/media/posts/18/responsive/CleanShot-2023-06-03-at-23.36.10-md.webp 768w"></figure>
<h3>Heading</h3>
<p>Here we can see the overview of all heading elements on the page and their levels, we could see quickly if something does not make sense</p>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/18/CleanShot-2023-06-03-at-23.38.35.png" alt="" width="406" height="643" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/18/responsive/CleanShot-2023-06-03-at-23.38.35-xs.webp 300w ,https://docs.recoda.me/media/posts/18/responsive/CleanShot-2023-06-03-at-23.38.35-sm.webp 480w ,https://docs.recoda.me/media/posts/18/responsive/CleanShot-2023-06-03-at-23.38.35-md.webp 768w"></figure>
            ]]>
        </content>
    </entry>
    <entry>
        <title>Code  </title>
        <author>
            <name>Renato</name>
        </author>
        <link href="https://docs.recoda.me/code-2/"/>
        <id>https://docs.recoda.me/code-2/</id>

        <updated>2023-06-03T13:49:43+02:00</updated>
            <summary>
                <![CDATA[
                    Blockpad code block editor Having a Codepen-like editor for code blocks? Yay! Here at Recoda, we love Codepen, and we think we should have UX&hellip;
                ]]>
            </summary>
        <content type="html">
            <![CDATA[
                <h2>Blockpad code block editor</h2>
<p>Having a Codepen-like editor for code blocks? Yay! </p>
<p>Here at Recoda, we love Codepen, and we think we should have UX to feel at home while writing code. </p>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/17/CleanShot-2023-06-02-at-17.36.08.png" alt="" width="2843" height="1778" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/17/responsive/CleanShot-2023-06-02-at-17.36.08-xs.webp 300w ,https://docs.recoda.me/media/posts/17/responsive/CleanShot-2023-06-02-at-17.36.08-sm.webp 480w ,https://docs.recoda.me/media/posts/17/responsive/CleanShot-2023-06-02-at-17.36.08-md.webp 768w"></figure>
<p> </p>
<h2>Custom CSS window</h2>
<p>If you like to use custom CSS, you can have always one to write your code. This window will take just a tiny fraction of your screen-estate and you could even undock it from the properties panel and drag it around the screen.</p>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/17/CleanShot-2023-06-02-at-17.24.40.png" alt="" width="936" height="446" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/17/responsive/CleanShot-2023-06-02-at-17.24.40-xs.webp 300w ,https://docs.recoda.me/media/posts/17/responsive/CleanShot-2023-06-02-at-17.24.40-sm.webp 480w ,https://docs.recoda.me/media/posts/17/responsive/CleanShot-2023-06-02-at-17.24.40-md.webp 768w"></figure>
<p class="msg msg--info"><strong>Wanna unlock even more developer energy?</strong><br>You will have <strong>Codesense</strong> support while you are writing code with CSS props autocomplete, and CSS variable suggestions. Say no more typos!</p>
<h2>Codesense</h2>
<p>Codesense is our solution crafted for Oxygen Builder code editing. While nothing beats Oxygen Builder when it comes to coding, this will boost it further.</p>
<h3>Codesense for CSS</h3>
<p>Imagine that all data that you use while developing a site could be interconnected within one system. Imagine that all the classes inside Oxygen Builder, all the CSS properties, and even all the CSS variables could be at your fingertips. </p>
<p>Now stop imagining it and <strong>see it in action!</strong></p>
<div class="post__iframe"><iframe style="width: 100%; max-width: 982px; min-height: 570px;" title="codesense" src="https://app.gemoo.com/embed/home?codeId=vJkERr15ye415" frameborder="0" allowfullscreen="allowfullscreen" loading="lazy"></iframe></div>
<p>Codesense for CSS is integrated in the following areas:</p>
<ul>
<li>Custom CSS window - <em>properties, variables</em></li>
<li>Stylesheets - <em>properties, variables, classes</em></li>
<li>Blockpad - <em>properties, variables, classes</em></li>
<li>Actions CLI - <em>classes</em></li>
</ul>
<h3>Codesense for JS</h3>
<p>It is something like its counterpart for CSS, but less powerful. It will hint at you JavaScript methods and make writing JavaScript a little bit easier.</p>
<h2>Code 💜 no-code</h2>
<p>A lot of the tools are chanting no-code, no-code. </p>
<h4>Yes, but…</h4>
<p>We think that the perfect system is a synergy of code and no code, so you could switch from one approach to another without friction.</p>
<p><strong>But why code in Visual tool?</strong></p>
<p>Show us just one tool which can handle every crazy design idea with just no code. When we make GUI for no-code there will be always certain limits to cover the most used cases, the most fancy ones to sell you the tool. </p>
<p><strong>Harsh reality?</strong> We can't cover every single scenario while making GUI, with code options are limitless, the game is not finite like with GUI tools. While tools need to refresh GUI to add new fancy things which get widely supported by the browser, with code tools limits are not the limits for us.</p>
<h3><strong>Step 1: Unlocking potential</strong></h3>
<p>We could have our CSS variables (often used for design tokens) in synergy with GUI. We could create tools that unlock power of the both worlds, and let our code inside GUI.</p>
<div class="post__iframe"><iframe style="width: 100%; max-width: 982px; min-height: 570px;" title="design token hints" src="https://app.gemoo.com/embed/home?codeId=vz3o8Y178Nl62" frameborder="0" allowfullscreen="allowfullscreen" loading="lazy"></iframe></div>
<h3>Step 2: Removing friction</h3>
<p>In <strong>step 1</strong>, we could see how we could flow data from code to no-code. But why just stop here, why not bring some no-code (GUI) while we are doing stuff?<br><br>We could use things like a color picker inside the code editor, coding can be fun.</p>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/17/CleanShot-2023-06-02-at-18.44.54.gif" alt="" width="800" height="378"></figure>
<p> </p>
<p> </p>
            ]]>
        </content>
    </entry>
    <entry>
        <title>Box Model</title>
        <author>
            <name>Renato</name>
        </author>
        <link href="https://docs.recoda.me/box-model-2/"/>
        <id>https://docs.recoda.me/box-model-2/</id>

        <updated>2023-06-04T15:54:30+02:00</updated>
            <summary>
                <![CDATA[
                    Everything displayed by CSS is a box. Understanding how the CSS Box Model works is a core foundation of CSS. We can see in the&hellip;
                ]]>
            </summary>
        <content type="html">
            <![CDATA[
                <p>Everything displayed by CSS is a box. Understanding how the CSS Box Model works is a core foundation of CSS. </p>
<p>We can see in the image below how all elements are boxes. Some of these boxes contain other elements, some are decorative, and some of them contain text and hold valuable information for the visitors.</p>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/16/CleanShot-2023-06-03-at-00.36.10.png" alt="" width="2290" height="1599" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.36.10-xs.webp 300w ,https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.36.10-sm.webp 480w ,https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.36.10-md.webp 768w"></figure>
<p>As we have seen before, we could call everything just a box from a design perspective. <br><br>To understand them in a better fashion, each browser implements Box Model inside dev tools with some crucial information about our boxes that look something like this.</p>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/16/CleanShot-2023-06-03-at-00.24.05.png" alt="" width="299" height="241" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.24.05-xs.webp 300w ,https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.24.05-sm.webp 480w ,https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.24.05-md.webp 768w"></figure>
<h2>Box Model component</h2>
<p>To make your life easier we have made a super component inside Oxygen Builder called the Box Model. </p>
<p>This component is composed of 6-in-1 panels so it could take just a fraction of your screen and provide all needed data.<br><br><strong>There are three main panels:</strong></p>
<ol>
<li><strong>Space</strong> (Margin &amp; Padding controls, and preview of computed element size)</li>
<li><strong>Border</strong> (Edit borders and border-radius)</li>
<li><strong>Size</strong> (Height, Width, and Overflow control)</li>
</ol>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/16/box-model-parts.jpg" alt="" width="469" height="276" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/16/responsive/box-model-parts-xs.webp 300w ,https://docs.recoda.me/media/posts/16/responsive/box-model-parts-sm.webp 480w ,https://docs.recoda.me/media/posts/16/responsive/box-model-parts-md.webp 768w"></figure>
<p>Shortcuts (QWERTY):<br>Z - Space<br>X - Border<br>C - Size<br>V - collapse/expand panels</p>
<p><strong>Supports:</strong><br><span style="color: var(--text-primary-color); font-family: var(--editor-font-family); font-size: inherit; font-weight: var(--font-weight-normal);">     ✅  Auto PX to REM conversion<br></span><span style="color: var(--text-primary-color); font-family: var(--editor-font-family); font-size: inherit; font-weight: var(--font-weight-normal);">     ✅  </span>CSS variables shorthands <br><span style="color: var(--text-primary-color); font-family: var(--editor-font-family); font-size: inherit; font-weight: var(--font-weight-normal);">     ✅  </span>CSS functions</p>
<h3>Freehand drag</h3>
<p>To undock the panel from the side panel and drag it around the editor, you will need double click on the anchor icon. And to dock again, repeat the same action.</p>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/16/CleanShot-2023-06-03-at-00.37.02.png" alt="" width="469" height="318" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.37.02-xs.webp 300w ,https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.37.02-sm.webp 480w ,https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.37.02-md.webp 768w"></figure>
<h2>1. Space panel</h2>
<p>In the image below space panel is shown. You could notice there are 8 spacing controls, four of them are for adjusting margin, and four of them are for adjusting padding. </p>
<p>In the middle of the panel you could notice computed size preview. </p>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/16/BOX-MODEL-CONTROLS.jpg" alt="" width="747" height="439" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/16/responsive/BOX-MODEL-CONTROLS-xs.webp 300w ,https://docs.recoda.me/media/posts/16/responsive/BOX-MODEL-CONTROLS-sm.webp 480w ,https://docs.recoda.me/media/posts/16/responsive/BOX-MODEL-CONTROLS-md.webp 768w"></figure>
<h3>1.1 Adjusting Values</h3>
<p>When you click on some of these options, popup panel with adjustment options will be shown and look like this in the picture below:</p>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/16/CleanShot-2023-06-03-at-00.40.26.png" alt="" width="469" height="535" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.40.26-xs.webp 300w ,https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.40.26-sm.webp 480w ,https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.40.26-md.webp 768w"></figure>
<p><strong>Options are:</strong></p>
<ol>
<li>Input for typing scale</li>
<li>Unit picker</li>
<li>Apply all (shortcut: <code>ALT + CLICK</code> on some of the predefined values)</li>
<li>Apply the opposite (shortcut: <code>SHIFT + CLICK</code> on some of the predefined values)</li>
<li>Rem spacing scale (work in px, output in rem)</li>
<li>CSS Variables shorthand</li>
<li>Reset value (<code>+SHIFT</code> - reset opposite, <code>+ALT</code> - reset all)</li>
</ol>
<h3>1.2 Indications</h3>
<p>When you click on some of these options, a popup panel with adjustment options will be shown and look like this in the picture below:</p>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/16/box-model-indications.jpg" alt="" width="1920" height="1080" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/16/responsive/box-model-indications-xs.webp 300w ,https://docs.recoda.me/media/posts/16/responsive/box-model-indications-sm.webp 480w ,https://docs.recoda.me/media/posts/16/responsive/box-model-indications-md.webp 768w"></figure>
<p>The box model will indicate if the element is styled via ID or class.</p>
<p>If the element is styled via ID and the class does not have styles on that option, it will show a blue box and indicate that anything that you change won't take effect for that option.</p>
<p>If you are editing a class and the element is also styled via ID it will strikethrough value which is overridden by ID. </p>
<h2>2. Border panel</h2>
<p>Border panel consists of two groups:</p>
<ol>
<li>Radius (corner) controls</li>
<li>Border controls (color, style, width)</li>
</ol>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/16/CleanShot-2023-06-03-at-00.45.42.png" alt="" width="470" height="275" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.45.42-xs.webp 300w ,https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.45.42-sm.webp 480w ,https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.45.42-md.webp 768w"></figure>
<h3>2.1 Radius controls</h3>
<p>Border radius controls have 3 options like labeled in the picture below: </p>
<ol>
<li>Advanced radius controls</li>
<li>Individual corner radius</li>
<li>All corner radius</li>
</ol>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/16/CleanShot-2023-06-03-at-00.47.27.png" alt="" width="601" height="79" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.47.27-xs.webp 300w ,https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.47.27-sm.webp 480w ,https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.47.27-md.webp 768w"></figure>
<h4>2.1.1 Advanced Radius controls</h4>
<p>Here we have another three options:</p>
<p><strong>1) Basic edits</strong> will help you turn your element into a blob</p>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/16/CleanShot-2023-06-03-at-00.48.22.png" alt="" width="468" height="557" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.48.22-xs.webp 300w ,https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.48.22-sm.webp 480w ,https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.48.22-md.webp 768w"></figure>
<p><strong>2) Advanced edits</strong> will give you full control over the border-radius, so you can nail it. If you go too crazy, to reset to default you can just click on the shape and start tweaking the radius again.</p>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/16/CleanShot-2023-06-03-at-00.48.53.png" alt="" width="553" height="656" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.48.53-xs.webp 300w ,https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.48.53-sm.webp 480w ,https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.48.53-md.webp 768w"></figure>
<p><strong>3) Patterns</strong> hold predefined radius styles</p>
<h4>2.1.2 Edit individual radius</h4>
<p>Click on this icon and a popup with individual corner radius controls will open:</p>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/16/CleanShot-2023-06-03-at-00.49.28.png" alt="" width="599" height="78" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.49.28-xs.webp 300w ,https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.49.28-sm.webp 480w ,https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.49.28-md.webp 768w"></figure>
<p>After clicking you should see a popup panel like this with controls for each corner (top-left, top-right, bottom-left, bottom-right):</p>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/16/CleanShot-2023-06-03-at-00.50.11.png" alt="" width="470" height="170" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.50.11-xs.webp 300w ,https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.50.11-sm.webp 480w ,https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.50.11-md.webp 768w"></figure>
<h3>2.2 Border controls</h3>
<p>Border controls consist of two groups of controls:</p>
<ol>
<li>Border to edit (all, top, right, bottom, left)</li>
<li>Selected border options (color, style, width)</li>
</ol>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/16/CleanShot-2023-06-03-at-00.52.32.png" alt="" width="470" height="275" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.52.32-xs.webp 300w ,https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.52.32-sm.webp 480w ,https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.52.32-md.webp 768w"></figure>
<p>To edit borders you will need to select desired border from the left option group (all, top, right, bottom, or left) and pick a color, select style and specify width.</p>
<h3>2.3 Indications</h3>
<p>The indication system is made to provide rich and logical hints about styles.</p>
<p>If something is styled via class it will have a green label, and if it is styled via ID label will be blue.</p>
<p>If value is present there will be a dot before the label and by clicking on the dot you will reset only that value.</p>
<p>If value is coming from the upper breakpoint you will see underlined label so you can know that you need to go to upper breakpoint to adjust the value.<br><br>In the image below we could see various types of indications, let's see could we identify them:</p>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/16/CleanShot-2023-06-03-at-00.55.12.png" alt="" width="470" height="275" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.55.12-xs.webp 300w ,https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.55.12-sm.webp 480w ,https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.55.12-md.webp 768w"></figure>
<p><strong>In the image above we have various types of indications like:</strong></p>
<ol>
<li>Radius edit coming from an upper breakpoint (underline), and it is styled via ID (blue label)</li>
<li>Present styles of borders (top, right, bottom, left), outlined buttons</li>
<li>Active editing for the option<strong> all borders</strong>, filled button</li>
<li>Color styled via ID (blue label), dot before label indicates that the value is coming from the current breakpoint, to clear that option to hover on the dot and you will see a red X icon</li>
<li>Style coming from class (green label)</li>
</ol>
<h2>3. Size panel</h2>
<p>Size panel consists of three groups:</p>
<ol>
<li>Width control group (Width, Min Width, Max Width)</li>
<li>Height control group (Height, Min Height, Max Height)</li>
<li>Overflow control group (Visible, Hidden, Scroll)</li>
</ol>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/16/CleanShot-2023-06-03-at-00.57.21.png" alt="" width="601" height="351" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.57.21-xs.webp 300w ,https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.57.21-sm.webp 480w ,https://docs.recoda.me/media/posts/16/responsive/CleanShot-2023-06-03-at-00.57.21-md.webp 768w"></figure>
<h3>3.1 Understanding Width and Height Controls</h3>
<p>The first two groups controls are Width and Height, and they work with the same logic.</p>
<p>Priority:</p>
<ol>
<li>Min Width <code>beats both Width and Max Width</code> (element will never be smaller than this)</li>
<li>Max Width  <code>beats Width</code></li>
<li>Width sets desired element width (avoid hardcoding this much as you can, commonly used value is 100%)</li>
</ol>
<p>The same priority logic applies to Min Height, Max Height, and Height.</p>
<h3>3.2 Overflow controls</h3>
<p>If we set fixed width or height of our box, the content inside of it often won't be able to fit within constraints so we should set how content should behave in these conditions.</p>
<p>Options are:</p>
<ol>
<li>Visible - Content is not clipped and may be rendered outside the box.</li>
<li>Hidden - Content is clipped if necessary to fit the box. No scrollbars are provided.</li>
<li>Scroll - Content is clipped if necessary to fit the box. Browsers always display scrollbars whether or not any content is clipped.</li>
<li>Auto - Content is clipped if necessary to fit the box. Browsers will display scrollbars only if any content is clipped.</li>
</ol>
<h3>3.2 Indications</h3>
<p>In the image below we can see some examples of the indications which will this panel provide to you so you could have a better understanding of what is going on with element style.<br>Example shows editing class with an indication of the width styles which are coming from ID and therefore could not be overridden by a class. Height is styled via class, but we can see underlining which tells us that styles are coming from some upper breakpoint.<br>Min and Max Height are values coming from the class and the dot before each label tells us that value is present at this breakpoint. To clear individual values from this breakpoint, we could just click on the dot and values will be cleared.</p>
<figure class="post__image"><img loading="lazy"  src="https://docs.recoda.me/media/posts/16/size-indications.jpg" alt="" width="1964" height="1148" sizes="(max-width: 768px) 100vw, 768px" srcset="https://docs.recoda.me/media/posts/16/responsive/size-indications-xs.webp 300w ,https://docs.recoda.me/media/posts/16/responsive/size-indications-sm.webp 480w ,https://docs.recoda.me/media/posts/16/responsive/size-indications-md.webp 768w"></figure>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
            ]]>
        </content>
    </entry>
</feed>