Responsive grid for Stylus

grid.styl

columns ?= 12
gutter-width ?= 20px
breakpoints ?= 480px

column-width()
  return (100% / columns)

row()
  +cache('grid-row')
    clearfix()
    box-sizing: border-box
    margin-left: - gutter-width

column(x, xresp...)
  +cache('grid-column')
    box-sizing: border-box
    display: block
    float: left
    padding-left: gutter-width

  width: column-width() * x
  for x, i in xresp
    @media screen and (max-width: breakpoints[i])
      width: column-width() * x

offset(x, xresp...)
  +cache('grid-offset-' + join('-', arguments))
    margin-left: column-width() * x
    for x, i in xresp
      @media screen and (max-width: breakpoints[i])
        margin-left: column-width() * x