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 class

Answer 1

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!

Answer 2

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 :-/

Answer 3

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;
    }
}

Answer 4

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

Answer 5

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;
}

Answer 6

I'm using https://github.com/thomas-mcdonald/bootstrap-sass with the @extend feature.
but it works awful :-(

.my-top {
    @extend .span4;
}
.left-top {
    @extend .span4;
}
.right-top {
    @extned .span4;
}

it didn't even in one row ...

===

oh! I found my answer in this page:
How to use twitter bootstrap with bootstrap-sass in rails app?