Permalink
Cannot retrieve contributors at this time
// 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') |