This styleguide displays our basic design elements, such as typography and colors. It also demonstrates a series of layout objects and how they can be used.
Please inspect the source code to for classes or markup for use.
Black & White
The wrapper object has a max-width, and is automatically centered with a margin left/right auto.
It has left/right padding to stop content from getting too close to the screen edges.
You can break out of a wrapper by using the o-wrapper__wide or o-wrapper__bleed class, which applies negative margins to the element, as seen below.
A stack is used to vertically space content. Rather than spacing individual elements, it spaces by context.
It does this using a top margin, applied to every element except the first, and it does it using a series of context-based rules, such as p + p or p + img.
This means we could add spacing rules that work for flow content.
In the example below, we use a stack to evenly space content, as well as show an example of how a form with labels could utilise nested stacks of different sizes.
Note that Orange is the parent stack margin and Pink is the child stack margin.
A cluster can group a series of elements together, such as buttons, while maintaining even spacing on all sides, even when wrapping.
Note that a cluster must have a child element (in this case a div) on which it can apply a negative margin. That element then contains all the cluster items.
- List Item 1
- List Item 2
- List Item 3
- List Item 4
- List Item 5