Twitter Bootstrap “.container” class: How to use it semantically?

Question

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?

Answer 1

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
  }
}

Answer 2

The problem with the answer above is that makeRow() and makeColumn() mixins are not responsive. I was looking forward to write semantic class names but I didn't see the results as when writing for example row and span6 offset1 class names.

You can check https://github.com/twitter/bootstrap/issues/2242 to get more info.