How to make a Responsive (Row Fluid) Mixin for Bootstrap - css

Question

I can replace this code with
<div class="row">
<div class="span10">...</div>
<div class="span2">...</div>
</div>
With this, to make it more semantic
<div class="article">
<div class="main-section">...</div>
<div class="aside">...</div>
</div>
<!-- Less stylesheet -->
.article {
.makeRow();
.main-section {
.makeColumn(10);
}
.aside {
.makeColumn(2);
}
}
How can I do this with the fluid grid though:
<div class="row-fluid">
<div class="span10">...</div>
<div class="span2">...</div>
</div>
<!-- Less stylesheet -->
.article {
???
.main-section {
.makeColumn(10);
}
.aside {
.makeColumn(2);
}
}
I have tried:
.article { #grid > .fluid(#fluidGridColumnWidth768, #fluidGridGutterWidth768);}
and some variations on it from some related stackoverflow posts but its not getting responsive.

Answer 1

This worked for me.. posting in case it helps anyone else.
Mixins for semantic fluid grid:
.makeFluidRow(){
width: 100%;
.clearfix();
}
.makeFluidCol(#span:1,#offset:0){
float: left;
#grid > .fluid .span(#span);
#grid > .fluid .offset(#offset);
&:first-child {
margin-left: 0;
.offsetFirstChild(#offset);
}
}
Use them just like the non-fluid mixins:
.article {
.makeFluidRow();
.main-section {
.makeFluidCol(10); //Spans 10 cols
}
.aside {
.makeFluidCol(1,1); //offset by one, spans 1
}
}

Answer 2

Ok, I think I have got it. I am updating the question to add offsets with the fluid layout as this is where I ran into the most trouble.
<div class="article">
<div class="main-section">...</div>
<div class="aside">...</div>
</div>
<!-- Less stylesheet -->
.article {
.main-section {
#grid > .fluid > .offset(2);
#grid > .fluid > .span(8);
}
.aside {
#grid > .fluid > .span(2);
}
}

Answer 3

I found your question looking for a way to use .makeColumn() for responsive grids (1200px, 768px, etc). The .makeColumn() mixin that is including with Bootstrap 2 accounts for only the 940px grid.
To fix it, I just extended the .makeColumn() mixin in a LESS file that loads after the Boostrap files.
// Improve .makeColumn to work with 1200px responsive grid
.makeColumn(#columns: 1, #offset: 0) {
#media (min-width: 1200px) {
margin-left: (#gridColumnWidth1200 * #offset) + (#gridGutterWidth1200 * (#offset - 1)) + (#gridGutterWidth1200 * 2);
width: (#gridColumnWidth1200 * #columns) + (#gridGutterWidth1200 * (#columns - 1));
}
}