Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
152 lines (128 sloc) 3.49 KB
// Compass Clearfix
@import "compass/utilities/general/clearfix";
//-----------------------------------
// Defaults
//-----------------------------------
$grid-column-width: 60px !default;
$grid-gutter-width: 20px !default;
$grid-columns: 12 !default;
// apply fixes for IE6
//$grid-extend-clearfix: true !default;
$grid-clearfix-class: true !default;
$grid-support-for-ie6: false !default;
@if $grid-clearfix-class {
.clearfix {
@if $grid-clearfix-class == clearfix {
@include clearfix;
} @else if $grid-clearfix-class == legacy-pie-clearfix {
@include legacy-pie-clearfix;
} @else {
@include pie-clearfix;
}
}
}
//-----------------------------------
// Column Widths
//-----------------------------------
// apply a width to a column
@mixin grid($i, $plus: 0, $with-gutters: false) {
width: grid-column-width($i, $plus);
@if $with-gutters { @include grid-column-gutters; }
}
// apply standard gutters to a column or row
@mixin grid-gutters($row: false) {
margin: 0 grid-gutter-width($row);
}
@mixin grid-row-gutters() {
@include grid-gutters(true);
}
@mixin grid-column-gutters() {
@include grid-gutters(false);
}
// return a column width in pixels
@function grid-column-width($i, $plus: 0) {
@return $grid-column-width * $i + $grid-gutter-width * ($i - 1) + $plus;
}
// return a row width in pixels
@function grid-row-width($i: $grid-columns, $plus: 0) {
@return grid-column-width($i, $plus + $grid-gutter-width);
}
// return a gutter width in pixels
@function grid-gutter-width($row: false) {
@return ($grid-gutter-width / 2 * if($row, -1, 1));
}
//-----------------------------------
// Containers
//-----------------------------------
// specify a container as a page
@mixin grid-page($i: $grid-columns, $plus: 0) {
@extend .clearfix;
width: grid-row-width($i, $plus);
margin: 0 auto;
}
// specify a container as a row
@mixin grid-row($page: false) {
@extend .clearfix;
width: auto;
// rows directly inside a page don't need the negative margin
@if $page {
margin: 0 0;
} @else {
@include grid-row-gutters;
}
}
//-----------------------------------
// Columns
//-----------------------------------
// specify a column
@mixin grid-column($i: false, $plus: 0, $with-gutters: true) {
float: left;
@if $grid-support-for-ie6 { _display: inline; }
@if $with-gutters { @include grid-column-gutters; }
// apply a width
@if $i { @include grid($i, $plus); }
}
// alter the margins of a column
@mixin grid-offset($i: 1, $plus: 0, $side: left) {
margin-#{$side}: (grid-column-width($i, $grid-gutter-width + $plus) + ($grid-gutter-width/2));
}
// convenience mixin for left offsets
@mixin grid-offset-left($i: 1, $plus: 0) {
@include grid-offset($i, $plus, left);
}
// convenience mixin for right offsets
@mixin grid-offset-right($i: 1, $plus: 0) {
@include grid-offset($i, $plus, right);
}
//-----------------------------------
// Default Styles
//-----------------------------------
@mixin grid-css() {
// containers
.page {
@include grid-page;
}
.row {
@include grid-row;
}
.page > .row {
@include grid-row(true);
}
// columns
.column {
@include grid-column;
}
@for $i from 1 through $grid-columns {
// columns widths
.grid-#{$i} { width: grid-column-width($i); }
// alter left and right margins
@if $i < $grid-columns {
.before-#{$i} { @include grid-offset-left($i); }
.after-#{$i} { @include grid-offset-right($i); }
}
}
// Box
.box {
margin-bottom: $grid-gutter-width;
}
}
Jump to Line
Something went wrong with that request. Please try again.