5

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?

darksoulsong
  • 13,988
  • 14
  • 47
  • 90

2 Answers2

6

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
  }
}
BOMEz
  • 1,020
  • 14
  • 34
Noah Goodrich
  • 24,875
  • 14
  • 66
  • 96
  • Awww, very nice! But just one thing ... shouldn't it read: "span10" and "span2" instead of "span6" and "span6". – schmunk Mar 18 '13 at 15:34
1

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.

hisa_py
  • 929
  • 11
  • 16