@assembler-grid

Fluid Grid

Responsive, percentage widths, mobile-first approach, and based on a 12-column layout, the fluid portion of the Assembler Grid should support all of your needs when laying out your pages. If you want a fixed width, then set a width on the either the parent element of the .grid class or you can override it in your stylesheet.

Responsive

<div class="grid" grid-spacing="gutters">
    <div column="12" small="2" medium="4" large="6" xlarge="8">...</div>
    <div column="12" small="8" medium="4" large="2" xlarge="1">...</div>
    <div column="12" small="2" medium="4" large="4" xlarge="3">...</div>
</div>
<div class="grid" grid-spacing="gutters">
    <div column="12" small="1" medium="2" large="3" xlarge="4">...</div>
    <div column="12" small="10" medium="8" large="6" xlarge="4">...</div>
    <div column="12" small="1" medium="2" large="3" xlarge="4">...</div>
</div>

Offsets

Pre/Post

<div class="grid" grid-spacing="gutters">

    <div column="1" prefix="11" suffix="1">...</div>

    <div column="1" prefix="10" suffix="2">...</div>

    <div column="1" prefix="9" suffix="3">...</div>

    <div column="1" prefix="8" suffix="4">...</div>

    <div column="1" prefix="7" suffix="5">...</div>

    <div column="1" prefix="6" suffix="6">...</div>

    <div column="1" prefix="5" suffix="7">...</div>

    <div column="1" prefix="4" suffix="8">...</div>

    <div column="1" prefix="3" suffix="9">...</div>

    <div column="1" prefix="2" suffix="10">...</div>

    <div column="1" prefix="1" suffix="11">...</div>

    <div column="1" prefix="0" suffix="12">...</div>

</div>

Push/Pull

<div class="grid" grid-spacing="gutters">
     <div column="1" push="11">1</div>
     <div column="1">2</div>
     <div column="1">3</div>
     <div column="1" push="4">4</div>
     <div column="1">5</div>
     <div column="1">6</div>
     <div column="1">7</div>
     <div column="1" pull="4">8</div>
     <div column="1">9</div>
     <div column="1">10</div>
     <div column="1">11</div>
     <div column="1" pull="11">12</div>
</div>

Spacing

None (default)

<div class="grid" grid-spacing="none">
    <div column="12">12</div>
    <div column="6">6</div>
    <div column="6">6</div>
    <div column="4">4</div>
    <div column="4">4</div>
    <div column="4">4</div>
    <div column="3">3</div>
    <div column="3">3</div>
    <div column="3">3</div>
    <div column="3">3</div>
    <div column="2">2</div>
    <div column="2">2</div>
    <div column="2">2</div>
    <div column="2">2</div>
    <div column="2">2</div>
    <div column="2">2</div>
    <div column="1">1</div>
    <div column="1">1</div>
    <div column="1">1</div>
    <div column="1">1</div>
    <div column="1">1</div>
    <div column="1">1</div>
    <div column="1">1</div>
    <div column="1">1</div>
    <div column="1">1</div>
    <div column="1">1</div>
    <div column="1">1</div>
    <div column="1">1</div>
</div>

Gutters

<div class="grid" grid-spacing="gutters">
    <div column="12">12</div>
    <div column="6">6</div>
    <div column="6">6</div>
    <div column="4">4</div>
    <div column="4">4</div>
    <div column="4">4</div>
    <div column="3">3</div>
    <div column="3">3</div>
    <div column="3">3</div>
    <div column="3">3</div>
    <div column="2">2</div>
    <div column="2">2</div>
    <div column="2">2</div>
    <div column="2">2</div>
    <div column="2">2</div>
    <div column="2">2</div>
    <div column="1">1</div>
    <div column="1">1</div>
    <div column="1">1</div>
    <div column="1">1</div>
    <div column="1">1</div>
    <div column="1">1</div>
    <div column="1">1</div>
    <div column="1">1</div>
    <div column="1">1</div>
    <div column="1">1</div>
    <div column="1">1</div>
    <div column="1">1</div>
</div>

Nested

<div class="grid" grid-spacing="gutters">
    <div column="7">
        <div class="grid" grid-spacing="gutters">
            <div column="9">
                <div class="grid" grid-spacing="gutters">
                    <div column="4">...</div>
                    <div column="8">...</div>
                </div>
            </div>
            <div column="3">
                <div class="grid" grid-spacing="gutters">
                    <div column="12">...</div>
                </div>
            </div>
        </div>
    </div>
    <div column="5">
        <div class="grid" grid-spacing="gutters">
            <div column="12">
                <div class="grid" grid-spacing="gutters">
                    <div column="6">...</div>
                    <div column="6">...</div>
                </div>
            </div>
        </div>
    </div>
</div>

Two-Column Equal-Height Background Layout

The Left Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consectetur venenatis ante, vel venenatis magna placerat et. Praesent molestie velit vitae ante ultrices tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec arcu enim, scelerisque eget turpis nec, ultrices faucibus purus. In convallis lectus vel scelerisque cursus. Duis et vestibulum augue. Duis tempor libero nulla, et egestas ligula efficitur sed. Fusce ultrices arcu augue, et scelerisque turpis placerat consectetur. Nunc hendrerit quam neque, eu rutrum leo dapibus ut. Nullam blandit, elit non mollis dignissim, ipsum risus pharetra ligula, vel dictum neque tortor et felis. Curabitur a tortor quam. Donec at nibh nisl. Ut nunc nisl, bibendum a semper id, suscipit vitae augue. Sed venenatis dui nulla, sed vulputate mauris gravida nec. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris sed quam eget lectus dapibus euiLorem ipsum dolor sit amet, consectetur adip*isicing elit, sed do eiusmod *tempor incididunt ut labore et dolore magna aliqua.

Assembler Grid

A grid component built for the Assembler framework.