Palette — Layout

Our grid is a system of arranging content containers visually on the page. It consists of 12 columns that can be combined to organize your layout. With this system we can achieve quite complex layouts, but for the sake of simplicity and to avoid confusion this styleguide will only document the most common usage.

Basic usage:
Wrap your grid elements in a container with the class .row, and then give each grid element within a corresponding width class between .col-1 and .col-12. Say you want two equally sized elements, you’ll make a .row container and two .col-6 elements inside.

You’ll likely want your grid elements to adjust to the size of the browser. The easiest and most common way to achieve this is to let the grid elements stack vertically on smaller sizes. You can easily do this by replacing .col-1 to .col-12 with .col-md-1 to .col-md-12. This will make all grid elements fill the entire width on all browser widths below 720 pixels.

If for some reason you need to push the grid element from the edge, you’ll use the classes .offset[-md]-1 to .offset[-md]-12, same principle as the .col-[...] classes. See example for demonstration.

Consult a front-end person if you need more advanced layouts.

Margin is the spacing outside of an element, and padding is the spacing inside of an element. Think of a bordered box. If you need distance between the box and other boxes, you'll use margin. If you need distance between the border and what's inside the box, you'll use padding.

To use our margin and padding classes, you need to follow a formula to pick the appropriate class name. First you decide if you need a margin (m) or a padding (p), then we choose which sides you want to apply the spacing on, all sides (no extra variable), top (t), left (l), right (r), bottom (b), top and bottom (y) or left and right (x). The third variable you have to decide is how much spacing you need from 0 (no space) to 5 (a lot of space). Typically you'll want to use 2 for appropriate margin between elements and for padding inside of content boxes, but this is up to you. Try and see what works best.

So to get the spacing class you want, you'll follow this recipe: .{m/p}{sides(optional)}-{size}. If you need a "normal" sized bottom margin, you'll use the class .mb-2, and if you need just a little bit of padding on all sides, you'll use the class .p-1.

Use .d-block, .d-inline, or .d-inline-block to simply set an element’s display property to block, inline, or inline-block (respectively).

Responsive visibility

For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device’s presentation.