Skip to content

Instantly share code, notes, and snippets.

@mpalpha
Created June 24, 2013 17:19
Show Gist options
  • Save mpalpha/5851818 to your computer and use it in GitHub Desktop.
Save mpalpha/5851818 to your computer and use it in GitHub Desktop.
bootstrap 2 sass grid mixin namespaced override
@import "twitter/css/_mixins";
// GRID
// --------------------------------------------------
// The Grid
@mixin grid-core($gridColumnWidth, $gridGutterWidth, $ns:'') {
.#{$ns}row {
margin-left: $gridGutterWidth * -1;
@include clearfix();
}
[class*="#{$ns}span"] {
float: left;
min-height: 1px; // prevent collapsing columns
margin-left: $gridGutterWidth;
}
// Set the container width, and override it for fixed navbars in media queries
.#{$ns}container,
.#{$ns}navbar-static-top .#{$ns}container,
.#{$ns}navbar-fixed-top .#{$ns}container,
.#{$ns}navbar-fixed-bottom .#{$ns}container {
@include grid-core-span($gridColumns, $gridColumnWidth, $gridGutterWidth);
}
// generate .spanX and .offsetX
@include grid-core-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth, $ns);
@include grid-core-offset-x($gridColumns, $gridColumnWidth, $gridGutterWidth, $ns);
}
@mixin grid-core-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth, $ns) {
@while $gridColumns > 0 {
.#{$ns}span#{$gridColumns} { @include grid-core-span($gridColumns, $gridColumnWidth, $gridGutterWidth)}
$gridColumns: $gridColumns - 1;
}
}
@mixin grid-core-offset-x($gridColumns, $gridColumnWidth, $gridGutterWidth, $ns) {
@while $gridColumns > 0 {
.#{$ns}offset#{$gridColumns} { @include grid-core-offset($gridColumns, $gridColumnWidth, $gridGutterWidth); }
$gridColumns: $gridColumns - 1;
}
}
@mixin grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth, $ns:'') {
.#{$ns}row-fluid {
width: 100%;
@include clearfix();
[class*="#{$ns}span"] {
@include input-block-level();
float: left;
margin-left: $fluidGridGutterWidth;
*margin-left: $fluidGridGutterWidth - (.5 / $gridRowWidth * 100px * 1%);
}
[class*="#{$ns}span"]:first-child {
margin-left: 0;
}
// Space grid-sized controls properly if multiple per line
.#{$ns}controls-row [class*="#{$ns}span"] + [class*="#{$ns}span"] {
margin-left: $fluidGridGutterWidth;
}
// generate .spanX and .offsetX
@include grid-fluid-span-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth, $ns);
@include grid-fluid-offset-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth, $ns);
}
}
@mixin grid-fluid-span-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth, $ns) {
@while $gridColumns > 0 {
.#{$ns}span#{$gridColumns} { @include grid-fluid-span($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth); }
$gridColumns: $gridColumns - 1;
}
}
@mixin grid-fluid-offset-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth, $ns) {
@while $gridColumns > 0 {
.#{$ns}offset#{$gridColumns} { @include grid-fluid-offset($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth); }
.#{$ns}offset#{$gridColumns}:first-child { @include grid-fluid-offset-first-child($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth); }
$gridColumns: $gridColumns - 1;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment