In a previous post on using Sass with the 1KB CSS Grid, I reviewed in depth the concept of using Sass and Compass to remove unnecessary classes from your HTML markup, and recommended usimg mixins instead. After using this grid on my own projects for the past year I've finally created a Ruby Gem called compass-grid-plugin and I've updated the GitHub repository to include a fluid grid option as well. For now I'm calling it “Grid” because that's what I've been calling it. The fluid grid will be documented below.
Although this grid plugin is inspired by the 1KB CSS Grid, it's not simply the Sass version of that grid. So I've opted to rename the grid to simply “Grid” and gobbled up the “compass-grid-plugin” gem name because some Austrian guy already has “compass-grid” (it's helpful that all of the other Compass grids use “-plugin” in the gem name also). That's the unimaginative name I'm going with until someone asks me to use a name less confusingly generic. I could maybe be convinced to call it “Pancakes” or “Simple.”
What does Grid do?
The point of Grid is to make grid math easier and make working with grids much more flexible. Old-school CSS-only grids require classes to be added to the markup and do not make working with the grid very easy. What happens when you need padding or a border on your column? What happens when the designer needs to cheat the grid in a few places? Compass Grid makes all of these situations much easier to handle because the measurements are not baked into the CSS and don't require hard-coded classes in the markup.
How is Grid different than other Compass grids?
There's a few other notable Compass grids. Of course Compass has always shipped with Blueprint pre-installed. There's also a port of 960.gs as well as a relatively new entrant, Susy. Someone has also ported Columnal to Compass. The original author of the 1KB CSS Grid has created The Semantic Grid System to take advantage of Sass/Less and remove the need for classes in the markup. All of these Compass-powered grids are great and you should use them! But they all are a little more complicated than “just a grid” (with the exception of The Semantic Grid System). At a glance, I think the main differences between most other grids and Grid are as follows:
- Grid does not require Alpha and Omega. This is actually a big win for simplicity. Grid uses negative margins on the rows to accomplish the same thing.
- Grid is designed specifically for cheating the grid using the
- Grid is designed specifically to support row nesting.
- Grid only does grid measurements and has no other capabilities.
Install the Ruby Gem.
Existing Compass Projects
You can include it in any existing Compass project by adding it to your config.rb file.
New Compass Projects
You can install the grid plugin as part of a new Compass project.
Introducing Fluid Grid
- Documentation is available in the readme on Github
While the original grid was pointedly not fluid, this new version does support fluid percentage-based grids. The original 1KB CSS Grid series by Tyler Tate pointed out that nesting fluid grids can be difficult. Very similar to Susy and Columnal, the fluid grid requires context in order to nest columns. This is because of the relative nature of percentages: 25% is a totally meaningless number by itself.
Just like the previous article, we'll use a relatively simple 3-column layout for our page. The HTML below is a basic web page with a
footer, and main area. For this example only the main area will contain columns. The
.main-column will have two columns nested inside of it.
Using a Fixed Grid
Before diving into the fluid grid, it's important to see how it works with the static grid because the two are highly related. Below is the SCSS for a normal fixed grid similar to the example from the previous post]. Borders have been added to some of the elements to demonstrate how to use the grid correction features using the
$plus argument available in all of the functions.
- As you can see,
@include grid-column(6, -2px);subtracts 2px from the calculated column width to account for the borders on the column. A six-columns-wide column is normally 460px but using the
$plusargument of -2px, it becomes 458px.
- Although all
sectionelements in the
.main-columnare set to be rows, the
section.herodoesn't have any sub-columns in this example so the normal negative margins are removed.
Using a Fluid Grid
The fluid grid is set up similarly to the fixed grid, except the word “grid” is replaced by the word “fluid” in all of the mixins and functions. The fluid grid relies on the fixed grid for most of the width calculations and it also uses the same configuration options. The nested columns,
#content, require additional parameters to provide context because they are nested in the
- Measurements that affect horizontal spacing, like
padding-left/right, should be provided in percentages as well to make sure everything scales well with the browser.
fluid-guttersmixin returns left and right margins for a column.
fluid-widthfunction, combined with the
grid-column-widthfunction can be used to calculate margins as well.
margin: 0 fluid-width($grid-gutter-width/2, grid-column-width(9, $grid-gutter-width));
- Fluid gutters are different for rows and columns. Columns are relative to the parent row (a row is wider by the width of the gutter). Rows are relative to the parent column which is narrower than a row by the width of the gutter.
- When calculating percentages on a child of a row, like
.row > *, it's important to remember that a row's width is the width of its containing column plus the
- A nine-columns-wide column:
- A nine-columns-wide row:
- A nine-columns-wide column:
- There's no need to account for border or padding because all rows and columns have
box-sizing: border-boxapplied. You can read more about box-sizing on MDN.
- Chrome/Safari/Opera, Firefox/IE8/IE9 and IE6/IE7 all disagree on how to handle fractional pixels.
- Firefox and IE8/9 re-balance the columns so that some columns may be 1px too wide but the total of the columns is exact.
- Chrome/Safari/Opera simply round down, resulting in all columns being 1px too narrow. This gets really messy when working with deeply nested columns.
- IE6/7 rounds up, making all of the columns too wide and causing one to wrap.
- For now the fluid grid is designed for IE8 and above. Adding fixes for IE6 and IE7 may come later although there'll never be a way to bring in box-sizing support.
For those that are curious, the CSS from the examples above looks like this.
Fixed Grid Generated CSS
Fluid Grid Generated CSS