Cool-Y.github.io/themes/landscape/source/css/_util/grid.styl
2019-04-02 16:28:32 +08:00

38 lines
1.2 KiB
Stylus

/////////////////
// Semantic.gs // for Stylus: http://learnboost.github.com/stylus/
/////////////////
// Utility function you should never need to modify this
// _gridsystem-width = (column-width + gutter-width) * columns
gridsystem-width(_columns = columns)
(column-width + gutter-width) * _columns
// Set @total-width to 100% for a fluid layout
// total-width = gridsystem-width(columns)
total-width = 100%
//////////
// GRID //
//////////
body
clearfix()
width: 100%
row(_columns = columns)
clearfix()
display: block
width: total-width * ((gutter-width + gridsystem-width(_columns)) / gridsystem-width(_columns))
margin: 0 total-width * (((gutter-width * .5) / gridsystem-width(_columns)) * -1)
column(x, _columns = columns)
display: inline
float: left
width: total-width * ((((gutter-width + column-width) * x) - gutter-width) / gridsystem-width(_columns))
margin: 0 total-width * ((gutter-width * .5) / gridsystem-width(_columns))
push(offset = 1)
margin-left: total-width * (((gutter-width + column-width) * offset) / gridsystem-width(columns))
pull(offset = 1)
margin-right: total-width * (((gutter-width + column-width) * offset) / gridsystem-width(columns))