Layout

Three layout systems: columns, grid, and flex. All layout systems currently use CSS flexbox under the hood. Templates may apply additional styles to change the order of boxes etc., but beware that using CSS Grid for the grid layout system may be investigated, and subsequently changed, in the future.

Resources

• CSS-Tricks’ A Complete Guide to Flexbox
• CSS-Tricks’ A Complete Guide to Grid

Container

[fig 1]

<div class="container"></div>

Margins

margins or no-margins affects the left and right visual margins of the container. Margins are 4 units wide. Defaults to margins. Both classes may be needed when building complex layouts. Vertical margins are called spacing.

<div class="container no-margins"></div>

Max width

max-width-* where * can be any of the available resolution segments.

<div class="container max-width-hd"></div>

max-width-*-relative sets the max width relative to unit. The absolute resolution is the same as above when unit is eight pixels.

<div class="container max-width-xs-relative"></div>

?Height?

?not implemented?

container-100vh

container-100vh--center

container-100vh__footer

Columns

Boxes and columns are incompatible layout systems. [Explain the use of the flex class, that it opens up the possibility of future layout systems, for example a grid based one, still using the container class.]

The columns may have additional classes from two to eleven to manipulate the widths. Default is 1.

This example has a six column layout, where the middle column span four columns.

[fig 3.]

<div class="container columns">
  <div class="column"></div>
  <div class="column four"></div>
  <div class="column"></div>
</div>

Gaps

gaps or no-gaps may be applied to the container. Defaults to gaps, but both classes may be needed when building complex layouts.

Break points

Columns can be stacked on top of each other at certain break points.

break-* where * can be any of the available resolution segments.

<div class="container columns break-medium">
  <div class="column"></div>
  <div class="column four"></div>
  <div class="column"></div>
</div>

?Offset?

Grid

Boxes and columns are incompatible layout systems.

Adding flex gives the container additional super powers.

<div class="container grid">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

[fig 2]

This produces three equally spaced boxes. The container may contain any number of boxes.

Responsiveness

When any columns-*-n class is applied, the mobile first principle is applied. The default number of columns is set to one. columns-xs-2 will set the numder of columns to two for body widths above xs, and so on.

[fig 5]

<div class="container grid columns-xs-2 columns-medium-3 columns-xl-4">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

?Magic columns?

Shorthands for common responsive column layouts.

<div class="container magic-4">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

Gaps

gaps or no-gaps may be applied to the container. Defaults to gaps, but both classes may be needed when building complex layouts.

Inset

inset or no-inset may be applied to the container. Defaults to no-inset, but both classes may be needed when building complex layouts.

Borders

inner-borders may be applied to the container. This will also apply no-gaps and inset by default.

Flex

<div class="container flex">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Vertical align

align-top, align-bottom, and align-center.

Grow

grow fills up available horizontal space.

Direction

ltr, and rtl.

?Responsiveness?

Order

order-*-n can be applied to .column, .cell, and .box.

Complex layouts

?Nesting?

Containers can be nested inside boxes.

<div class="container flex">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column flex">
    <div class="column"></div>
    <div class="column"></div>
  </div>
</div>

Combine break points and nesting to create complex responsive layouts.

[fig 4] [demo]

Utilities

Sticky

Global modifier sticky sticks to the top by default. sticky bottom sticks it to the bottom. Keep in mind the quirkiness of position: sticky in combination with overflow and flex. None of the built in flex behaviour conflicts with sticky.

Demo

Hide

Global modifiers hide-below-* and hide-above-*

Resolutions

Segment	Width	Height	Name	Ratio
nano	320px	240px		4:3
3xs	480px	320px		4:3
2xs	640px	480px		4:3
xs	800px	600px	SVGA	4:3
small	1024px	768px	XGA	4:3
medium	1280px	800px		16:10
large	1440px	900px		16:10
xl	1680px	1050px	WSXGA+	16:10
2xl or fhd	1920px	1080px	FHD	16:9
3xl	2560px	1440px		16:9
hd	1280px	720px	HD
uhd	3840px	2160px	UHD
2k	2048px	1080px	2K
4k	4096px	2160px	4K
5k	5120px	2880px	5K

Note that these values are in absolute pixels, and not units.

Spacing

Spacing applies to the vertical margins. They affect the margin-top and margin-bottom properties respectivly. These are global modifiers, and may be applied to any block element.

--spacing-before-* --spacing-after-*

--no-spacing --no-spacing-before --no-spacing-after

Internally one spacer is 4 * unit. The size of a spacer is a multiple of the internal spacer.

Class Segment	Size	Comment
1u	0.25	One unit
2u	0.5
3u	0.75
1	1
6u	1.5
2	2
3	3
4	4
8	8