A start for semantic grids in Twitter Bootstrap

semantic_twitter_boostrap_grid.sass

// 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)

Nice! Do you know if anyone has taken this approach further?
I like the idea and completeness of T.B but I'd like to use it for semantic markup like you illustrate here... thanks!

twbs/bootstrap#789

Just to be clear. You can use makeColumn to make a column.

// makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something
.makeColumn(@columnSpan: 1) {
.gridColumn();
.columns(@columnSpan);
}
and to make a row just .row I guess.

gagarine, this doesn't work. The closest I could get was this for twitter bootstrap 2:

//custom-mixins.less
.col (@col) {
#gridSystem > .gridColumn(@gridGutterWidth);
#gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @col);
}

//styles.less
.greetings {
.col(3);
}

Hmm.... I wonder who is right?

For the new Bootstrap 2.1 (maybe works on 2.0):

.content{ .makeRow();
.main-content{ .makeColumn(5,2);} // (size,offset)
.sidebar{ .makeColumn(3); }
}
Finally works!

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