Bootstrap panel - Semantic HTML with LESS

Question

I'm currently starting to explore Bootstrap in combination with LESS to get a new site up and running quickly in Umbraco.

As I want to avoid those terrible bootstrap class names on my HTML markup, I'm trying to semanticize (sp?) it a little bit.

So I want to have a panel. First, here is my markup like I want it to be on the end:

<div class="newsItem">
    <div class="newsHeader">
        Panel Title
    </div>
    <div class="newsBody">
        Panel content
    </div>
    <div class="newsFooter">Panel footer</div>
</div>

And here is a working markup with bootstrap class names:

<div class="panel panel-primary">
    <div class="panel-heading">
        Panel Title
    </div>
    <div class="panel-body">
        Panel content
    </div>
    <div class="panel-footer small">Panel footer</div>
</div>

Here is my LESS file which gets mixed with the bootstrap less files:

@import "boostrap.less"

.newsItem{
    .panel;
    .panel-primary;
}
.newsHeader{
    .panel-heading;
}
.newsBody{
    .panel-body;
}
.newsFooter{
    .panel-footer;
    .small
}

I figured this should work, but it seems it doesn't. Maybe I'm not getting how LESS works (total LESS n00b) Here is the rendered output:

Can anyone tell me why the left panel (that's the LESSed one) doesn't look like the right one?

I can go without this, but I'd like to understand why this isn't working.

Help would be nice.

Answer 1

Simple expansion of Bootstrap classes listed in HTML element within your class won't create equal style set in most cases (except very simple ones). For example notice how .panel-primary and .panel-heading are actually defined:

https://github.com/twbs/bootstrap/blob/v3.1.1/less/panels.less#L227-L229 https://github.com/twbs/bootstrap/blob/v3.1.1/less/mixins.less#L405-L422 https://github.com/twbs/bootstrap/blob/v3.1.1/less/panels.less#L22

Just take a look at the CSS you get with your Less code, for example:

.newsItem {
    .panel-primary;
}

results in:

.newsItem {
  border-color: #428bca;
}
.newsItem > .panel-heading {
  color: #ffffff;
  background-color: #428bca;
  border-color: #428bca;
}

// etc.

See? The core .panel-heading properties are still within .newsItem > .panel-heading ruleset and your .newsHeader won't have them at all (the top level .panel-heading class has only padding and border styles).

The main problem of the approach you try is that the most of Bootstrap styles are built around nesting elements and classes so turning it into a "one element = one class" CSS is somewhat complicated task. And the more complex your HTML is the more tricky your code becomes, so at certain point all that will be too tedious to bother at all (especially considering that not every Bootstrap class can be used as mixin).