Chapter 5 Responsive and flexible grids with Sass and Compass
In this chapter of 'Sass and Compass for Designers' you will learn how to create custom responsive grids with Sass, Compass and the incredible Compass responsive grid plugin, Susy.
Making responsive and flexible grids with Sass and Compass is easy. If you are currently adding HTML classes into markup to use a grid system, kiss those dark ages goodbye!
We will look at the superb Susy grid system and learn how to create a 'mobile first' responsive design with ease (also take a look at the bonus online section for creating an 'off canvas' layout) that scales from small to large screen effortlessly. You'll learn how to spot and correct sub-pixel rounding issues as Susy can help negate those too.
Set up a grid - use em, % or px:
@import “susy”;
$total-columns : 12; // a 12-column grid
$column-width : 5em; // each column is 5em wide
$gutter-width : 1em; // 1em gutters between columns
$grid-padding : $gutter-width;
$border-box-sizing: true;
Abstract your grid sizes
.main-section {
@include span-columns(9 omega,12);
}Susy even lets you nest grids within other grids (don't worry - it all gets explained in full):
Grids within grids
@include with-grid-settings(4,12em,1.5em,0) {
.purchase-links-wrapper {
@include container;
}
.purchase-link {
@include span-columns(1);
@include nth-omega(4n);
}
};
When working with responsive web design, there will be times when you want to make elements appear differently in different situations. Sass makes this process trivial. Chapter 6 covers this in detail.
You can buy 'Sass and Compass for Designers' at any of these fine outlets: