Layout

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).

The role of the container

Use the classname zo-container to restrain contents inside within a given width, which by default, is 960px.

Small

1 col

11 columns

2 cols

10 columns

3 columns

9 columns

4 columns

8 columns

5 columns

7 columns

6 columns

<div class="zo-g">
    <div class="zo-g__col zo-g__col--s1">
        ...
    </div>
    <div class="zo-g__col zo-g__col--s11">
        ...
    </div>
</div>

Medium

1 col

11 columns

2 cols

10 columns

3 columns

9 columns

4 columns

8 columns

5 columns

7 columns

6 columns

<div class="zo-g">
    <div class="zo-g__col zo-g__col--m1">
        ...
    </div>
    <div class="zo-g__col zo-g__col--m11">
        ...
    </div>
</div>

Large

1 col

11 columns

<div class="zo-g">
    <div class="zo-g__col zo-g__col--l1">
        ...
    </div>
    <div class="zo-g__col zo-g__col--l11">
        ...
    </div>
</div>

Adding margins to the content

Usually, we want the content area to have appropriate horizontal margins instead of touching the edge. If so, nest a div with the classname zo-g__content inside the column.

6 columns, now inside .zo-g__content.

6 columns

<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>

Keeping the content aligned to the container

In a nested multicolumn layout, it is sometimes desired that contents in columns, though having margins, are aligned to the left and right edges of the container. Appending the classname zo-g--fill to zo-g will work.

6 columns inside .zo-g__content

<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">...</div>
        </div>
    </div>
    <div class="zo-g__col zo-g__col--s6">
        <div class="zo-g__content">
            <div class="doc-displayBorder">...</div>
        </div>
    </div>
</div>

Offset

s6, offset 3

<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>

Push & pull

Resize the browser window to see more.

8 columns. This div occurs in the DOM prior to the 4-column-wide one.

4 columns

<div class="zo-g">
    <div class="zo-g__col zo-g__col--m8 zo-g__col--mPushPull zo-g__col--mPush4 zo-g__col--lReset">
        ...
    </div>
    <div class="zo-g__col zo-g__col--m4 zo-g__col--mPushPull zo-g__col--mPull8 zo-g__col--lReset">
        ...
    </div>
</div>