Skip to content

Instantly share code, notes, and snippets.

@wesruv wesruv/grid-mixins
Created Jun 23, 2014

Embed
What would you like to do?
Stylus Grid Mixins
///
// Makes a column for the grid, assumes fluid colum unless told otherwise
// @param columnSpan integer Number of grid columns this layout column should span
// @param maxWidth unit Maximum with of the entire grid with units, e.g. 960px or 100% or 60em
// @param defaultPadding boolean Whether or not default padding should be included
// @param numberOfColumns integer Can specify the maximum number of columns in the grid, by default it is 12
///
make-column(columnSpan = null, maxWidth = 100%, defaultPadding = true, numberOfColumns = 12)
if defaultPadding
padding-left: 15px
padding-right: 15px
if columnSpan != null
width: (floor(columnSpan * 100000 / numberOfColumns) / 100000 * maxWidth)
box-sizing: border-box
min-height: 1px
float: left
///
// Makes a container for columns in the grid, used to clearfix and to make child
// columns line up with parents because of first and last child's padding.
// Only need a 'column-container' per nested columns, not per 'row'.
// e.g .column-container>.column-span-4*9999 is fine,
// but .column-container>.column-span-4>.column-span-6*2 will need column container styles on their parent
// A single container can be a column and a column container. e.g .column-container.column-span4
///
make-column-container()
*zoom: 1
margin: 0 -15px
overflow: hidden
&:before,
&:after
display: table
content: ""
line-height: 0
&:after
clear: both
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.