Grid

The grid system is the basis of Surface layouts.

I'm a g--5 and g-s--12
I'm a g--1 and g-m--12
I'm a g--2 with a m--3, and a g-m--8 with a m-m--2
I'm a g--3 with a m--1
We're in a container
We're in a container

Code

Grid

The grid system by default is 12 columns wide. This can be changed in the _variables file by altering the $grid-columns variable.

To give an element a grid size, use the class .g-- suffixed by the size of the grid. For example, .g--5 g-s--12 will be 5/12ths wide.

To make your grid elements responsive, include the breakpoint classes listed below. The breakpoint sizes can be changed in the _variables file.

				
<div class="g--5 g-s--12">
  I'm a g--5 g-s--12
</div>
<div class="g--1 g-m--4 g-t--12">
  I'm a g--1 at regular size, g--4 at medium and g--12 at tiny size.
</div>
				
			

Margins

The margins work exactly the same as the grid system. Each m--1 is equal size to a g--1

To give an element a margin, use the class .m-- suffixed by the size of the margin. For example, .m--3 will push your element along a quart of the grid (assuming you have a 12 column grid).

To make your margins responsive, include the breakpoint classes listed below. The breakpoint sizes can be changed in the _variables file.

				
<div class="m--3">
  I have a 3 grid wide margin
</div>
<div class="m--1 m-s--5">
  I have a 1 grid wide margin at regular size and a m--5 at small size.
</div>
				
			

Containers

Containers are a way of display elements that are usually block level inline. A container has the display flex declaration. Such as displaying divs next to each other. It also gets rid of those pesky gaps between inline-blocks.

To add a container class simply use the .container class. The following suffixes will control where the elements align vertically.

				
<div class="container g--6">
  <div class="g--5 g-s--12 tile">
    We're in a container
  </div>
  <div class="g--5 g-s--12 tile">
    We're in a container
  </div>
</div>
				
			

You can also apply flex-wrap: wrap to your containers at different breakpoints with the following classes.

				
<div class="container container--wrap--t g--6">
  <div class="g--5 g-s--12 tile">
    This container wraps at the tiny breakpoint
  </div>
</div>
				
			

Nudges

Sometimes 1 margin space is too big. That's what nudges are for. Use the .nudge--left and .nudge--right classes. These classes have a margin on their respective side that gets smaller as the screen width gets smaller. Particularly useful for buttons and smaller elements.

You can remove the nudges at small screen sizes using the following classes.

				
<button class="btn--flat">Flat</button>
<button class="btn--float nudge--left nudge--right">+</button>
<button class="btn--raised">Raised</button>

<div class="card nudge--left nudge--right no-nudge--s">
I have a nudge left and right, but no nudge when smaller than the small breakpoint size.
  <p>Words...</p>
</div>