The 12 Column Grid

You may be familiar with grid systems from popular front-end frameworks, such as Bootstrap or Foundation. Similar to these, the Sage layout grid is constructed of individual columns (.sage-col) grouped within rows (.sage-row).


Setting widths

Our default grid consists of 12 columns per row.

Each .sage-col's width is independently sized using classes in the form of .sage-col-<# of columns>, where <# of columns> is an integer ranging from the minimum number of columns (1) through the maximum number of columns (12).

For example, a three-column wide .sage-col-3 would be one-quarter (25%) the width of one .sage-row, since 3 columns divided by the 12 total columns in the row equals 25 percent.

As a result, four .sage-col-3 columns are needed to fill out one row.

Column combinations

In the example below, each .sage-col example is named with the number of columns it represents. Generally, a single column (.sage-col-1) is too small for content, so .sage-col-2 is the smallest width recommended for use.

2 columns wide
10 columns wide
3 columns wide
9 columns wide
4 columns wide
8 columns wide
5 columns wide
7 columns wide
6 columns wide
6 columns wide
7 columns wide
5 columns wide
8 columns wide
4 columns wide
9 columns wide
3 columns wide
10 columns wide
2 columns wide

Column spacing

Spacing between columns has been predefined at the Sage system level in the _variables.scss file. By default, this is set to sage-spacing(sm) (1rem).

Responsive grid layouts

Viewing the column combinations example above, you may have noticed that the columns display as full-width blocks when viewed at smaller screen sizes. To account for the increased or decreased space available, we can target specific screen sizes (called breakpoints) by modifying the classnames used in each column. This is referred to as responsive design, giving us greater flexibility in our layouts.

Mobile first

There are two primary methods to responsive design: desktop-first and mobile-first. While the full details of these approaches is beyond the scope of this documentation, you should be aware that Sage follows the mobile-first approach wherever possible. This means that base CSS is geared towards small screens/mobile devices, with additional styles added at increasing min-width (minimum width) breakpoints. This can help positively influence both real and perceived performance on mobile devices.

Preventing responsive layouts

At screen sizes below sm (< 545px), all responsive columns will display as full-width, regardless of the breakpoint keyword in use. This behavior cannot be overridden.

If your layout does not follow this pattern and must keep its column structure, you will need to use the classname without responsive keywords, as illustrated in the "setting widths" section.

Naming conventions

Classnames for responsive columns follow this pattern: .sage-col--<breakpoint>-<# of columns>

Here, <breakpoint> is the screen size at which the layout will change, and <# of columns> sets the width of the column, noted in the sections above.

The predefined breakpoints keywords are sm, md, and lg:

Minimum and maximum screen sizes refer to the range during which the keyword takes effect
Breakpoint keyword Minimum screen size (in pixels) Maximum screen size (in pixels)
sm 545px 767px
md 768px 991px
lg 992px

Example layouts

Small breakpoint

Col
Col
<div class="sage-row">
  <div class="sage-col--sm-6">Col</div>
  <div class="sage-col--sm-6">Col</div>
</div>

Medium breakpoint

Col
Col
Col
<div class="sage-row">
  <div class="sage-col--md-4">Col</div>
  <div class="sage-col--md-4">Col</div>
  <div class="sage-col--md-4">Col</div>
</div>

Large breakpoint

Col
Col
<div class="sage-row">
  <div class="sage-col--lg-4">Col</div>
  <div class="sage-col--lg-8">Col</div>
</div>

Multiple breakpoints

TODO - add code example for Multiple breakpoints.

Auto Width

TODO - add code example for Multiple breakpoints.

Hiding and showing content

In cases where content will be hidden or shown at specific screen sizes, classes using breakpoint keywords are available. These classes use sizing from sage-breakpoint() to affect where content is displayed.

Classnames for showing and hiding columns are composed in the following pattern: .sage-col--<breakpoint>-<show or hide>.

As with the naming conventions for responsive columns, <breakpoint> corresponds to the breakpoint keyword, and <show or hide> indicates whether the content should be displayed with this breakpoint.

IMPORTANT: the difference between show and hide is that show displays the content for that specified screen size only, but hide will continue to hide content for all screen sizes below the breakpoint specified. Refer to the chart below for more detail.

In this table, "visible" denotes that content will be shown at that breakpoint
Classname sm-min (545px) sm-max (767px) md-min (768px) md-max (991px) lg-min (992px) lg-max (1199px) xl-min (1200px) xl-max (1440px+)
.sage-col--sm-hide hidden hidden visible visible visible visible visible visible
.sage-col--sm-show visible visible hidden hidden hidden hidden hidden hidden
.sage-col--md-hide hidden hidden hidden hidden visible visible visible visible
.sage-col--md-show hidden hidden visible visible hidden hidden hidden hidden
.sage-col--lg-hide hidden hidden hidden hidden hidden hidden visible visible
.sage-col--lg-show hidden hidden hidden hidden visible visible hidden hidden

Alignment

Vertical alignment

The default vertical alignment for each .sage-row aligns its columns to the top of the .sage-row container. This can be changed by adding one of the following sage-row--valign classes:

Property Vertical alignment
Default (.sage-row) Top
.sage-row--valign-center Middle (center)
.sage-row--valign-bottom Bottom

Horizontal alignment

The horizontal alignment default for each .sage-row aligns columns to the start (left) of the .sage-row container. This alignment will only be visible if the number of columns of the total columns is fewer than the To alter this, add a modifying sage-row--align class:

Property Horizontal alignment
Default (.sage-row) Left
.sage-row--align-center Center
.sage-row--align-end Right
.sage-row--align-space-between Extra space is distributed between columns
.sage-row--align-space-around Extra space is distributed around columns