Removing Bootstrap

Published on 2016-07-07

A while back I wrote a blogpost about how everyone is using bootstrap.

It's no secret that I'd rather see that this was not the case - so I took my own words and acted upon them - now this blog is bootstrap free - and this post is about why and how to go about that.

You can check out the previous blogbost here.

Why?

To sum up the reasons from the previous post:

  • Overall download size
  • Extra work for design elements not in bootstrap
  • Knowlegde creep - not knowing/deciding what UI to use.

A bonus reason is to minimize the number of requests the browser have to make to render the site. Requests are expensive - especially on mobile connections.

Bootstrap is easy - you include it on your page and you can make a page that looks great in moments - no big deal. But the feeling of mastering the CSS and knowing how every element is styled without side effects is very good.

How?

The process was rather simple:

  1. Remove bootstrap
  2. Note which elements failed
  3. Re-enable bootstrap
  4. Copy style for failed elements from bootstrap to own CSS
  5. Repeat

And that led to a site that looks the same but is very reduced in complexity - I know know all the CSS and it is in only one file - and the overall download size is much smaller (images are still the biggest part of this site).

What still needs to be done?

Cleanup! Lots and lots of cleanup.

First of all the CSS is a bit messy - things arent ordered correctly and media queries are repeated for different elements eg. - and I'm quite shure there are a lot of elements and attributes that I can reduce or combine.

Secondly I used a namespace in my own CSS - all classes started with gfs - that is no longer needed as the external CSS is gone everything is in one file and this naming convention is just redundant. All classes needs to be renamed - for example there is no need to have the class named .col-md-12 - there is in bootstrap where there are several variants - but this needs to be given a proper name that reflect where this site uses it.