Spacing

Content Spacing

Size breakpoints for content layouts are as follows:

For classes meant to apply only starting at a given breakpoint, use -[SIZE] as part of the class name, as seen in the grid classes further down this page

Main content widths are defined in the codepen below:

See the Pen Content width breakpoints by Tyson Foster (@Foster-Design-System) on CodePen.

Use "box-sizing: border-box" for consistent spacing of content

Paddings and margins should be multiples of 4px where possible

Column Layout Classes

Content should be spaced using a 12-column "grid" layout using flexbox and the flex-basis property, with content spanning multiple columns based on width of the content and the window

When needed, change the flex-basis property in media queries to change the number of columns at different breakpoints

The various section sizes (in number of columns) and the flex-basis used for that size:

When combining sections of different widths, ensure that the number of columns in a row adds up to 12 for consistent spacing.

For rows containing images, it may be necessary to prevent the row from wrapping (flex-wrap:nowrap) to ensure consistent behaviour across browsers, due to differences in image size calculations

listed below are example column layouts. Each section is labelled with the number of columns it occupies out of the 12

12
11
1
10
2
9
3
8
4
7
5
6
6
5
5
2
4
4
4
3
3
3
3
2
2
2
2
2
2
1
1
1
1
1
1
1
1
1
1
1
1

To utilize columns, copy the CSS in the codepen below into your stylesheet, then create divs with the "row" class, and add a "col" class to each item placed into the div corresponding to the number of rows it will occupy. (ensure each row uses a total of 12 columns for consistent spacing).

Empty divs with column classes can also be used to create separation between elements on the page

See the Pen Grid Layout Classes by Tyson Foster (@Foster-Design-System) on CodePen.

To have content occupy a different number of columns at different screen widths, use the "col-[SIZE]-[NUMBER]" classes in addition to the "col-[NUMBER]" classes (which determine the number of columns starting at the minimum width)

12 / 6 / 3
12 / 6 / 3
12 / 6 / 3
12 / 6 / 3

Content Width / Padding

Text content should have a max width of between 70ch and 80ch to avoid an excessive amount of text per line

Buttons: 0px, 4px, 8px, or 12px vertical padding, 8px horizontal padding.

Images: 12px margin between regular images and surrounding text. Cards and Carousels should follow their respective examples for image spacing