More Than Just Mobile
How and why we created our own responsive grid system.
Here at Skillshare, providing access to education is a core part of our mission. One of our main initiatives in the last year has been to shift from building a web application to building a platform that provides access to our content through any device.
Why Responsive?
A key component in this initiative has been to provide a solid mobile web experience. We determined the best way to achieve this would be to design a responsive grid system that we could then implement across the dozens of pages on our site. This system would allow us to adjust our site content to any device size, while keeping our code maintainable and our team agile.
Designing the Grid
We took to the drawing board to determine a grid system that would work best for our content, and would be easy for both designers and engineers to apply. We landed on a twelve column grid that has four main breakpoints including a desktop version, tablet landscape version, tablet portrait version and mobile version.
Our grid system consists of a few different pieces:
- columns: These represent where page elements can live. An element can span any number of columns up to twelve.
- gutters: These are the white space that fall in between each column.
- outer gutters: These are the white space that live outside of the main grid.
There are clearly defined rules at each breakpoint for these pieces. These rules tell us whether the columns should have a fixed number width or a fluid percentage-based width, as well as what the width for the gutters and outer gutters should be.
The images below demonstrate the grid system in use on our homepage in both desktop and tablet versions. The clear space shows the columns in our system and the green space shows the gutters.
Implementing the Grid
We wanted to create an interface that made it easy for our engineers to implement this grid system. We took a look at other frameworks that included responsive systems like Skeleton and Twitter Bootstrap in order to get an idea of common usage patterns.
Below is an example of what the markup might look like for a section that implements our grid system:
<div class="grid">
<div class="wrapper">
<!-- First Row -->
<div class="col-6"></div>
<div class="col-6"></div>
<!-- Second Row -->
<div class="col-3"></div>
<div class="col-4"></div>
<div class="col-5"></div>
</div>
</div>And here is a visual example for that markup:
This implementation includes three key HTML classes including .grid, .wrapper and .col-x. A .grid is a section on the page that follows the responsive grid system. A .col-x is an element that will span x number of columns in the grid. A .wrapper wraps a section of columns, we’ll see what purpose it serves below.
Now let’s take a look at the CSS that makes the responsive magic happen. We’ve created a few Sass mixins to help us.
First, what are some of the styles that are shared amongst all .col-xs?
@mixin gridColumn($gutterWidth) {
box-sizing: border-box;
padding-right: $gutterWidth;
margin-bottom: $gutterWidth;
display: inline-block;
vertical-align: top;
}- Each column is an inline-block element so 1) they will be aligned next to each other and 2) allow them to remain aligned vertically even with content of different heights.
- The padding-right on the column creates the gutter that follows it.
- We handle the extra padding that will follow the last column in a row by adding a negative margin-right to our .wrapper elements.
- The columns have a box-sizing of border-box in order to prevent the padding from adding to the width of the column. This is useful for when our column has a width that is a percentage.
Next, we need to generate the width values for each .col-x in both a fluid column grid and a fixed column grid. We do this by looping through values of x from 1 to 12 and perform different mathematical equations for each type of grid.
@mixin fluidGrid($numColumns, $gutterWidth) {
$x: $numColumns;
@while $x > 0 {
.col-#{x} {
width: (100%/$numColumns) * $x;
@include $gridColumn($gutterWidth);
}
$x: $x - 1;
}
}@mixin fixedGrid($numColumns, $gutterWidth) {
$x: $numColumns;
@while $x > 0 {
.col-#{x} {
width: ($columnWidth * $x) +
($gutterWidth * ($x - 1)) + $gutterWidth;
@include $gridColumn($gutterWidth);
}
$x: $x - 1;
}
}
- For a fluid grid, the width of each .col-x is percentage based, so we can determine that each column is 100% / 12 or 8.333%, and then multiply that percentage by x.
- For a fixed grid, the width of the .col-x is calculated by adding the width of all the columns that this element should span, the width of all the gutters that fall between those columns, and lastly the width of the gutter that follows the element since we are using border-box: box-sizing on our columns.
Once we have our grid and column implementations complete, we just need to define the different grid types and gutter widths for each of our breakpoints using media queries.
// Mobile, Screen size < 541px
// Fluid grid with 12 columns, 20px gutters, 20px outer gutters
.grid {
padding: 0 20px;
@include fluidGrid(12, 20px);
}// Tablet Portrait, Screen size between 541px and 809px
// Fluid grid with 12 columns, 20px gutters, 40px outer gutters
@media screen and (min-width: 541px) {
.grid {
padding: 0 40px;
@include fluidGrid(12, 20px);
}
}// Tablet Landscape, Screen size between 810px and 989px
// Fluid grid with 12 columns, 30px gutters, 60px outer gutters
@media screen and (min-width: 810px) {
.grid {
padding: 0 60px;
@include fluidGrid(12, 30px);
}
}// Desktop, Screen size >= 990px
// Fixed grid with 12 columns, 50px fixed columns, 30px gutters
@media screen and (min-width: 990px) {
.grid {
width: 930px;
margin: 0 auto;
padding: 0 30px;
@include fluidGrid(12, 50px, 30px);
}
}
Rolling It Out
Once this grid system was designed and implemented, we needed a solid roll out plan in order to see it in action across the site. To start, we updated the markup on highly trafficked pages and those pages that were often linked to in emails or easily accessible through the mobile web.
The engineering team also put together a “Skillshare” for both designers and engineers to make sure everyone on the team understood how the system worked, why we made certain decisions, and best practices for using it.
The Benefits
Outside of creating a mobile web experience for our users, we’ve seen several other benefits from creating this responsive system. Going forward, we’re now able to make any new pages responsive with ease. We now have a clear set of standards for both our designs and our code. These standards have enforced consistency across our web application, and in turn allowed us to develop modular and reusable code.
p.s. Want to work with us? Our Engineering team is hiring.
