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?
For the new Bootstrap 2.1 (maybe works on 2.0):
.content{ .makeRow();
.main-content{ .makeColumn(5,2);} // (size,offset)
.sidebar{ .makeColumn(3); }
}
Finally works!
ok in less, this is how I figured it out. Its the best I could do, and I couldn't figure out how to deal with .row semantically, but oh well.
Basically I created a custom-mixins.less and created a mixin called .col and the variable is @col. So when you write your selector and do something like .col(3); .col(4); .col(5); or something like that. It should create the proper width. I don't know how this would work for nested columns.
//custom-mixins.less
.col (@col) {
#gridSystem > .gridColumn(@gridGutterWidth);
#gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @col);
}
//styles.less
.greetings {
.col(3);
}
lessc will generate the following in styles.css
//styles.css
.greetings {
float: left;
margin-left: 20px;
width: 220px;
}
Here's an article which refernces a gist in git.
This article is trying to go one step further - and solve the problem that the default responsive mechanisms in Bootstrap are lost when you move the classes out of your page.
Bootstrap with Less
It uses a custom mixin to try to create classes for different breakpoint page widths.
I'd like to give my opinion here but I haven't quite decided what it is yet :-/
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:
...<snip>...
.span5 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
...<snip>...
.offset11 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 11); }
...<snip>...
#page_footer {
.about {
.span4;
.offset10;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With