February 11, 2014

I'm not a designer.  I don't pretend to be one.  Give me a blank slate in Photoshop and the outcome probably won't look pretty. I like pretty designs though.  

Often times in the past, I've opened Photoshop with a grid layout and started attempting to create a design for whatever application it is I'll be working on.  I'd have examples of what I like and don't like on my other monitor and would try to recreate the pieces in my own way.  Inevitably, after a very short amount of time, I'd get frustrated and give up.  I'd end up back to using this [old] simple tab style layout.  I used it for many years, but I was quickly growing bored of it.  Time for something new.

A year or so ago, I discovered Twitter Bootstrap.  Finally, an easy to use, customizable, and clean-looking UI for my applications.  Here's a few of my favorite things about Bootstrap:

  1. As the name implies, it makes it quick to "bootstrap" your application.  The nice thing about it, is that you can use as much or as little as you want.  If you want the button styles, or the alerts, or the tool tips, go for it.  You can tweak your build to get just the things you need and nothing you don't.  If you want the whole shebang, have at it.
    One of the things I always had a struggle with time-wise was trying to get a nice flushed out style sheet that provided the functionality I was looking for.  Bootstrap's CSS is pretty much exactly what I was looking for.
  2. The other big draw for me to use Bootstrap is that it's extremely customizable, with relatively minimal effort.  Either using their online customize tool, or overriding styles, you can have your application/site look just as you want.  Typically I do a little of both.  
    ProTip: It may seem redundant to some, but I recommend adding a second style sheet for your customizations in case you want to download a new version of Bootstrap.
  3. Bootstrap can also be used as a framework for you to completely customize (more than just colors, fonts, etc) the look of your site.  As Bootstrap Expo shows, you can pretty much do whatever you want, while still having the underlying Bootstrap framework.  If your fancy is buying templates, check out {wrap} bootstrap for some nice, inexpensive layouts.
  4. Another important factor for me is that Bootstrap is lightweight.  It doesn't come with a ton of overhead, both in external resources (CSS and JS) and the HTML is still pretty clean.  It only relies on jQuery as an external dependency so no need to worry about including 100 different libraries just to get your UI to look nice.