Tweaking Bootstrap 2.0 for Semantic Markup

Question

Version 2 of Twitters "Bootstrap" UI framework was released today. While I find it very handy, I dislike how non-semantic it is.

I'd rather avoid setting classes like .span6 .table-striped in my HTML.

Since Bootstrap is built on less, I'm expecting that there's a good way use a project-specific less sheet that can leverage mixins to to ascribe bootstrap-defined goodness to nice semantic class names.

I cloned bootstrap.less into myproject.less, and adjusted the paths in the @import lines, then added the following at the bottom:

#call-to-action {
    .span6;
}

But lessc chokes on it, and complains that:

.span6 is undefined in

Similarly, trying .columns(6) produces the same error (".columns is undefined").

Other mix-ins, such as .table, .table-bordered, etc, seem to work fine.

What am I missing? What are the best practices for using bootstrap while keeping non-semantic class names out of my nice, semantic markup?

Answer 1

if you using rails you could use sass-bootstrap you can then use mixins

Answer 2

What worked for me: create a .less file.

Go to https://github.com/twitter/bootstrap/blob/master/less/mixins.less and copy the .span*, .row, .offset* etc. into the file you created. Then use the like this:

myfile.css.less:

...<snip>...
.span5 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
...<snip>...
.offset11 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 11); }
...<snip>...

#page_footer {
    .about {
      .span4;
      .offset10;
    }
}