One day ago I decided to play around with Twitter Bootstrap. Found it fantastically well crafted, but Im not a fan of all of those classes polluting my html.
So I´m trying to use Less to make it more semantic. I was doing quite good til I step over on the .container class. There is a mixin in the "mixins.less" file (line 580) that sets the container width. But I can´t make it work without including the class directly on the html. I always get compile errors when putting it in my custom file. I tried copying and inserting that in my file, but without success... anyone have gone through this?
Off course, I could force the width manually, but I don´t think it would be the best approach. Any ideas?
This is by far the best treatment I've found yet. Borrowing from the authors examples:
Most people use this:
<div class="row">
<div class="span6">...</div>
<div class="span6">...</div>
</div>
If you are like me, then you are trying to get to this:
<!- our new, semanticized HTML -->
<div class="article">
<div class="main-section">...</div>
<div class="aside">...</div>
</div>
<!-- its accompanying Less stylesheet -->
.article {
.makeRow(); // Mixin provided by Bootstrap
.main-section {
.makeColumn(10); // Mixin provided by Bootstrap
}
.aside {
.makeColumn(2); // Mixin provided by Bootstrap
}
}