The grid includes two components
- A row
- Columns
Resize your browser window to observe the column behavior
News
Breaking news
Top Story
Here are today's top stories
The grid includes two components
Resize your browser window to observe the column behavior
Breaking news
Here are today's top stories
<section class="row">
<aside class="col-third">
<p>Sidebar</p>
</aside>
<main class="col-twothirds">
<p>Main Pane</p>
</main>
</section>
<section class="application">
<aside class="sidebar">
<p>Sidebar</p>
</aside>
<main class="mainpane">
<p>Main Pane</p>
</main>
</section>
.application {
@include row();
}
.sidebar {
@include column('third');
}
.mainpane {
@include column('twothirds');
}
The wrapper is optional. This creates a fixed width wrapper for the grid elements. The fixed width automatically resizes based on screen width.
For more about wrappers, see the example on fixed, fluid, and fixed fluid layouts in Layout and CSS
The row is a container for column elements.
The column is a measured container that occupies up to 12 column widths.
<div class="wrapper">
...
</div>
<div class="wrapper">
...
</div>
.wrapper {
@include wrapper();
}
Columns can be expressed by a number or one of three English words
These are passed into the column()
mixin.
These are not just for convenience, they automatically set breakpoints to change column widths on various screen sizes.
@include column('third');
@include column('twothirds');
@include column('half');
.col-third
.col-twothirds
.col-half
Passing in numbers, choose a column width from 1-12:
.newsfeed {
@include column(2);
}
.article {
@include column(10);
}
<div class="newsfeed col-2">
...
</div>
<div class="article col-10">
...
</div>
Offsets allow you to add column-measured space to the side of a column.
...
<div class="col-left-6 col-6">
Six columns
</div>
...
<div class="reminder">
Six columns
</div>
.reminder {
@include column(6, 6);
}
Offsets can also use semantic shortcuts.
In the above example, the column and the left will revert to 1/2 width on tablet. On mobile, the left offset will disappear and the column will be full-width.
<div class="col-third col-left-twothirds">
...
</div>
<div class="blurb">
...
</div>
.blurb {
@include column('third', $left: 'twothirds');
}
When nesting, be sure to include a new row in the parent column.
<div class="row">
<div class="sidebar">
half
<div class="options">
<div class="terms">
half
</div>
<div class="definitions">
half
</div>
</div>
</div>
<div class="main">
<div class="menu">
<div class="new">third</div>
<div class="updated">third</div>
<div class="archived">third</div>
</div>
</div>
</div>
.row, .menu, .options {
@import row();
}
.sidebar, .main, .terms, .definitions {
@import column(6);
}
.new, .updated, .archived {
@import column(4);
}
<div class="row">
<div class="col-6">
half
<div class="row">
<div class="col-6">
half
</div>
<div class="col-6">
half
</div>
</div>
</div>
<div class="col-6">
<div class="row">
<div class="col-4">third</div>
<div class="col-4">third</div>
<div class="col-4">third</div>
</div>
</div>
</div>
Remember that using shortcut classes will automatically make your grid responsive. See "shortcuts" above.
Setting column rules via classes requires just a bit more syntax.
It is best practice to set the styles you expect on your smallest device first. This is what is known as designing "Mobile First"
For this, we'll use a regular grid class.
<div class="row">
<section class="col-third">
<p>Sidebar</p>
</section>
<section class="col-twothirds">
<p>Main pane</p>
</section>
</div>
<div class="row">
<section class="col-12">
<h1>About me</h1>
<p>...</p>
</section>
<section class="col-12">
<h1>My work</h1>
<p>...</p>
</section>
<section class="col-12">
<h1>Get in touch</h1>
<p>...</p>
</section>
</div>
In this example, we want these three sections to stack on top of one another. However, on tablet, it would be nice to have the first two in two columns. We can use the following syntax to create a mobile rule:
size
is the viewport size and columns
is a number 1-12.
Here are the sizes available with their corresponding widths:
Size name | Actual width |
---|---|
xs | 360px |
sm | 480px |
rg | 768px |
md | 1024px |
lg | 1200px |
xl | 1400px |
.col-[size]-[columns]
Now let's add a rule.
As you can see, we did not need to add a class to the last section
because
we want that to stay full width, at least for this breakpoint.
<div class="row">
<section class="col-12 col-md-6">
<h1>About me</h1>
<p>...</p>
</section>
<section class="col-12 col-md-6">
<h1>My work</h1>
<p>...</p>
</section>
<section class="col-12">
<h1>Get in touch</h1>
<p>...</p>
</section>
</div>
On desktop, we have enough room to split these up a little more. Let's make each one of them a third of the total width.
<div class="row">
<section class="col-12 col-md-6 col-lg-4">
<h1>About me</h1>
<p>...</p>
</section>
<section class="col-12 col-md-6 col-lg-4">
<h1>My work</h1>
<p>...</p>
</section>
<section class="col-12 col-lg-4">
<h1>Get in touch</h1>
<p>...</p>
</section>
</div>
For mobile lefts, we use the form:
.col-left-[size]-[columns]
If we wanted our "Get in touch" section above to half-sized and left by half on a medium-sized display, we could add this:
The left will automatically remove itself if a col-lg
column definition
is declared.
<section class="col-12 col-md-6 col-left-md-6 col-lg-4">
<h1>Get in touch</h1>
<p>...</p>
</section>
Mix your grid rules into media queries to make your own responsive rules.
It helps to use the breakpoints provided. Each returns a fixed width based on a common device.
Variable | Actual width |
---|---|
$phone | 360px |
$phablet | 480px |
$tablet | 768px |
$tablet-landscape | 1024px |
$large-monitor | 1200px |
$xl-monitor | 1400px |
$xxl-monitor | 1600px |
When using media queries, it's best practice to write your styles for the smallest device first, and write the exceptions as you go up. This is commonly referred to as Mobile First design.
To make writing mobile-first media queries easy, we've included the gt
(greater than) mixin.
.something {
width: 100%;
gt($phone) {
width: 50%;
}
}
// Is the same as
.something {
width: 100%;
@media screen and (min-width: 360px) {
width: 50%;
}
}
Here's how we might make some different column rules using these breakpoints:
<div class="about-me">
...
</div>
<div class="my-work">
...
</div>
<div class="getting-in-touch">
...
</div>
We want each of the above sections to occupy a third of the page on desktop.
Oh wait, we're designing this mobile first. Let's start with the phone. Three columns would be a little crowded, so let's just stack one on top of the other.
.about-me, .my-work, .getting-in-touch {
@include column(12);
}
This looks good, but on a tablet in landscape position, the reading stride is a little wide. Let's split up the first two columns and leave the last one full.
.about-me, .my-work, .getting-in-touch {
@include column(12);
}
@media screen and (min-width: $tablet-landscape) {
.about-me, .my-work {
@include column(6);
}
}
Notice, we don't have to write anything for .getting-in-touch
because
we inherit its full-width from the phone's rule.
Now we're on desktop and we're ready to go into three column mode.
That should be all we need for a responsive grid.
.about-me, .my-work, .getting-in-touch {
@include column(12);
}
@media screen and (min-width: $tablet-landscape) {
.about-me, .my-work {
@include column(6);
}
}
@media screen and (min-width: $desktop) {
.about-me, .my-work, .getting-in-touch {
@include column(4);
}
}