« Lypp: Wins Red Herring Canada... « » Haml 2.0 Released: Friendly Fred »

CSS: 960 Grid System

Michael Deering August 28th, 2008
4 Comments

We have all been there… Your cruising along nicely on your “Big Idea” when it starts getting near the time where you are ready to pretty up things a little in order to “beta release it”. So you crack open the site in the top browsers and… #$%@! you get to spend the next few days pulling out your hair over CSS layout issues yet again.

My last CSS post on Erik Meyer’s CSS Reset solved some initial browser compatibility issues that I always run into but does not help at all with those nasty layout differences that quickly drop your project momentum to zero (I’m speaking from a single programmer perspective, those of you lucky enough to be backed by a full-time web-designer on your personal projects… good for you!).

Enter the world of CSS Frameworks. I checked out a few before I settled on the 960 Grid System to start my newest project out with.

I have actually split out the 12 column and the 16 column layouts into separate files to save on file size and make it easier to include one and/or the other using asset_packager. To save those HAML / SASS fans out there a little time here are the SASS versions of the framework I came up with.


/ nine_sixty_12_column.sass
.container_12
  :margin-left  auto
  :margin-right auto
  :width        960px

.grid_1, .grid_2, .grid_3,
.grid_4, .grid_5, .grid_6,
.grid_7, .grid_8, .grid_9,
.grid_10, .grid_11, .grid_12
  :display      inline
  :float        left
  :margin-left  10px
  :margin-right 10px

.alpha
  :margin-left 0

.omega
  :margin-right 0

.container_12
  .grid_1
    :width 60px
  .grid_2
    :width 140px
  .grid_3
    :width 220px
  .grid_4
    :width 300px
  .grid_5
    :width 380px
  .grid_6
    :width 140px
  .grid_7
    :width 540px
  .grid_8
    :width 620px
  .grid_9
    :width 700px
  .grid_10
    :width 780px
  .grid_11
    :width 860px
  .grid_12
    :width 940px
  .prefix_1
    :padding-left 80px
  .prefix_2
    :padding-left 160px
  .prefix_3
    :padding-left 240px
  .prefix_4
    :padding-left 320px
  .prefix_5
    :padding-left 400px
  .prefix_6
    :padding-left 480px
  .prefix_7
    :padding-left 560px
  .prefix_8
    :padding-left 640px
  .prefix_9
    :padding-left 720px
  .prefix_10
    :padding-left 800px
  .prefix_11
    :padding-left 880px
  .suffix_1
    :padding-right 80px
  .suffix_2
    :padding-right 160px
  .suffix_3
    :padding-right 240px
  .suffix_4
    :padding-right 320px
  .suffix_5
    :padding-right 400px
  .suffix_6
    :padding-right 480px
  .suffix_7
    :padding-right 560px
  .suffix_8
    :padding-right 640px
  .suffix_9
    :padding-right 720px
  .suffix_10
    :padding-right 800px
  .suffix_11
    :padding-right 880px

html body * span.clear, html body * div.clear,
html body * li.clear, html body * dd.clear
  :background none
  :border 0
  :clear both
  :display block
  :float none
  :font-size 0
  :list-style none
  :margin 0
  :padding 0
  :overflow hidden
  :visibility hidden
  :width 0
  :height 0

.clearfix:after
  :clear both
  :content '.'
  :display block
  :visibility hidden
  :height 0

.clearfix
  :display inline-block

* html .clearfix
  :height 1%

.clearfix
  :display block





/ nine_sixty_16_col.sass
.container_16
  :margin-left  auto
  :margin-right auto
  :width        960px

.grid_1, .grid_2, .grid_3,
.grid_4, .grid_5, .grid_6,
.grid_7, .grid_8, .grid_9,
.grid_10, .grid_11, .grid_12,
.grid_13, .grid_14, .grid_15,
.grid_16
  :display      inline
  :float        left
  :margin-left  10px
  :margin-right 10px

.alpha
  :margin-left 0

.omega
  :margin-right 0

.container_16
  .grid_1
    :width 40px
  .grid_2
    :width 100px
  .grid_3
    :width 160px
  .grid_4
    :width 220px
  .grid_5
    :width 280px
  .grid_6
    :width 340px
  .grid_7
    :width 400px
  .grid_8
    :width 460px
  .grid_9
    :width 520px
  .grid_10
    :width 580px
  .grid_11
    :width 640px
  .grid_12
    :width 700px
  .grid_13
    :width 760px
  .grid_14
    :width 820px
  .grid_15
    :width 880px
  .grid_16
    :width 940px
  .prefix_1
    :padding-left 60px
  .prefix_2
    :padding-left 120px
  .prefix_3
    :padding-left 180px
  .prefix_4
    :padding-left 240px
  .prefix_5
    :padding-left 300px
  .prefix_6
    :padding-left 360px
  .prefix_7
    :padding-left 420px
  .prefix_8
    :padding-left 480px
  .prefix_9
    :padding-left 540px
  .prefix_10
    :padding-left 600px
  .prefix_11
    :padding-left 660px
  .prefix_12
    :padding-left 720px
  .prefix_13
    :padding-left 780px
  .prefix_14
    :padding-left 840px    
  .prefix_15
    :padding-left 900px
  .suffix_1
    :padding-right 60px
  .suffix_2
    :padding-right 120px
  .suffix_3
    :padding-right 180px
  .suffix_4
    :padding-right 240px
  .suffix_5
    :padding-right 300px
  .suffix_6
    :padding-right 360px
  .suffix_7
    :padding-right 420px
  .suffix_8
    :padding-right 480px
  .suffix_9
    :padding-right 540px
  .suffix_10
    :padding-right 600px
  .suffix_11
    :padding-right 660px
  .suffix_12
    :padding-right 720px
  .suffix_13
    :padding-right 780px
  .suffix_14
    :padding-right 840px
  .suffix_15
    :padding-right 900px

html body * span.clear, html body * div.clear,
html body * li.clear, html body * dd.clear
  :background none
  :border 0
  :clear both
  :display block
  :float none
  :font-size 0
  :list-style none
  :margin 0
  :padding 0
  :overflow hidden
  :visibility hidden
  :width 0
  :height 0

.clearfix:after
  :clear both
  :content '.'
  :display block
  :visibility hidden
  :height 0

.clearfix
  :display inline-block

* html .clearfix
  :height 1%

.clearfix
  :display block

These style sheets need to be combined with the CSS Reset Technique that I posted about before. You can get the SASS version of the CSS reset over on this post CSS Reset: Gold For Code Monkeys.

I’m still investigating other CSS frameworks at this time. Anyone else have a favorite CSS framework they would like to share? Or know of a similar framework that handles SEO a little better?

Tags

4 comments so far

Avatar by Priit Tamboom 15 hours later

Take a look sass mixins with variables (will be in next sass version) and you might like it a lot as I do.

I played it with it and created small sass base: http://gitorious.org/projects/sass-base

And more advance stuff: http://github.com/chriseppstein/compass where you can easily combine the best of any supported CSS framework.

Hope it helps!

Avatar by mdeering 23 hours later

@Priit

Awesome set of links! The grid layout CSS files just scream out “Arithmetic” but I’m still investigating a way to do something like below. Perhaps one of your links will hold the answer as I dig a little more.

 
!main_width = 960
!unit = px
!columns = 16
!column_width = !main_width / !columns
!grid_padding = 40

.column_container
- !columns.times do |column_number|
  !column_name = (column_number + 1)
  !grid_name = "grid_#{column_name}" 
  !prefix_name = "prefix_#{column_name}" 
  !suffix_name = "suffix_#{column_name}" 
  .!grid_name
    :width = (!padding * 2 + !column_number * column_width) + !unit
  .!prefix_name
    :padding-left (!column_name * !column_width) + !unit
  .!suffix_name
    :padding-right (!column_name * !column_width) + !unit
- end

The syntax and logic is not perfect but you should get the idea…

Avatar by Chris Eppstein 1 month later

Hi Michael,

Please take a look at how I do this for blueprint:

http://github.com/chriseppstein/compass/tree/master/frameworks/blueprint/stylesheets/blueprint/modules/_grid.sass

I’d love to get started adding 960 to compass but I don’t use it so I really need someone who does to drive the implementation and testing. Please contact me directly if you need any help designing your sass mixins or stylesheets.

Avatar by Michael Deering 1 month later

@Chris

Compass is near the top of my TODO list for sharpening my Design/CSS workflow.

If it strikes a cord with me I will definitely fork and contribute.

Post A Comment


Or I will pick one for you!

For that cool little Gravitar icon!

You shameless self promoter!


Format with Textile if you wish.