Geek asks and answers

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

One day ago I decided to play with Twitter Bootstrap. Found it fantastically well crafted, but I'm not a fan of all the classes polluting my html.

So, I'm trying to use Less to make it more semantic. I did a great job of navigating to the .container class . In the file "mixins.less" there is a link to a line (line 580) that sets the width of the container. But I can't get it to work without including the class directly in html. I always get compilation errors when I put it in my file. I tried to copy and paste this into my file, but to no avail ... did anyone go through this?

Of course, I can force the width manually, but I don't think that would be a better approach. Any ideas?

+5
source share
2 answers

This is by far the best treatment I have found. Borrowing from examples of authors:

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
  }
}
+6
source

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

https://github.com/twitter/bootstrap/issues/2242, .

+1

More articles:


All Articles