Grids

Single Row use .row

Lorem ipsum dolor sit amet, agam delenit at nec. Alterum albucius sed in, no quem summo viderer duo. Te cum quod tibique voluptaria. Agam decore fastidii ei nam. Sit an novum alienum posidonium, eos paulo essent id.

Agam decore fastidii ei nam. Sit an novum alienum posidonium, eos paulo essent id. Te quod tibique.

Ea enim adipisci mel, agam decore fastidii ei nam. Sit an novum alienum posidonium, eos paulo essent id.



<div class='row pad'>
    <div class='w5'>
        <p>Lorem ipsum dolor...</p>
    </div>
    <div>
        <p>Lorem ipsum dolor...</p>
    </div>
    <div>
        <p>Lorem ipsum dolor...</p>
    </div>
</div>

Additional Parameters

Name Element Assignment Description
.pad Parent DIV Adds 20px of Padding
.pad-middle Parent DIV Adds 20px of Padding to all sides minus the edges.
.middle Parent DIV vertically centers rows
.stay Parent Div Prevents columns from stacking on small screens
.w1 Child Div Sets column to 10% width
.w2 Child Div Sets column to 20% width
.w3 Child Div Sets column to 30% width
.w4 Child Div Sets column to 40% width
.w5 Child Div Sets column to 50% width
.w6 Child Div Sets column to 60% width
.w7 Child Div Sets column to 70% width
.w8 Child Div Sets column to 80% width
.w9 Child Div Sets column to 90% width

Multiple Rows use .grid

1

21

12

Contacts
Customers
Fans


<div class='grid stay'>
    <div>
        <div><h1>1</h1></div>
        <div><h1>21</h1></div>
        <div><h1>12</h1></div>
    </div>
    <div>
        <div><h5>Contacts</h5></div>
        <div><h5>Customers</h5></div>
        <div><h5>Fans</h5></div>
    </div>
</div>