Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
70 lines (57 sloc) 1.59 KB
// import nib for cross browser features
@import 'nib'
// variables
var-columns = 12
var-gutter-width = 1rem
// some styles that apply to all columns - makes final css nicer
// http://learnboost.github.io/stylus/docs/extend.html -> Extending placeholder selectors
$common-column-styles
box-sizing(border-box)
padding-left var-gutter-width
padding-right var-gutter-width
// wrapper around our rows
.container
@extend $common-column-styles
// the row
.row
box-sizing(border-box)
display flex
flex-wrap wrap
margin-left - var-gutter-width
margin-right - var-gutter-width
// generates col-xs-1, col-xs-2, ..., col-xs-12
grid(klass)
for num in (1..var-columns)
.col-{klass}-{num}
@extend $common-column-styles
// !important is needed to override .row > div
flex-basis (100/var-columns)%*num !important
// generates col-xs-offset-1, col-xs-offset-2, ..., col-xs-offset-11
offset(klass)
for num in (1..var-columns - 1)
.col-{klass}-offset-{num}
margin-left (100/var-columns)%*num
// use flex for auto width columns
.col-auto
@extend $common-column-styles
// !important is needed to override .row > div
flex 1 1 0 !important
// set default style to full width
// so we don't have to use col-xs-12 every time we want a column to be full width on xs screen
.row > div
flex-basis 100%
// generate default / mobile first xs grid
grid('xs')
offset('xs')
// tablet styles
@media (min-width: 768px)
grid('sm')
offset('sm')
// desktop styles
@media (min-width: 992px)
grid('md')
offset('md')
// large styles
@media (min-width: 1200px)
grid('lg')
offset('lg')