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

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.

.g-m--12 or .g-m--4 - Use the m- for medium size breakpoints, which is <1200px by default.
.g-s--12 or .g-s--4 - Use the s- for small size breakpoints, which is <900px by default.
.g-t--12 or .g-t--4 - Use the t- for tiny size breakpoints, which is <520px by default.

				
<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.

.m-m--12 or .m-m--4 - Use the m- for medium size breakpoints, which is <1200px by default.
.m-s--12 or .m-s--4 - Use the s- for small size breakpoints, which is <900px by default.
.m-t--12 or .m-t--4 - Use the t- for tiny size breakpoints, which is <520px by default.
All margins can be zero, ie .m-s--0.

				
<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.

.container--baseline - This class aligns elements so that the text baselines align
.container--center - This class aligns elements centrally
.container--start - This class aligns elements at the top of the container
.container--end - This class aligns elements at the bottom of the container
.container--justify - This class aligns elements horizontally central

				
<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.

.container--wrap
.container--wrap--m
.container--wrap--t
.container--wrap--s

				
<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.

.no-nudge--m
.no-nudge--s
.no-nudge--t

				
<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>