Wherein I compare those things called “frontend frameworks” and hopefully bring Bourbon to the attention of more developers.
Following is a light, comparative review of some frontend frameworks. I give a glimpse into the existing landscape.
Context: Bootstraps Dominance
Presently and for at least two years or so, the most popular “front-end framework” has been bootstrap. It’s everywhere. It’s an industry standard. Job postings all over the web ask for applicants to have “experience using bootstrap”, as if seasoned frontend developers don’t have skills that are transferable to any frontend framework.
Bootstrap has little appreciable competition for mindshare in the webdev world even though there are other frontend frameworks in existence. Zurbs’ Foundation is notable. It’s been around for a long time. It’s mature and people know about it. It’s thought of as “the alternative to bootstrap”.
Pros and (mostly) cons of Foundation
My opinion is conventional: that Bootstrap is easier to simply load and use, and that Foundation takes a little longer to learn. Where I’d stray from conventional opinion is that I don’t think that all bootstrap sites have to look the same. It depends how you use the framework.
I’ve enjoyed using Foundation in the past. But going back to it, I simply can’t tolerate it’s installation processes. There are three options and all of them are… a bit icky. In theory you can just download the library and pull Foundation components into your project. But it’s not easy to figure out. It’s undocumented. And the installation paths that are documented are done so lightly. You can beat through the thorny path if you are a seasoned Ruby developer. But there’s no sane reason for way you should have to be a seasoned Ruby developer if you just want to install some frontend components.
Foundation promises to make development faster. But the complicated magic dance required to actually get started using it annuls that promised benefit.
Newcomers based on Googles Material Design
Google Material Design is a pattern language for design. The purpose of which is to encourage UI designers to create beautiful interfaces by using taking improved metaphors for web design into the realm of responsive design.
Google supports its Material Design language with its Web Starter Kit.
I have yet to experiment with Web Starter Kit. But I’m looking forward to it. Another project is Material CSS. It’s a student project out of Carnegie Mellon University. There is also LumX, a toolkit that includes and is geared forAngular.js. I haven’t tried these either, but may well do so in the future. Obviously a huge amount of work has gone into them and they look… delicious.
Bourbon
Bourbon.io provides sets of mixins for sass. That’s all. It’s really that simple.
Like Foundation, you have to the gem installed. Unlike Foundation, the installation of the Bourbon gem doesn’t require the same tightrope-walk and chicken-sacrificing. Combined with it’s sub-projects neat, bitters and refills, it provides most every component that either Foundation or Bootstrap do. And some that they don’t.
I’ve been using bourbon for at longer then I recall and I’m surprised it’s not more popular. It’s dead easy to pull it into an existing project or start your own project around it. My initial attraction was that earlier versions of Bootstrap didn’t have integration with sass, so the only way to use bootstrap was to clutter up the DOM with nonsemantic markup. Bourbon Neat let me use a grid system without cluttering the DOM.
Bourbon itself provides a range of conveniences documented here. It’s sibling libraries, dependent on Bourbon provide a grid system, typography and a collection of compents like headers, footers, navigation bars and tab systems.
Bootstrap also has a sass version, but I’ve found it more difficult to install then Bourbon. With Bootstraps Sass library, you have to pull in the deps with bower. And to tidy your project up before deployment, you’d probably have to handcode a Grunt task to move your files to the right place.
You don’t have to do that work with Bourbon.
In conclusion, Bourbon is easier to install then Foundation but you aren’t compelled to build your whole app around it. It has pretty much all the tooling of either Foundation or Bootstrap, but it’s much easier to get started with and you probably won’t really lose anything.