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.

• 960 Grid System
• Blueprint
• Yahoo! Grids CSS

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?

There you are doing the right thing semantically marking-up your new site with div tags, CSS classes and ids. Your presentation is nicely separated from your content. Your feeling pretty good about yourself and your new application. Then ‘it’ happens, you open your site in another browser and suddenly you find yourself a victim of the browsers wars and cross-browser compatibility.

The CSS Reset technique is something that I tried recently on a clean-slate project with great success. Below is SASS version of the CSS file from the above link.

// public/stylesheets/sass/application.sass
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td
  :margin 0
  :padding 0
  :border 0
  :outline 0
  :font-weight inherit
  :font-style inherit
  :font-size 100%
  :font-family inherit
  :vertical-align baseline
  
\:focus
  :outline 0
  
body
  :line-height 1
  :color black
  :background white
  
ol, ul
  :list-styles none
  
table
  :border-collapse separate
  :border-spacing 0

caption, th, td
  :text-align left
  :font-weight normal
  
blockquote:before, blockquote:after, q:before, q:after
  :content ""
  
blockquote, q
  quotes: "" ""

The basic idea behind the technique is to normalize all of the tags you are going to use. The technique does have its critics for being over semantic, but for a guy like me who would rather concentrate on APIs and core functionality then learning and hacking around with all of the browsers differences this reset technique is exactly what I was looking for.

I’m not looking for a pixel perfect layout/design, I’m looking to mark-up my layouts and views and move on.