Building with Twitter Bootstrap

April 26, 2012 — by @karrisaarinen

Paul Scrivens:

Seeing a default Bootstrap “theme” site makes me leave it right away because I feel the person doesn’t care about what they are doing.

This created a lot of discussion on Hacker News. As a designer and a developer, I wholeheartedly agree with Paul.

One argument against it was that most of people don’t know what Bootstrap is or care about it. I argue that many web savvy early adopters, just the people you need, know what Twitter Bootstrap is, and if you want them on board, your product shouldn’t look like you don’t care.

Another popular argument was that it’s a standard for web look and feel. I don’t think it’s a standard because it doesn’t standardize anything specific. Maybe it could be a standard if it would be style for for certain type of blogs or for admin interfaces. If the same design is used with everything from cat photoblogs to enterprise CRM software, people have hard time figuring out what you do.

What is it good for

  • It gets you started up really fast. Instead of starting from scratch, you have a good front end foundation for your app in a matter of minutes (it’s called Bootstrap for a reason)

  • Sensible default styles. If you start from browser styles or resets, you’ll need to write everything. With Bootstrap, you can only change some things you need to, and use the rest as it is.

  • Solidly built and with things you actually need. Problem with many frameworks I have tried is that they’re not that well built, and have too little or too much stuff. Bootstrap, coming from Twitter’s own needs, feels minimal but also extensive, and well suited for modern web applications.

What is not good for

  • To use it as a design for your actual site or app. I think using Bootstrap for prototypes or hackathlons is ok, but if you actually have been using some time and effort to build your app, don’t ruin that by being lazy. Use some time to customize the site for your target users or get a designer to help you a bit.

Our experience with using Bootstrap with Kippt

We recently redesigned our landing page, and upgraded to Bootstrap to 2.0.2 together with responsive layout.

I had the general look and feel made in Photoshop, and then I just took the Bootstrap example markup and started building on top of that. If you remove the custom css, it pretty much looks like a Bootstrap page:

Kippt without styles

After some styling (about maybe 10 major selector changes, and about 100 small rule tweaks), it looks like this:

Kippt with styles

There is actually very little custom CSS, and it just took couple of hours to build. Without using the foundation of Bootstrap, it would take much much longer, since you would need write and test everything.

How to customize

Not everyone is a designer, but to customize Bootstrap you don’t need that much. Changing some background colors and fonts will go a long way. It really isn’t that hard or take that long, and it’s well worth it.

← Back to blog

If you're like us and like to collect cool and useful things you find from the web - then try Kippt, the best way to collect, organize and share online information

Learn more

comments powered by Disqus