Stylus Grid Mixins

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