code

Introduction

Take a look at this section to quickly understand how the grid works!

12 Columns

Our standard grid has 12 columns. No matter the size of the browser, each of these columns will always have an equal width.

1
2
3
4
5
6
7
8
9
10
11
12

To get a feel of how the grid is used in HTML, take a look at the code below which will produce a similar result to the one above.


                <div class="row">
                  <div class="col xs1">1</div>
                  <div class="col xs1">2</div>
                  <div class="col xs1">3</div>
                  <div class="col xs1">4</div>
                  <div class="col xs1">5</div>
                  <div class="col xs1">6</div>
                  <div class="col xs1">7</div>
                  <div class="col xs1">8</div>
                  <div class="col xs1">9</div>
                  <div class="col xs1">10</div>
                  <div class="col xs1">11</div>
                  <div class="col xs1">12</div>
                </div>

Note: For now, just know that the s1 stands for small-1 which in plain English means "1 column on small screens".


Columns live inside Rows

Remember when you are creating your layout that all columns must be contained inside a row and that you must add the col class to your inner divs to make them into columns

This div is 12-columns wide on all screen sizes
6-columns (one-half)
6-columns (one-half) 

                <div class="row">
                  <div class="col xs12">This div is 12-columns wide</div>
                  <div class="col xs6">This div is 6-columns wide</div>
                  <div class="col xs6">This div is 6-columns wide</div>
                </div>

Offsets

To offset, simply add offset-s2 to the class where s signifies the screen class-prefix (s = small, m = medium, l = large) and the number after is the number of columns you want to offset by.

This div is 12-columns wide on all screen sizes
6-columns (offset-by-6)

                <div class="row">
                  <div class="col xs12"><span class="flow-text">This div is 12-columns wide on all screen sizes</span></div>
                  <div class="col s6 offset-s6"><span class="flow-text">6-columns (offset-by-6)</span></div>
                </div>

Push and Pull

You can easily change the order of your columns with push and pull. Simply add push-s2 or pull-s2 to the class where s signifies the screen class-prefix (s = small, m = medium, l = large) and the number after is the number of columns you want to push or pull by.

This div is 7-columns wide on pushed to the right by 5-columns.
5-columns wide pulled to the left by 7-columns.

                <div class="row">
                  <div class="col s7 push-s5"><span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.</span></div>
                  <div class="col s5 pull-s7"><span class="flow-text">5-columns wide pulled to the left by 7-columns.</span></div>
                </div>

Gutter Width

You can easily change the width of your gutters, and also specify different widths for different size viewports. Simply add .gutter-s to a .row where the s signifies the desired gutter width (0 = none, s = small, m = medium, l = large, xl = extra large).

.gutter-0
 
 
 
.gutter-s
 
 
 
.gutter-m
 
 
 
.gutter-l
 
 
 
.gutter-xl
 
 
 

Responsive Gutter Width

You can also specify different gutter widths for different size viewports. Simply specify the default gutter width (this will display at the smallest screen sizes) with .gutter-0 and then override it for larger screen sizes with .mgutter-m. The first m signifies the screen class-prefix (m = medium, l = large, xl = large) and the second m is the width of the gutter between columns.

.gutter-0 .mgutter-m .lgutter-l .xlgutter-xl
 
 
 

Creating Responsive Layouts

Above we showed you how to layout elements using our grid system. Now we'll show you how to design your layouts so that they look great on all screen sizes.

Screen Sizes

Mobile Devices
<= 600px		 Tablet Devices
<= 992px		 Desktop Devices
993-1600px 		Extra Large Devices
> 1600px
Class Prefix .s .m .l .xl
Container Width 85% 85% 70% 75%
Number of Columns 12 12 12 12

Adding Responsiveness

In the previous examples, we only defined the size for small screens using "col xs12". This is fine if we want a fixed layout since the rules propagate upwards. By just saying s12, we are essentially saying "col xs12 m12 l12". But by explicitly defining the size we can make our website more responsive.

I am always full-width (col xs12)
I am full-width on mobile (col xs12 m6) 

                  <div class="row">
                    <div class="grid-example col xs12"><span class="flow-text">I am always full-width (col xs12)</span></div>
                    <div class="grid-example col xs12 m6"><span class="flow-text">I am full-width on mobile (col xs12 m6)</span></div>
                  </div>

More Responsive Grid Examples

s12
s12 m4 l2 xl2
s12 m4 l8 xl2
s12 m4 l2 xl2
s12 m6 l3 xl2
s12 m6 l3 xl2
s12 m6 l3 xl2
s12 m6 l3 xl2 

                    <div class="row">
                      <div class="col xs12"><p>s12</p></div>
                      <div class="col xs12 m4 l2 xl2"><p>s12 m4</p></div>
                      <div class="col xs12 m4 l8 xl2"><p>s12 m4</p></div>
                      <div class="col xs12 m4 l2 xl2"><p>s12 m4</p></div>
                    </div>
                    <div class="row">
                      <div class="col xs12 m6 l3 xl2"><p>s12 m6 l3 xl2</p></div>
                      <div class="col xs12 m6 l3 xl2"><p>s12 m6 l3 xl2</p></div>
                      <div class="col xs12 m6 l3 xl2"><p>s12 m6 l3 xl2</p></div>
                      <div class="col xs12 m6 l3 xl2"><p>s12 m6 l3 xl2</p></div>
                    </div>