27

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?

PeeHaa
  • 71,436
  • 58
  • 190
  • 262
timdev
  • 61,857
  • 6
  • 82
  • 92
  • 6
    I know exactly how you feel about adding "non-semantic classes", but if you're using Bootstrap you should just suck it up and add the required classes in your HTML. Fighting against it is time-consuming. – thirtydot Feb 01 '12 at 03:30
  • 1
    what does it exactly say? maybe you need `.span6;`, or what I do is use the mixins that define `.span6` which I believe is `.gridColumn();` and `.columns(x);`. – Jonathan Ong Feb 01 '12 at 03:32
  • @JonathanOng - that sounds promising, I'll check tomorrow. The error I get is ".span8 is undefined in ..." -- which I get even when including the semicolon. – timdev Feb 01 '12 at 05:03
  • are you putting your customizations after all of bootstrap's less files? – Jonathan Ong Feb 01 '12 at 06:20
  • @JonathanOng - yes. So far, I've just copied bootstrap.less, and added my code at the bottom. – timdev Feb 01 '12 at 07:22
  • 1
    Any progress on this? I love the functionality of bootstrap... but I can't bring myself to little my html like that. – bhazzard Feb 10 '12 at 05:13

8 Answers8

11

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!

Fábio ZC
  • 798
  • 7
  • 10
8

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;
}
akshatpradhan
  • 116
  • 6
  • 1
    Thanks, I had forgotten I asked this, and came up with the same solution myself, right down to the "I don't know what to do about 'row'" bit. – timdev Feb 16 '12 at 01:47
  • excellent solution, is it working with fluid grids too? thanks! – YogiZoli Apr 24 '12 at 02:17
  • 2
    2.1+ allows you to use .makeRow() and .makeColumn(columns, offset); which I believe is the preferred route. – Zee Spencer Dec 14 '12 at 03:43
3

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

Simon_Weaver
  • 140,023
  • 84
  • 646
  • 689
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;
    }
}
Community
  • 1
  • 1
Zabba
  • 64,285
  • 47
  • 179
  • 207
1

Less provides mixins, meaning that if you write your stylesheets in Less rather than CSS, you can include the Bootstrap classes in your stylesheet rather than in your HTML.

Please stop embedding Bootstrap classes in your HTML!

raina77ow
  • 103,633
  • 15
  • 192
  • 229
Rory
  • 336
  • 1
  • 4
  • 12
1

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

nodrog
  • 3,532
  • 2
  • 25
  • 31
  • Then you're dependent on another thing and hope like hell the new features and bug-fixes in the original bootstrap make it to the sass version as they come out. – Zabba Feb 12 '12 at 10:34
0

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?

Community
  • 1
  • 1
zx1986
  • 880
  • 2
  • 12
  • 18
0

Disagree with the response that you should "just give up" and "do it the easy way" — manipulating classes in markup not the easy way. For example: When your site is viewed on a mobile phone, what is class="span4"?

I use https://github.com/vwall/compass-twitter-bootstrap because it seems to be the most frequently updated port of Twitter Bootstrap to Sass.

This library is great because it is prefixed to avoid mixin name conflict. It's easy to use for prototyping and then you can quickly grow out of it — just like bootstrap was meant to be used.

unthinkingly
  • 1,477
  • 1
  • 9
  • 3