git.fiddlerwoaroof.com
js/twigkit-semantic.gs-22e0e79/stylesheets/scss/grid.scss
be9b2e82
 /////////////////
 // Semantic.gs // for SCSS: http://sass-lang.com/
 /////////////////
 
 // Defaults which you can freely override
 $column-width: 60px;
 $gutter-width: 20px;
 $columns: 12;
 
 // Utility function — you should never need to modify this
 @function gridsystem-width($columns:$columns) {
 	@return ($column-width * $columns) + ($gutter-width * $columns);
 }
 
 // Set $total-width to 100% for a fluid layout
 $total-width: gridsystem-width($columns);
 
 // Uncomment these two lines and the star-hack width/margin lines below to enable sub-pixel fix for IE6 & 7. See http://tylertate.com/blog/2012/01/05/subpixel-rounding.html
 // $min-width: 999999;
 // $correction: 0.5 / $min-width * 100;
 
 // The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/
 @mixin clearfix() {
 	*zoom:1;
 
 	&:before,
 	&:after {
 	    content:"";
 	    display:table;
 	}
 	&:after {
 	    clear:both;
 	}
 }
 
 
 //////////
 // GRID //
 //////////
 
 body {
 	width: 100%;
 	@include clearfix();
 }
 
 @mixin row($columns:$columns) {
 	display: block;
 	width: $total-width*(($gutter-width + gridsystem-width($columns))/gridsystem-width($columns));
 	margin: 0 $total-width*((($gutter-width*.5)/gridsystem-width($columns))*-1);
 	// *width: $total-width*(($gutter-width + gridsystem-width($columns))/gridsystem-width($columns))-$correction;
 	// *margin: 0 $total-width*((($gutter-width*.5)/gridsystem-width($columns))*-1)-$correction;
 	@include clearfix();
 }
 @mixin 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));
 	// *width: $total-width*(((($gutter-width+$column-width)*$x)-$gutter-width) / gridsystem-width($columns))-$correction;
 	// *margin: 0 $total-width*(($gutter-width*.5)/gridsystem-width($columns))-$correction;
 }
 @mixin push($offset:1) {
 	margin-left: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns));
 }
 @mixin pull($offset:1) {
 	margin-right: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns));
 }