Skip to content

Instantly share code, notes, and snippets.

@nathos
Created February 10, 2012 20:32
Show Gist options
  • Save nathos/1792587 to your computer and use it in GitHub Desktop.
Save nathos/1792587 to your computer and use it in GitHub Desktop.
A start for semantic grids in Twitter Bootstrap
// clearly, still in progress...
$fluidLayout: true
$fluidLayout: false !default
// Semantic grid mixins
@mixin row($fluid: $fluidLayout)
@if $fluid == true
width: 100%
@else
margin-left: $gridGutterWidth * -1
@include clearfix
.row
@include row
@mixin columns($columns, $gridColumnWidth, $gridGutterWidth, $fluid: $fluidLayout)
@if $fluid == true
@include fluidGridSystemGridColumn($fluidGridGutterWidth)
@include fluidGridSystemColumns($fluidGridGutterWidth, $fluidGridColumnWidth, $columns)
&:first-child
margin-left: 0
@else
@include gridSystemGridColumn($gridGutterWidth)
@include gridSystemColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns)
// Semantic grid set-up
#main-content
@extend row
#main
+columns(8)
#sidebar
+columns(4)
@kristianmandrup
Copy link

Which version of Twitter Bootstrap is the above solution intended for? 2.0.4? 2.1?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment