advanced code snippet search

Posted By

shockeye42 on 05/20/08


Tagged

grid haml SASS


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

nerdfiles


SASS grid generator

 / Published in: Other
 

This is a basic form of a CSS grid generated via SASS constants and arithmetic. I have expanded on this and created a SASSed version of the Blueprint grid. You can easily expand this out to as many columns as you like. The Blueprint grid operates on a 24 column grid, and scales back from there.

A huge advantage here is that you can use either px, em or percentage and SASS does all the math for you, making completely fluid grids ridiculously easy to accomplish.

Something of note, you can't mix unit types. If the columnwidth is a px value, the columnmargin must be a px value. If it's width is a percentage, margin must be a percentage.

Expand | Embed | Plain Text 
  1. !columns = 8
  2. !column_width = 100px
  3. !column_margin = 10px
  4. !grid_size = !column_width * !columns + (!column_margin * (!columns - 1))
  5.  
  6. // Grid container
  7. #grid
  8.   :width = !grid_size
  9.  
  10. // Columns
  11. .col-1
  12.   :width = !column_width
  13. .col-2
  14.   :width = !column_width * 2 + !column_margin
  15. .col-3
  16.   :width = !column_width * 3 + (!column_margin * 2)
  17. .col-4
  18.   :width = !column_width * 4 + (!column_margin * 3)
  19. .col-5
  20.   :width = !column_width * 5 + (!column_margin * 4)
  21. .col-6
  22.   :width = !column_width * 6 + (!column_margin * 5)
  23. .col-7
  24.   :width = !column_width * 7 + (!column_margin * 6)
  25. .col-8
  26.   :width = !column_width * 8 + (!column_margin * 7)
  27.  
  28. .last
  29.   :margin
  30.     :right 0

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: deleteme on February 26, 2010

// Lines 11 through 26 can be dynamically generated with SASS with the following code:

@for !i from 1 through !columns .col-#{!i} :width = !columnwidth * !i + (!columnmargin * (!i - 1))

Posted By: deleteme on February 26, 2010

Let me try that again...

@for !i from 1 through !columns .col-#{!i}, .col-#{!column_width * !i + (!column_margin * (!i - 1))}px :width = !column_width * !i + (!column_margin * (!i - 1))

Posted By: deleteme on February 26, 2010

Bah: http://gist.github.com/315182

You need to login to post a comment.