Style Guide
Grid

Start by adding an element with a class of .row. This will create a horizontal block to contain vertical columns. Then add elements with a .column class within that row. You can use .column or .columns - the only difference is grammar. Specify the widths of each column with the .small-#, .medium-#, and .large-# classes. Keep in mind that these snippets should always be added first to a page before writing any content, unless a background snippet is used.


6 x 6
Add content here
Add content here
<div class="row">
   <div class="column medium-6"></div>
   <div class="column medium-6"></div>
</div>
3 x 3 x 3 x 3
Add content here
Add content here
Add content here
Add content here
<div class="row">
   <div class="column medium-3"></div>
   <div class="column medium-3"></div>
   <div class="column medium-3"></div>
   <div class="column medium-3"></div>
</div>
4 x 4 x 4
Add content here
Add content here
Add content here
<div class="row">
   <div class="column medium-4"></div>
   <div class="column medium-4"></div>
   <div class="column medium-4"></div>
</div>
4 x 8
Add content here
Add content here
<div class="row">
   <div class="column medium-4"></div>
   <div class="column medium-8"></div>
</div>
5 x 7
Add content here
Add content here
<div class="row">
   <div class="column medium-5"></div>
   <div class="column medium-7"></div>
</div>
8 x 4
Add content here
Add content here
<div class="row">
   <div class="column medium-8"></div>
   <div class="column medium-4"></div>
</div>
12
Add content here
<div class="row">
   <div class="column medium-12"></div>
</div>
8 centered
Add content here
<div class="row">
   <div class="column medium-8 medium-centered"></div>
</div>
6 centered
Add content here
<div class="row">
   <div class="column medium-6 medium-centered"></div>
</div>