Table of contents for SASS Gridification
- SASS Gridification - Part 1
- SASS Gridification - Part 2: Blueprint
- SASS Blueprint Grid on Github
A common problem faced by many CSS developers is the grid layout. In this example I will be using SASS arithmetic to create grid calculations.
If you just want to see the end result, here are two beautiful 8-column grids generated entirely using SASS arithmetic:
Fixed: 8 columns 100px wide with 10px margins
Fluid: 8 columns 12% wide with 0.5% margins
Also, if you haven’t the foggiest notion what SASS is (”… now there’s a frood who really knows where his towel is.”) you should probably read up on Hampton Catlin’s site about HAML and SASS.
To start things off, I looked around the net for what was already available on the subject. I already knew about Blueprint, though I had never really worked with it, and I learned about the YUI CSS grids toolkit.
Both of these CSS frameworks are very powerful. Personally, I don’t need that much power for this proof of concept, and it probably would have taken more time to adapt one of the frameworks into SASS than it would to program something from the ground up. So instead I just whipped out my text editor and started hacking.
First, the markup. I decided this would be an 8 column grid, so I started out with 2 columns at 4 grid columns wide.
#grid
.block.col-4
%p
%span 4 col
Lorem ipsum
.block.col-4.last
%p
%span 4 col
Lorem ipsum
%div.clear
.block.col-2
%p
%span 2 col
Lorem ipsum
.block.col-2
%p
%span 2 col
Lorem ipsum
.block.col-2
%p
%span 2 col
Lorem ipsum
.block.col-2.last
%p
%span 2 col
Lorem ipsum
%div.clear
At first I just wanted to get the measurements right, so I slapped together some static SASS with measurements like so:
#grid
:width 870px
:margin 0 auto.block
:float left
:border
:top 3px solid black
:margin
:right 10px
:bottom = 10px
p
:text-align justify
:margin 5px 0
span
:display block
:float left
:font-weight bold
:font-size 200%
:text-transform uppercase
:padding
:right 10px// Columns
.col-1
:width = 100px
.col-2
:width = 210px
.col-3
:width = 320px
.col-4
:width = 430px
.col-5
:width = 540px
.col-6
:width = 650px
.col-7
:width = 760px
.col-8
:width = 870px
:margin
:right 0// Last column must not have a right margin
.last
:margin
:right 0// Clear floats
div.clear
:clear both
:height 0
:line-height 0
:font-size 1px
So now I have the basics of a static grid. Now let’s add some SASS magic. First, the arithmetic to generate a grid:
// SASS attack!
!columns = 8
!grid_width = 100px
!grid_margin = 10px
!grid_size = !grid_width * !columns + (!grid_margin * (!columns - 1))
Now that we have our grid generator, let’s use these constants to assign rules to the grid.
// Grid container
#grid
:width = !grid_size// Columns
.col-1
:width = !grid_width
.col-2
:width = !grid_width * 2 + !grid_margin
.col-3
:width = !grid_width * 3 + (!grid_margin * 2)
.col-4
:width = !grid_width * 4 + (!grid_margin * 3)
.col-5
:width = !grid_width * 5 + (!grid_margin * 4)
.col-6
:width = !grid_width * 6 + (!grid_margin * 5)
.col-7
:width = !grid_width * 7 + (!grid_margin * 6)
.col-8
:width = !grid_width * 8 + (!grid_margin * 7)
And viola! We have a functioning grid. You can now easily change the entire grid by changing the parameters of the !grid_width and !grid_margin constants. Here are two examples:
Fixed: 8 columns 100px wide with 10px margins
Fluid: 8 columns 12% wide with 0.5% margins
You can easily use this model to generate grids of any number of columns with any width and margin, using any measurement type you prefer (px, em, or percentages). Hope you find this useful, there is plenty of room for improvement. If you improve upon it, let me know.
BlogMarks
Furl
Newsvine
Rojo
Email This to a Friend
If you like this then please subscribe to the 
Would have made WSJ easier…
Comment by Michael Edlund — April 27, 2008 @ 7:28 pm
Aye. But actually, the WSJ was semantically tabular data. Still, you’re right… this would’ve made easy work of lining it all up. Though some unobtrusive JavaScript would’ve still been needed to make the heights line up. With how much data needed to be shuffled in, the last thing I wanted was another CBT nightmare.
If you type anything wrong in one of 60 places on CBT, this is what you get…
FireBug: You broke something on the page, but I’m not gunna tell you what it is! Oh yeah, you refreshed the page… now I’m going to tell you that you broke something that you didn’t break. Another refresh? Now you broke this other meaningless thing!
Total frickin party. Just ask Joey, but make sure he has a beer in his hand before you ask.
Comment by Lorin Tackett — April 27, 2008 @ 9:52 pm