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?