Simple CSS Grid in Stylus

grid.css

full_width = 80
columns = 12
gutter = 1

.container
  width unit(full_width, '%')
  margin auto
  overflow hidden

div[class^="grid_"]
  display inline
  float left
  margin-left unit(gutter, '%')
  margin-right unit(gutter, '%')

for col in 1..columns
  .grid_{col}
    width unit((col / columns - gutter / 100 * 2) * 100, '%')

@media screen and (max-width: 480px)
  div[class^="grid_"]
    float none
    display block
    width 100%
    margin 0

Which produces: https://skitch.com/jeff_way/gtwhj/stylus

Here's a demo: http://jsbin.com/ijesuy

This is pretty slick. What are you using SCSS? or a different one? Very simple to read. and understand. I personally love these small grids over the gigantic "do everything" grid systems.

I'm using a preprocessor, called Stylus. http://learnboost.github.com/stylus/

is Stylus only for node.js or can it be used like less?

@adesigni Try to use Google.