Skip to content

Instantly share code, notes, and snippets.

@ashebanow
Created August 19, 2009 00:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save ashebanow/170069 to your computer and use it in GitHub Desktop.
Save ashebanow/170069 to your computer and use it in GitHub Desktop.
adaptation of The 1KB CSS Grid to sass (http://www.1kbgrid.com/). I love Sass
/* adaptation of The 1KB CSS Grid to sass (http://www.1kbgrid.com/). I love Sass.
// To use:
@import 1kbgrid.sass
+1kbgrid(12, 60px, 10px)
=1kbgrid(!num_columns = 12, !column_width = 60px, !gutter = 10px)
// calculated values
!gutter_margin = !gutter / 2
!total_column_width = !column_width + !gutter
!row_width = !total_column_width * !num_columns
@for !i from 1 through !num_columns
.grid_#{!i}
width = (!total_column_width * !i) - !gutter
.column
margin = 0 !gutter_margin
overflow: hidden
float: left
display: inline
.row
width = !row_width
margin: 0 auto
overflow: hidden
.row
margin = 0 -!gutter_margin
width: auto
display: inline-block
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment