Fluid CSS grids with Sass

Steve Hickey has written an excellent tutorial for creating flexible grids using Sass.

CSS Frameworks

Back when fixed-width layouts were de rigueur I used 960 Grid System and Blueprint. For responsive design I have used Gridless combined with the 1140px Grid (which I modified to work as a mobile-first grid) and this served me well until I started using Sass.

Recently, I have dabbled with Zurb Foundation, but Steve Hickey’s grid has some advantages:

• Less HTML and CSS
• No presentational class names like large-9, row, columns
• Easy to apply different breakpoints to different rows. This site has a different breakpoint for the header (banner and nav) and the main div (content and sidebar).
• Easy to re-use in different projects, by changing the setting variables

I have updated this site to use this grid system with the following settings:

$max-width:       1200px;
$column-width:    6.5%;
$gutter-width:    2%;
$maximum-columns: 12;

Steve Hickey’s example uses padding on the body element. I needed to use padding on the container element as I wanted a design that allows for borders that span the full width of the viewport.

Breakpoints

I chose breakpoints between single columns and rows by following Brad Frost’s advice.

Two columns appear for the banner and the nav in the header at 740px. This is set because below this the nav breaks into two lines.

Two columns appear in the main content area at 900px. This was set to give enough width for the Delicious link at the bottom of the sidebar and to avoid overly long line lengths in the content column.