-
-
Save nathos/1792587 to your computer and use it in GitHub Desktop.
// 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) |
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?
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!