twitter-bootstraplessmixinstemplate-mixins

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


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?


Solution

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