<commit_before>﻿<!DOCTYPE html>
<html>
<head>
    <title>Layout&mdash;ZoaUI</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="/css/zoaui/zoaui.css" />
    <link rel="stylesheet" href="/css/zoaui/docs/doc.css" />
</head>
<body>
    <div class="zo-navbar zo-navbar--dark zo-navbar-borderless">
        <div class="zo-container">
            <a href="#" class="zo-navbar__link zo-navbar__toggle zo-navbar__link--bgDark" role="button" data-zo-navbar="#mainNav"></a>
            <h2 class="zo-navbar__brand">
                <a href="/zoaui/" class="zo-navbar__link zo-navbar__brand__link zo-navbar__link--bgDark">ZoaUI</a>
            </h2>
            <div class="zo-navbar__nav zo-navbar__nav--bgDark" id="mainNav">
                <ul class="zo-navbar__list">
                    <li class="zo-navbar__item">
                        <a href="/zoaui/css/" class="zo--active zo-navbar__link zo-navbar__nav__link zo-navbar__link--bgDark">CSS</a>
                    </li>
                    <li class="zo-navbar__item">
                        <a href="/zoaui/js/" class="zo-navbar__link zo-navbar__nav__link zo-navbar__link--bgDark">JavaScript</a>
                    </li>
                    <li class="zo-navbar__item">
                        <a href="/zoaui/i18n/" class="zo-navbar__link zo-navbar__nav__link zo-navbar__link--bgDark">i18n</a>
                    </li>
                </ul>
                <ul class="zo-navbar__list zo-navbar__list--right">
                    <li class="zo-navbar__item">
                        <a href="https://github.com/infinnie/zoaui" target="_blank" class="zo-navbar__link zo-navbar__nav__link zo-navbar__link--bgDark">GitHub</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="zo-container">
        <div class="zo-g">
            <div class="zo-g__col zo-g__col--m3 zo-g__col--l4">
                <div class="zo-g__content">
                    <ul class="doc-sideNav">
                        <li class="doc-sideNav__item">
                            <a href="/zoaui/css/" class="doc-sideNav__link">CSS</a>
                        </li>
                        <li class="doc-sideNav__item">
                            <a href="/zoaui/css/layout.html" class="zo--active doc-sideNav__link">Layout</a>
                        </li>
                        <li class="doc-sideNav__item">
                            <a href="/zoaui/css/typography.html" class="doc-sideNav__link">Typography</a>
                        </li>
                        <li class="doc-sideNav__item">
                            <a href="/zoaui/css/button.html" class="doc-sideNav__link">Buttons</a>
                        </li>
                        <li class="doc-sideNav__item">
                            <a href="/zoaui/css/form.html" class="doc-sideNav__link">Form elements</a>
                        </li>
                        <li class="doc-sideNav__item">
                            <a href="/zoaui/css/image.html" class="doc-sideNav__link">Images</a>
                        </li>
                        <li class="doc-sideNav__item">
                            <a href="/zoaui/css/pagination.html" class="doc-sideNav__link">Pagination</a>
                        </li>
                        <li class="doc-sideNav__item">
                            <a href="/zoaui/css/badge.html" class="doc-sideNav__link">Badges</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="zo-g__col zo-g__col--m9 zo-g__col--l8">
                <div class="zo-g__content">
                    <h1 class="zo-h1--top">Layout</h1>
                    <p>ZoaUI utilizes responsive grids for layout. In ZoaUI, screen sizes are divided into 3 categories by 2 breakpoints: small (s), medium (m), and large (l).</p>
                    <h2>The role of the container</h2>
                    <p>Use the classname <code class="zo-code">zo-container</code> to restrain contents inside within a given width, which by default, is 960px.</p>
                    <h2 class="zo-h2--top">Small</h2>
                    <div class="zo-g">
                        <div class="zo-g__col zo-g__col--s1">
                            <div class="doc-displayBorder">1 col</div>
                        </div>
                        <div class="zo-g__col zo-g__col--s11">
                            <div class="doc-displayBorder">11 columns</div>
                        </div>
                    </div>
                    <div class="zo-g">
                        <div class="zo-g__col zo-g__col--s2">
                            <div class="doc-displayBorder">2 cols</div>
                        </div>
                        <div class="zo-g__col zo-g__col--s10">
                            <div class="doc-displayBorder">10 columns</div>
                        </div>
                    </div>
                    <div class="zo-g">
                        <div class="zo-g__col zo-g__col--s3">
                            <div class="doc-displayBorder">3 columns</div>
                        </div>
                        <div class="zo-g__col zo-g__col--s9">
                            <div class="doc-displayBorder">9 columns</div>
                        </div>
                    </div>
                    <div class="zo-g">
                        <div class="zo-g__col zo-g__col--s4">
                            <div class="doc-displayBorder">4 columns</div>
                        </div>
                        <div class="zo-g__col zo-g__col--s8">
                            <div class="doc-displayBorder">8 columns</div>
                        </div>
                    </div>
                    <div class="zo-g">
                        <div class="zo-g__col zo-g__col--s5">
                            <div class="doc-displayBorder">5 columns</div>
                        </div>
                        <div class="zo-g__col zo-g__col--s7">
                            <div class="doc-displayBorder">7 columns</div>
                        </div>
                    </div>
                    <div class="zo-g">
                        <div class="zo-g__col zo-g__col--s6">
                            <div class="doc-displayBorder">6 columns</div>
                        </div>
                        <div class="zo-g__col zo-g__col--s6">
                            <div class="doc-displayBorder">6 columns</div>
                        </div>
                    </div>
                    <pre class="zo-pre">
&lt;div class="zo-g"&gt;
    &lt;div class="zo-g__col zo-g__col--s1"&gt;
        ...
    &lt;/div&gt;
    &lt;div class="zo-g__col zo-g__col--s11"&gt;
        ...
    &lt;/div&gt;
&lt;/div&gt;
</pre>
                    <h2>Medium</h2>
                    <div class="zo-g">
                        <div class="zo-g__col zo-g__col--m1">
                            <div class="doc-displayBorder">1 col</div>
                        </div>
                        <div class="zo-g__col zo-g__col--m11">
                            <div class="doc-displayBorder">11 columns</div>
                        </div>
                    </div>
                    <div class="zo-g">
                        <div class="zo-g__col zo-g__col--m2">
                            <div class="doc-displayBorder">2 cols</div>
                        </div>
                        <div class="zo-g__col zo-g__col--m10">
                            <div class="doc-displayBorder">10 columns</div>
                        </div>
                    </div>
                    <div class="zo-g">
                        <div class="zo-g__col zo-g__col--m3">
                            <div class="doc-displayBorder">3 columns</div>
                        </div>
                        <div class="zo-g__col zo-g__col--m9">
                            <div class="doc-displayBorder">9 columns</div>
                        </div>
                    </div>
                    <div class="zo-g">
                        <div class="zo-g__col zo-g__col--m4">
                            <div class="doc-displayBorder">4 columns</div>
                        </div>
                        <div class="zo-g__col zo-g__col--m8">
                            <div class="doc-displayBorder">8 columns</div>
                        </div>
                    </div>
                    <div class="zo-g">
                        <div class="zo-g__col zo-g__col--m5">
                            <div class="doc-displayBorder">5 columns</div>
                        </div>
                        <div class="zo-g__col zo-g__col--m7">
                            <div class="doc-displayBorder">7 columns</div>
                        </div>
                    </div>
                    <div class="zo-g">
                        <div class="zo-g__col zo-g__col--m6">
                            <div class="doc-displayBorder">6 columns</div>
                        </div>
                        <div class="zo-g__col zo-g__col--m6">
                            <div class="doc-displayBorder">6 columns</div>
                        </div>
                    </div>
                    <pre class="zo-pre">
&lt;div class="zo-g"&gt;
    &lt;div class="zo-g__col zo-g__col--m1"&gt;
        ...
    &lt;/div&gt;
    &lt;div class="zo-g__col zo-g__col--m11"&gt;
        ...
    &lt;/div&gt;
&lt;/div&gt;
</pre>

                    <h2>Offset</h2>
                    <div class="zo-g">
                        <div class="zo-g__col zo-g__col--s6 zo-g__col--sOffset3">
                            <div class="doc-displayBorder">s6, offset 3</div>
                        </div>
                    </div><commit_msg>Completed documentation<commit_after>﻿<!DOCTYPE html>
<html>
<head>
    <title>Layout&mdash;ZoaUI</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="/css/zoaui/zoaui.css" />
    <link rel="stylesheet" href="/css/zoaui/docs/doc.css" />
</head>
<body>
    <div class="zo-navbar zo-navbar--dark zo-navbar-borderless">
        <div class="zo-container">
            <a href="#" class="zo-navbar__link zo-navbar__toggle zo-navbar__link--bgDark" role="button" data-zo-navbar="#mainNav"></a>
            <h2 class="zo-navbar__brand">
                <a href="/zoaui/" class="zo-navbar__link zo-navbar__brand__link zo-navbar__link--bgDark">ZoaUI</a>
            </h2>
            <div class="zo-navbar__nav zo-navbar__nav--bgDark" id="mainNav">
                <ul class="zo-navbar__list">
                    <li class="zo-navbar__item">
                        <a href="/zoaui/css/" class="zo--active zo-navbar__link zo-navbar__nav__link zo-navbar__link--bgDark">CSS</a>
                    </li>
                    <li class="zo-navbar__item">
                        <a href="/zoaui/js/" class="zo-navbar__link zo-navbar__nav__link zo-navbar__link--bgDark">JavaScript</a>
                    </li>
                    <li class="zo-navbar__item">
                        <a href="/zoaui/i18n/" class="zo-navbar__link zo-navbar__nav__link zo-navbar__link--bgDark">i18n</a>
                    </li>
                </ul>
                <ul class="zo-navbar__list zo-navbar__list--right">
                    <li class="zo-navbar__item">
                        <a href="https://github.com/infinnie/zoaui" target="_blank" class="zo-navbar__link zo-navbar__nav__link zo-navbar__link--bgDark">GitHub</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="zo-container">
        <div class="zo-g">
            <div class="zo-g__col zo-g__col--m3 zo-g__col--l4">
                <div class="zo-g__content">
                    <ul class="doc-sideNav">
                        <li class="doc-sideNav__item">
                            <a href="/zoaui/css/" class="doc-sideNav__link">CSS</a>
                        </li>
                        <li class="doc-sideNav__item">
                            <a href="/zoaui/css/layout.html" class="zo--active doc-sideNav__link">Layout</a>
                        </li>
                        <li class="doc-sideNav__item">
                            <a href="/zoaui/css/typography.html" class="doc-sideNav__link">Typography</a>
                        </li>
                        <li class="doc-sideNav__item">
                            <a href="/zoaui/css/button.html" class="doc-sideNav__link">Buttons</a>
                        </li>
                        <li class="doc-sideNav__item">
                            <a href="/zoaui/css/form.html" class="doc-sideNav__link">Form elements</a>
                        </li>
                        <li class="doc-sideNav__item">
                            <a href="/zoaui/css/image.html" class="doc-sideNav__link">Images</a>
                        </li>
                        <li class="doc-sideNav__item">
                            <a href="/zoaui/css/pagination.html" class="doc-sideNav__link">Pagination</a>
                        </li>
                        <li class="doc-sideNav__item">
                            <a href="/zoaui/css/badge.html" class="doc-sideNav__link">Badges</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="zo-g__col zo-g__col--m9 zo-g__col--l8">
                <div class="zo-g__content">
                    <h1 class="zo-h1--top">Layout</h1>
                    <p>ZoaUI utilizes responsive grids for layout. In ZoaUI, screen sizes are divided into 3 categories by 2 breakpoints: small (s), medium (m), and large (l).</p>
                    <h2>The role of the container</h2>
                    <p>Use the classname <code class="zo-code">zo-container</code> to restrain contents inside within a given width, which by default, is 960px.</p>
                    <h2>Small</h2>
                    <div class="zo-g">
                        <div class="zo-g__col zo-g__col--s1">
                            <div class="doc-displayBorder">1 col</div>
                        </div>
                        <div class="zo-g__col zo-g__col--s11">
                            <div class="doc-displayBorder">11 columns</div>
                        </div>
                    </div>
                    <div class="zo-g">
                        <div class="zo-g__col zo-g__col--s2">
                            <div class="doc-displayBorder">2 cols</div>
                        </div>
                        <div class="zo-g__col zo-g__col--s10">
                            <div class="doc-displayBorder">10 columns</div>
                        </div>
                    </div>
                    <div class="zo-g">
                        <div class="zo-g__col zo-g__col--s3">
                            <div class="doc-displayBorder">3 columns</div>
                        </div>
                        <div class="zo-g__col zo-g__col--s9">
                            <div class="doc-displayBorder">9 columns</div>
                        </div>
                    </div>
                    <div class="zo-g">
                        <div class="zo-g__col zo-g__col--s4">
                            <div class="doc-displayBorder">4 columns</div>
                        </div>
                        <div class="zo-g__col zo-g__col--s8">
                            <div class="doc-displayBorder">8 columns</div>
                        </div>
                    </div>
                    <div class="zo-g">
                        <div class="zo-g__col zo-g__col--s5">
                            <div class="doc-displayBorder">5 columns</div>
                        </div>
                        <div class="zo-g__col zo-g__col--s7">
                            <div class="doc-displayBorder">7 columns</div>
                        </div>
                    </div>
                    <div class="zo-g">
                        <div class="zo-g__col zo-g__col--s6">
                            <div class="doc-displayBorder">6 columns</div>
                        </div>
                        <div class="zo-g__col zo-g__col--s6">
                            <div class="doc-displayBorder">6 columns</div>
                        </div>
                    </div>
                    <pre class="zo-pre">
&lt;div class="zo-g"&gt;
    &lt;div class="zo-g__col zo-g__col--s1"&gt;
        ...
    &lt;/div&gt;
    &lt;div class="zo-g__col zo-g__col--s11"&gt;
        ...
    &lt;/div&gt;
&lt;/div&gt;
</pre>
                    <h2>Medium</h2>
                    <div class="zo-g">
                        <div class="zo-g__col zo-g__col--m1">
                            <div class="doc-displayBorder">1 col</div>
                        </div>
                        <div class="zo-g__col zo-g__col--m11">
                            <div class="doc-displayBorder">11 columns</div>
                        </div>
                    </div>
                    <div class="zo-g">
                        <div class="zo-g__col zo-g__col--m2">
                            <div class="doc-displayBorder">2 cols</div>
                        </div>
                        <div class="zo-g__col zo-g__col--m10">
                            <div class="doc-displayBorder">10 columns</div>
                        </div>
                    </div>
                    <div class="zo-g">
                        <div class="zo-g__col zo-g__col--m3">
                            <div class="doc-displayBorder">3 columns</div>
                        </div>
                        <div class="zo-g__col zo-g__col--m9">
                            <div class="doc-displayBorder">9 columns</div>
                        </div>
                    </div>
                    <div class="zo-g">
                        <div class="zo-g__col zo-g__col--m4">
                            <div class="doc-displayBorder">4 columns</div>
                        </div>
                        <div class="zo-g__col zo-g__col--m8">
                            <div class="doc-displayBorder">8 columns</div>
                        </div>
                    </div>
                    <div class="zo-g">
                        <div class="zo-g__col zo-g__col--m5">
                            <div class="doc-displayBorder">5 columns</div>
                        </div>
                        <div class="zo-g__col zo-g__col--m7">
                            <div class="doc-displayBorder">7 columns</div>
                        </div>
                    </div>
                    <div class="zo-g">
                        <div class="zo-g__col zo-g__col--m6">
                            <div class="doc-displayBorder">6 columns</div>
                        </div>
                        <div class="zo-g__col zo-g__col--m6">
                            <div class="doc-displayBorder">6 columns</div>
                        </div>
                    </div>
                    <pre class="zo-pre">
&lt;div class="zo-g"&gt;
    &lt;div class="zo-g__col zo-g__col--m1"&gt;
        ...
    &lt;/div&gt;
    &lt;div class="zo-g__col zo-g__col--m11"&gt;
        ...
    &lt;/div&gt;
&lt;/div&gt;
</pre>
                    <h2>Large</h2>
                    <div class="zo-g">
                        <div class="zo-g__col zo-g__col--l1">
                            <div class="doc-displayBorder">1 col</div>
                        </div>
                        <div class="zo-g__col zo-g__col--l11">
                            <div class="doc-displayBorder">11 columns</div>
                        </div>
                    </div>
                    <pre class="zo-pre">
&lt;div class="zo-g"&gt;
    &lt;div class="zo-g__col zo-g__col--l1"&gt;
        ...
    &lt;/div&gt;
    &lt;div class="zo-g__col zo-g__col--l11"&gt;
        ...
    &lt;/div&gt;
&lt;/div&gt;
</pre>
                    <h2>Adding margins to the content</h2>
                    <p>Usually, we want the content area to have appropriate horizontal margins instead of touching the edge. If so, nest a div with the classname <code class="zo-code">zo-g__content</code> inside the column.</p>
                    <div class="zo-g">
                        <div class="zo-g__col zo-g__col--s6">
                            <div class="zo-g__content">
                                <div class="doc-displayBorder">6 columns, now inside <code class="zo-code">.zo-g__content</code>.</div>
                            </div>
                        </div>
                        <div class="zo-g__col zo-g__col--s6">
                            <div class="doc-displayBorder">6 columns</div>
                        </div>
                    </div>
                    <pre class="zo-pre">
&lt;div class="zo-g"&gt;
    &lt;div class="zo-g__col zo-g__col--s6"&gt;
        &lt;div class="zo-g__content"&gt;
            &lt;div class="doc-displayBorder"&gt;6 columns, now inside &lt;code class="zo-code"&gt;.zo-g__content&lt;/code&gt;.&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="zo-g__col zo-g__col--s6"&gt;
        &lt;div class="doc-displayBorder"&gt;6 columns&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</pre>
                    <h2>Keeping the content aligned to the container</h2>
                    <p>In a nested multicolumn layout, it is <a href="/zoaui/css/image.html">sometimes desired</a> that contents in columns, though having margins, are aligned to the left and right edges of the container. Appending the classname <code class="zo-code">zo-g--fill</code> to <code>zo-g</code> will work.</p>
                    <div class="zo-g zo-g--fill">
                        <div class="zo-g__col zo-g__col--s6">
                            <div class="zo-g__content">
                                <div class="doc-displayBorder">6 columns inside <code class="zo-code">.zo-g__content</code></div>
                            </div>
                        </div>
                        <div class="zo-g__col zo-g__col--s6">
                            <div class="zo-g__content">
                                <div class="doc-displayBorder">6 columns inside <code class="zo-code">.zo-g__content</code></div>
                            </div>
                        </div>
                    </div>
                    <pre class="zo-pre">
&lt;div class="zo-g zo-g--fill"&gt;
    &lt;div class="zo-g__col zo-g__col--s6"&gt;
        &lt;div class="zo-g__content"&gt;
            &lt;div class="doc-displayBorder"&gt;...&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="zo-g__col zo-g__col--s6"&gt;
        &lt;div class="zo-g__content"&gt;
            &lt;div class="doc-displayBorder"&gt;...&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</pre>
                    <h2>Offset</h2>
                    <div class="zo-g">
                        <div class="zo-g__col zo-g__col--s6 zo-g__col--sOffset3">
                            <div class="doc-displayBorder">s6, offset 3</div>
                        </div>
                    </div>
{'fraction_non_alphanumeric': 0.14481870843166703, 'fraction_numerical': 0.009268397339626689, 'mean_word_length': 1.1210411357844923, 'pattern_counts': {'":': 0, '<': 531, '<?xml version=': 0, '>': 531, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1420947', 'n_tokens_mistral': 7002, 'n_tokens_neox': 6597, 'n_words': 1126}