Skip to content

Instantly share code, notes, and snippets.

@nijikokun
Created August 2, 2013 23:59
Show Gist options
  • Save nijikokun/6144380 to your computer and use it in GitHub Desktop.
Save nijikokun/6144380 to your computer and use it in GitHub Desktop.
Semantic.gs with omega support except not on row... can't figure it out.
/////////////////
// Semantic.gs // for Stylus: http://learnboost.github.com/stylus/
/////////////////
// Defaults which you can freely override
column-width = 60px
gutter-width = 20px
columns = 12
// Utility function
gridsystem-width(_columns = columns)
_columns * (column-width + gutter-width)
// Set @total-width to 100% for a fluid layout
//total-width = 100%
_total-width(_columns = columns)
if total-width is defined
total-width
else
unit(gridsystem-width(_columns), px)
// Correcting percentage-to-pixel rounding errors in IE6 & 7
// See http://tylertate.com/blog/2012/01/05/subpixel-rounding.html
// Override @min with the minimum width of your layout
min-width = 960
correction = (((0.5 / min-width) * 100) * 1%)
// The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/
clearfix()
*zoom:1
&:before,
&:after
content:""
display:table
&:after
clear:both
//////////
// GRID //
//////////
body
width 100%
clearfix()
row(_columns = columns)
display block
width _total-width(_columns) * ((gutter-width + gridsystem-width(_columns) ) / gridsystem-width(_columns))
margin 0 _total-width(_columns) * (((gutter-width * 0.5) / gridsystem-width(_columns) ) * - 1)
*width (_total-width(_columns) * ((gutter-width + gridsystem-width(_columns) ) / gridsystem-width(_columns))) - correction
*margin 0 _total-width(_columns) * (((gutter-width * 0.5) / gridsystem-width(_columns) ) * - 1) - correction
clearfix()
column(size, omega = false, _columns = columns) {
display inline-block
float left
if omega is true {
width _total-width(_columns) * ((((gutter-width + column-width ) * size)) / gridsystem-width(_columns))
*width (_total-width(_columns) * ((((gutter-width + column-width ) * size)) / gridsystem-width(_columns)) - correction)
} else {
width _total-width(_columns) * ((((gutter-width + column-width ) * size) - gutter-width) / gridsystem-width(_columns))
margin 0 _total-width(_columns) * ((gutter-width * 0.5) / gridsystem-width(_columns))
*width _total-width(_columns) * ((((gutter-width + column-width ) * size) - gutter-width) / gridsystem-width(_columns)) - correction
*margin 0 _total-width(_columns) * ((gutter-width * 0.5) / gridsystem-width(_columns)) - correction
}
}
push(offset = 1, omega = false, _columns = columns, _gutter = gutter-width, _column = column-width)
if omega is true
margin-left (_total-width(_columns)*((_gutter+_column)*offset)/gridsystem-width(_columns))
else
margin-left _total-width(_columns)*(((_gutter+_column)*offset + (_gutter*0.5))/gridsystem-width(_columns))
pull(offset = 1, omega = false, _columns = columns, _gutter = gutter-width, _column = column-width)
if omega is true
margin-right (_total-width(_columns)*((_gutter+_column)*offset)/gridsystem-width(_columns))
else
margin-right _total-width(_columns)*(((_gutter+_column)*offset + (_gutter*0.5))/gridsystem-width(_columns))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment