Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save willbowling/3131772 to your computer and use it in GitHub Desktop.

Select an option

Save willbowling/3131772 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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment