Advanced Search

Return to Snippet

Revision: 6401
at May 20, 2008 06:49 by shockeye42
Initial Code 
!columns = 8
!column_width = 100px
!column_margin = 10px
!grid_size = !column_width * !columns + (!column_margin * (!columns - 1))

// Grid container
#grid
  :width = !grid_size

// Columns
.col-1
  :width = !column_width
.col-2
  :width = !column_width * 2 + !column_margin
.col-3
  :width = !column_width * 3 + (!column_margin * 2)
.col-4
  :width = !column_width * 4 + (!column_margin * 3)
.col-5
  :width = !column_width * 5 + (!column_margin * 4)
.col-6
  :width = !column_width * 6 + (!column_margin * 5)
.col-7
  :width = !column_width * 7 + (!column_margin * 6)
.col-8
  :width = !column_width * 8 + (!column_margin * 7)

.last
  :margin
    :right 0
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
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 column_width is a px value, the column_margin must be a px value. If it's width is a percentage, margin must be a percentage.

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
SASS grid generator

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
Other