Skip to content

Instantly share code, notes, and snippets.

@maxpoletaev
Created April 25, 2014 10:23
Show Gist options
  • Save maxpoletaev/11284725 to your computer and use it in GitHub Desktop.
Save maxpoletaev/11284725 to your computer and use it in GitHub Desktop.
Grid generator for stylus
$grid ?= {
gutter: 0
columns: 16
padding: 20px
}
.grid
float: left
box-sizing: border-box
border-left: $grid.gutter solid transparent
padding-left: ($grid.padding / 2)
padding-right: ($grid.padding / 2)
margin-left: -($grid.gutter)
&_split
padding-right: 0
padding-left: 0
&_right
float: right
&_center
float: none
margin-left: auto
margin-right: auto
for $column in 1..$grid.columns
.grid_{$column}
width: unit(($column / $grid.columns) * 100, '%')
.grid_prefix_{$column}
margin-left: unit(($column / $grid.columns) * 100, '%')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment