Docs - sigrid

Introduction

Sigrid consists of two base classes .row and .col. Both of these has a bunch of modifiers prefixed with double dashes which should be used on top of the base class.


<div class="row row--*">
  <div class="col col--*">...</div>
</div>

Columns

12 column sizes

Sigrid has 12 column sizes that can be combined in anyway possible. The width is accessed by simply using .col--*.


<div class="row">
  <div class="col col--1">...</div>
  <div class="col col--2">...</div>
  <div class="col col--3">...</div>
  ...
</div>

Offsets

As with the different sizes there are an equal amount off offsets that you can use.


<div class="row">
  <div class="col col--6 col--offset-6">...</div>
  <div class="col col--7 col--offset-5">...</div>
  <div class="col col--8 col--offset-4">...</div>
</div>

Ordering

Sometimes you may want to re-order columns differently than what their source order says. This is simple with the class .col--order-*. This becomes especially powerful when combining with responsive breakpoints (See below).


<div class="row">
  <div class="col col--4 col--order-3">1</div>
  <div class="col col--4 col--order-2">2</div>
  <div class="col col--4 col--order-1">3</div>
</div>

1

2

3 Responsive breakpoints

A grid system wouldn't be very helpful without the support of adapting the layout to different screen sizes. Sigrid comes with three breakpoints that can be used to only apply the modifier if the screen size matches. To use responsive breakpoints prefix the modifier with one of the following:

.col--sm-* for screen sizes > 768px.
.col--md-* for screen sizes > 992px.
.col--lg-* for screen sizes > 1200px.

You can prefix any of the modifiers above, .col--sm-*, .col--sm-offset-* and .col--sm-order-*. If no prefix is set it will be applied to all screen sizes unless overriden by a prefixed modifier.


<div class="row">
  <div class="col col--12 col--sm-5 col--md-4 col--lg-3">...</div>
  <div class="col col--12 col--sm-7 col--md-8 col--lg-9">...</div>
</div>

Rows

Sigrid is built on flexbox (surprise ey?) which allows you to do some pretty neat alignment of the columns within the row. Add a modifier to the row like this:

<div class="row row--*">...;</div>

Autofill width

Sometimes you don't want to do the math and just add columns and let the code figure out what the width should be. Just add .row--autofill to evenly distribute the width among the columns.


<div class="row row--autofill">
  <div class="col">...</div>
  <div class="col">...</div>
</div>

Equal height

Sigrid makes handling one of the ick-iest problems of web design easy — equal height columns. Drop in the class .row--full-height and it's done. Often though you also want the child of the column to be full height. This is supported but requires some additional markup.


<div class="row row--full-height">
  <div class="col col--4">
    <div class="col__inner">...</div>
  </div>
  <div class="col col--4">
    <div class="col__inner">...</div>
  </div>
  <div class="col col--4">
    <div class="col__inner">...</div>
  </div>
</div>

Center vertically

To center the columns vertically based on the tallest use .row--middle to align the columns.


<div class="row row--middle">
  <div class="col col--4">...</div>
  <div class="col col--4">...</div>
  <div class="col col--4">...</div>
</div>

Align bottom

Align to the bottom of the row with .row--bottom.


<div class="row row--bottom">
  <div class="col col--4">...</div>
  <div class="col col--4">...</div>
  <div class="col col--4">...</div>
</div>

Center horizontally

To center on the horizontal axis use .row--center. This can be neat if you have a size that doesn't allow centering by using offsets.


<div class="row row--center">
  <div class="col col--4">...</div>
</div>

Align right

To align right drop in the class .row--right.


<div class="row row--right">
  <div class="col col--4">...</div>
</div>

Space around

A nice flexbox tool to even out the leftover space evenly around the columns. The class to use is .row--around.


<div class="row row--around">
  <div class="col col--3">...</div>
  <div class="col col--3">...</div>
  <div class="col col--3">...</div>
</div>

Space between

Almost the same as space around but instead pushes columns to the edges maximizing space in between them. .row--between.


<div class="row row--between">
  <div class="col col--3">...</div>
  <div class="col col--3">...</div>
  <div class="col col--3">...</div>
</div>

Column specific alignment

Sometimes you just want to align that single column and not care about the rest. This is something that sigrid support. Use these directly on the chosen column.

<div class="col col--*">...</div>

Full height

To just give one column full height (like in the equal heights example) use .col--full-height.

Note: Also requires the content of the column to be placed within a .col__inner if the child also should be full height.


<div class="row">
  <div class="col col--4">...</div>
  <div class="col col--4 col--full-height">
    <div class="col__inner">...</div>
  </div>
  <div class="col col--4">...</div>
</div>

Center

To only center one column vertically use .col--center.


<div class="row">
  <div class="col col--4">...</div>
  <div class="col col--4 col--center">...</div>
  <div class="col col--4">...</div>
</div>

Bottom

And lastly, aligning to the bottom with .col--bottom.


<div class="row">
  <div class="col col--4">...</div>
  <div class="col col--4 col--bottom">...</div>
  <div class="col col--4">...</div>
</div>