Why I don't like Twitter Bootstrap

Bootstrap is a really great thing, especially for people like me who don't want (and can) create their own layout for a website. Just use bootstrap and everything has nice default styles.

Other modules like the grid system are very handy to create grid based layouts which greatly help when creating responsive websites.

But, you are doing it wrong!

Why? Take a look at this very basic example:

<div class="clearfix">
    <div class="pull-right">
        <button type="button" class="btn btn-primary btn-lg">Settings</button>
    </div>
</div>

what's wrong about it? You are more-or-less using inline styles! (ok - not technically but semantically) And we all know that inline styles are bad.

Using class="pull-right" is exactly the same as style="float:right".

Ok... but what now?

Html should only contain content with classes describing what the element contains:

<div class="footer">
    <div class="buttons">
        <button type="button" class="settingsButton">Settings</button>
    </div>
</div>

With the help of sass, compass and sassy-buttons you can easily add the required styles: 

@import "compass/utilities/general/clearfix";
@import "sassy-buttons";
 
.footer {
    @import clearfix;
    .buttons {
        float: right;
        button.settingsButton {
            @include sassy-button("flat", 15px, 26px, #ffd71a, #ffaa1a);
        }
    }
}
 

Obviously this will not look like the bootstrap version, it's just an example how simple it is to do complex styling without having to repeat yourself.

Another issue is adding additional styling bootstrap doesn't have classes prepared for.  Basically you'll have to add (semantically correct) classes and end up with a mixture of bootstrap and my second example.

Sass libraries

There are many sass libraries, here a short list of popular ones: 

I don't know of a mixin library that provides mixins similar to bootstrap classes. Maybe someone should create one...

Less

What about Less? Less is similar to Sass, you can also use that one. I personally just prefer Sass.

What do you think? Are my concerns valid?

This entry was posted in Web Development by Niko Sams. Bookmark the permalink.

3 Thoughts on "Why I don't like Twitter Bootstrap"

I'm going to apologize in the beginning for this wall of text:

I can dig most of what the article says. I'm not as canon in terms of my class usage, but I'll buy the stylistics the article is selling. The way I generally approach attribution of classes is that they should fill in the blank: "I am a _____". My mind tends to think "I am a container or I am an item" (or maybe both!). I rarely have to break from that pattern.

Consolidation and reduction for the sake of brevity can frequently pay dividends from a separation of concerns standpoint. I tend to agree the way bootstrap does things is erring on the side of providing somewhat robust modern functionality to people who don't spend all their time hashing out CSS and HTML5, which does have its place.

Question:

When you invoke[1]:

button.settingsButton {
@include sassy-button("flat", 15px, 26px, #ffd71a, #ffaa1a);
}

[1]in the sass compiler, does that do a direct copy of the sassy-button definition into the space where the directive is referenced?

If that's what it's doing (which is, btw, perfectly awesome), what's a good practice for managing potential CSS file size bloating by irresponsible inclusion?

Begin
Digression into where I'm coming from on bootstrap:

Bootstrap is a weird subject for me. It falls squarely into the 'not for production use' category with applications like ravendb. That being said, if you need to quickly bang out a proof of concept, the same tools are frequently amazing at that task. I work with a number of frameworks and platforms bootstrap doesn't play well with, and especially on upgrades there have been significant headaches in regards to that.

Are they all bootstrap's fault? I can't really answer that, I think that would require a deeper investigation as to whether or not bootstrap should be regarded as a core ui framework rather than a supplementary UI device, which is how I treat it.

I guess that's my thought and where I'm coming from. I'm usually at least on some level integrating with something that already exists. Maybe bootstrap is better from a 'built from scratch' perspective?

Bootstrap - Not Safe for Production (at least for me!) :-D
@Kitty:
Sass compiles to Css, and yes it generates more css code compared to bootstrap.

In that example it would create:
button.settingsButton {background-color: #4ba3cc; border-radius: ....etc }

if you use the same mixin twice I think you get the styles twice.
For 200$ I will remove your spam and protect it with an awesome captcha :-)

Leave a Reply

Your email address will not be published.

Github Activity

nsams commented on pull request koala-framework/kwc-newsletter#5

@nsams
nsams commented on pull request koala-framework/kwc-newsletter#5
Feb 22, 2018

bitte um abstimmung bin benjamin damit die bundles gleich strukturiert sind https://gitlab.vivid-planet.com/vivid/kwf-carlog-auth

nsams commented on issue koala-framework/koala-framework#736

@nsams
Feb 20, 2018

Yes, that is the correct fix, ajax requests timeout after 30 seconds by default. Now why the request is that slow is a completely different topic, …

nsams starred ionic-team/stencil

@nsams
Feb 19, 2018
ionic-team/stencil

A simple, reusable web component compiler

TypeScript 2.3k 5 issues need help Updated Feb 19

nsams commented on pull request koala-framework/koala-framework#728

@nsams
nsams commented on pull request koala-framework/koala-framework#728
Feb 15, 2018

des funktioniert dann nicht mehr

nsams commented on pull request koala-framework/kwc-newsletter#2

@nsams
nsams commented on pull request koala-framework/kwc-newsletter#2
Feb 15, 2018

bitte da keine leerzeile