I Decided to use Twitter’s Bootstrap After All!

twitter bootstrap snapshot

TLDR; Why did i gave in to using twitter’s bootstrap on my site after all the trouble of rolling my own?

Recently I decided to gut this site! I initially home-brewed all the layout, css, and javascript. Late January I decided to scrap my code, keep the look-and-feel, and switch over to Twitter’s bootstrap.

Why didn’t I start off with Bootstrap?

I’ve spent quite a bit of time on projects where I had to be the one to not only write the code, but also the one defining the user interactions, the user interface, and also making the graphics. I genuinely enjoy having my hands in all the different ends of website creation, and as a coder I get to practice application of best-practices when I build things from scratch.

This is my portfolio site after all, so might as well flex and show some skills.

I’m not a big fan of Bootstrap

There are a few reasons, here are the big ones:

The over-played look and feel of bootstrapped sites
The inevitable Code/resource bloat in incurs
The beauty of Bootstrap is that it gives you a bunch of useful widgets for use, and a baseline UI that you can live with. It is good at quickly providing a polished front-end for your site, no matter what state the back end code is in. But oh, how we’ve all come to hate that cliche’d look!

[ picture of white bkgd, top navi bstrap ]
Bootstrap is loaded. Loaded with goodness if you’re using what it comes with effectively, and loaded with a lot of extra baggage if your site doesn’t use that stuff.

(This is true of any framework, library, or what-have-you. It’s always best to really understand the use-cases for a particular piece of technology; and stay away from ‘religious’ opinions that crop up when you’re forced to choose based on feelings rather than knowledge.)

Example of code-bloat on my site!

At the inception of this site, circa January 2014, my completed front page weighed in at about 130 DOM elements, implemented using about 20 server requests including the ones for my fonts, images, and analytics. This is nice and lean all around, and since my assets have a small footprint, everything loads very quickly; Google should love me.

load times

My site stats before Bootstrapation


after bootstrap
After Bootstrapinization


By comparison, after integration of Bootstrap 3, I’m using about 180 DOM elements on the front page, with 45 total requests to different servers! Mind you, this is in development, before rails combines many of the assets, but still, I’m loading a lot more code. Though, the biggest issue for me, code-wise, is home-brewing all my own HTML, CSS, and Javascript just felt so clean. Now with bootstrap, I feel like the code is no longer really mine. Honestly I’m a little less proud of the site!

Frankly I think Zurb’s Foundation is superior to Bootstrap, at least as far as semantic richness in the html; that’s an issue too.

So, why did I switch to Bootstrap?

Well, a couple of reasons. I have plans for the site. I’m banking on leveraging all the goodness packed away in the pre-packaged Bootrap widgets. I’ll hopefully be using some in the near future as I implement some of the apps I’m developing into the site. For example, the vertical-accordion on the portfolio page (at the bottom) was a good exercise and fun to implement, but yeah it took time, and bootstrap comes with one that took two minutes to adapt to my needs. You get the point.

Also, Bootstrap has become something of a standard. People in a position to hire ask if you ‘know’ Bootstrap. So, this is also my attempt to embrace the reality of the state of the web, get with the program.

As an aside, in similar vein, there are big issues with Coffeescript, but since I took my deep dive into JS a long time ago, I’ll go ahead and learn that too.

Leave a Reply

Your email address will not be published. Required fields are marked *