Creating a Responsive Grid System With Susy And Breakpoint

The big appeal behind CSS frameworks (like Bootstrap and Foundation) is that they come with a responsive grid system all set and ready to go. The downside is that you have to be content with their column count, the width of their gutters, and all their classes in your markup. What if your project requirements go beyond the defaults of a prefab CSS grid framework? This article will show how you can build and maintain your own unique responsive grids with two Sass libraries: Susy and Breakpoint.

Susy Basics

For a more detailed introduction to using Susy to manage your grids, check out this SitePoint article or this slidedeck. We'll just hit the high points here so that you have some context for what follows.

All your grid config settings live in a map called $susy . You can use the key-value pairs in this map to set your max-width (container), column count (columns), and gutter width (gutters).

With Susy, you specify a container element for your grid elements by using the container() mixin. The selector that includes that mixin will then be assigned the max-width from the container value in $susy, centered with left and right margins set to auto, and given a clearfix.

Each column inside that container is controlled with the span() mixin. This mixin typically takes three arguments: span (number of parent columns it will fill), layout (number of parent columns if different from default), and location (first/alpha, last/omega, or a column number).

Continue reading %Creating a Responsive Grid System With Susy And Breakpoint%

by James Steinbach via SitePoint