text post 3/7/2012

To bootstrap or not to bootstrap

Since the day Twitter Bootstrap came out, it has been immensely popular. And recently, there have been more and more posts that either go on and on about how great it is, or how over-used it is. Here are two I saw on the front page of hacker news today:

This is just a very small subset of the massive number of popular articles I’ve seen about bootstrap, and they all seem to come from one of two angles: 1) I am not a professional designer, and bootstrap is a lifesaver for me, and 2) I am a professional designer, and it makes me ill that it’s being used so often rather than a real custom designs.

There is no way to stop people that have no idea how to design and no design budget from using bootstrap. Initially it seemed like a real game changer because all these sites with absolutely no design talent behind them started looking good and coming out quickly because of lack of time needed to spend on design. But this “wow!” effect has already started to wane, and will only wane further as the number of bootstrapped sites increase and using bootstrap becomes more of a “oh they just used bootstrap” than a “wow this looks amazing!” effect. It’s inevitable, and as we have seen through tweets and articles, it has already started to happen.

So although those who don’t care at all about design will continue using bootstrap in production indefinitely, we still have a huge number of intermediate and advanced web designers that have no¬†shortcuts¬†left - using bootstrap in production will become a sin (if it hasn’t already - certainly has for me), and all the saved time we could have had from having pre-written boilerplate is gone.

I know that there is a better way, and I have been working on a tool that can be used by intermediate and advanced developers that will speed up development time significantly while avoiding the four major pitfalls of bootstrap, which are in my opinion:

  • Uniform, inflexible design style
  • Creates ugly html with class combinations
  • Loads the entire framework whether you use it or not
  • Not intended to be used with an advanced dev setup (haml, sass, coffeescript)

I have been dropping hints about how it works for a while, but it’s nearing readiness for a beta release, so I want to bring up a couple of it’s features for people to consider:

  • Beautiful, well-designed defaults
  • Uses sass and haml by default
  • You write your own html classes, define styles with css mixins
  • Every element is flexible in every way. Color, size, etc - they all intelligently scale
  • Strong focus on clean and DRY code, with layouts, partials, and config files so you don’t have to copy and paste or re-type things
  • Everything auto-compiles for you
  • Scalable icons embedded as fonts with proper hinting, easy to generate your own custom icon sets through a bundled native mac app
  • You customize the way your layout scales responsively (with an easier method than media queries), aren’t limited to certain classes and layouts.

Give it a thought. Even advanced designers and front-end devs end up using a lot of the same patterns over and over. Horizontal and vertical lists, with or without bullets. Buttons of every shape and size. Typography. Horizontal content splits. Elements that scale as the window resizes. But at the same time, we end up rewriting these over and over because every site’s design is unique. But with a super flexible version of bootstrap geared towards design/dev professionals, we get the time-saving benefits without the “oh, another bootstrap site” effect.

Keep on the lookout, it’s coming out soon. And if you are interested in helping out, feel free to email me.