Lost in space

Lately I’ve been looking into CSS frameworks to speed up my development. I’ve used Bootstrap in the past, but it often feels like hitting a nail with a sledgehammer. Sure, it does a lot, but many times I don’t need all of that.

So I looked at alternatives, trying to find the perfect one that fits all my needs and no more. It hasn’t been easy. For one, there are many. It seems everybody and their cousin have created a framework that is the ultimate and best. And the information about there is sketchy at best. There are few reviews and even fewer ones that actually do opinions and comparisons (as opposed to those “543 CSS frameworks you should know about” listicles). I thought I’d share the findings of my research, with the following caveats:

  • This is a highly subjective post. I’ve looked at the features that are important to me and my workflow.
  • Most of the information comes just from reading the documentation on the frameworks’ site, reviews and other online info. I have not actually worked with most of these.
  • It is not exhaustive. I looked at many many many frameworks. I chose the ones I liked the most to write about, but I am aware there’s plenty more. If you have a favorite to recommend, please do so in the comments!

The heavyweights

The most common, the most known, the most complete (arguably). I’m not going to go deep into this category, since there is more than enough info on these around.

Bootstrap

The granddady of all frameworks, the most known and used.

Pros:

Huge support & community. Lots of plugins, addons, styles, forks, ports… Very actively developed & supported.

Cons:

Big, bloated (you can customize and leave out stuff, but it’s big by default). Opinionated about design choices.

Specs (v. 3.03):
  • Uses: LESS, jquery, glyphicons
  • Features: grids (mobile-first), ui elements, s, customizer, javascript, the kitchen sink
  • Suports: IE 8+

Foundation

The other big framework, differs from bootstrap in philosophy: it’s meant to be more of a starting point than a do-it-all solution.

Pros:

Leaner. More neutral (and IMO, better looking) base styles. Great documentation. Training. Backed by Zurb.

Cons:

Less adoption, less resources. Lack of support for IE8-, which can be a dealbreaker for some client sites.

Specs (v. 5.0.2):
  • Uses: SASS (SCSS), jquery, foundation icon fonts
  • Features: grids (mobile-first), ui elements, customizer, javascript, the kitchen sink
  • Suports: IE 9+
  • Site • GitHub

The middleweights

I looked at lesser known but full-featured frameworks, and these two stood out.

Gumby

I had heard of Gumby a while ago, when it was basically a grid system, so I was pleasantly surprised to see that it has evolved into a great framework with a few extras like tiled layouts and retina images.

Pros:

Nice looking! Complete, some unique features. Leaner than the heavyweights. Good documentation, downloadable PSDs.

Cons:

Less than confidence-inspiring name ;) . Unknown, not very popular.

Specs (v. 2.6):
  • Uses: SASS , jquery,
  • Features: grids (based on 960 grid), ui elements, customizer, javascript
  • Suports: IE 8+
  • SiteGitHub

Groundwork

This is a recent discovery, I had not really heard about this framework, and found it to be really complete. It features a pretty solid- looking grid that lets you specify how containers behave at different breakpoints (like the big boys) and responsive typography.

Pros:

A lot of emphasis on animation, some unique features.

Cons:

Not very good documentation (little more than examples). Unknown, feels young.

Specs (v. 2.6):
  • Uses: SASS (SCSS) , jquery,
  • Features: grids , ui elements,  javascript
  • Suports: IE 8+
  • Site • GitHub

The lightweights

When you don’t want every element under the sun, but rather a base with grids, type and the most common ui elements (forms, navs) these are a good bet:

Pure

Developed by Yahoo, and apparently the successor of YUI, this framework seems to be the minimalist utopia of a framework. Even the name sounds light and airy.

Pros:

Tiny. Supertiny. And you can include only the modules you want (base, grids, tables, forms, navs, buttons). You can even link to it from Yahoo’s CDN.  Nice looking, with minimal design. IE7 support, which is rare these days.

Cons:

My biggest problem is the grid. It was originally built using inline-block elements with negative letter-spacing. But that meant that it could break the letter-spacing on every element on a page if you used webfonts or did not have certain fonts installed. There are workarounds to this, but it seems to be missing the point of using a framework. The latest version(s?) seem to be moving towards a flexbox-based grid for browsers that support it, but it leaves me uneasy knowing Pure can fail in certain browser/OS combos.

Pure has no LESS/SASS, which means you’ll have to do things the old-fashioned way. They do have a skin builder, but it seems pretty rudimentary.

Specs (v. 0.3.0):
  • Uses:  jquery
  • Features: grids , basic ui elements,  javascript
  • Suports: IE 7+
  • Site • GitHub

Base

Even the name sounds just about right. A base to build something on. It’s built on a 960 grid system, and some very basic and barely styled ui elements.

Pros

Small, simple, hardly any styles to override. Wide browser support. Choose from LESS or SASS

Cons:

No advanced grid options.

Specs (v. 2):
  • Uses:  LESS or SASS
  • Features: grids , basic ui elements,  basic javascript
  • Suports: IE 7+
  • Site

Kube CSS

Kube describes itself as minimalistic, and it is- both in style and features.

Pros:

Minimal javascript. Good set of features, no more and no less.

Cons:

Not sure how actively it’s developed, there seems to be little news around it. Default styles are not the best-looking. Little support and documentation (but then again, probably not much is needed).

Specs (v. 2):
  • Uses:  LESS
  • Features: grids , basic ui elements,  javascript
  • Suports: IE 8+
  • Site 

Honorable mentions

  • Semantic UI – like the name says, focused on semantic classes and flexible  HTML elements, with nice-looking and well-thought out ui elements. Made with LESS.
  • Kickoff – Nice-sized framework with percentage-based grids, type, and minimal UI elements. Made with SASS. Awesome orange color.
  • KnaCSS– small library focused on OOCSS, with grids and positioning. Has both LESS and SASS versions.
  • Ink– Suprisingly complete framework, with grids, ui elements, icons. Made with LESS.

My winners

For the heavy lifting, I’ll go with Bootstrap. Foundation seems to be better, but I don’t think Bootstrap’s ecosystem can be beaten. If I use Bootstrap, I know I’ll have all the functionality, tutorials, support, plugins, etc that I need.

For the basics only, I’ll try out Base. Pure was very very close, but the grid issue makes me uneasy. Pure is still young, and I have faith in it’s future.

Any potential winners that I’m missing?

Further Reading

21 comments on “CSS Frameworks- comparing Bootstrap alternatives

  1. Woofer on

    Me parecieron muy buenas tu reseña de frameworks, he trabajado con boolstrap y es excelente pero puede mejorar o como lo mencionas acortar ciertas funcionalidades si no las utilizamos.
    Me encanta que sigas adelante con tu blog, ya te lo he mencionado soy tu fan #1 en México

    Reply
  2. Luisa on

    I’ve used both Bootstrap and Foundation. I found Foundation a lot more intuitive and lightweight. While it’s true that there isn’t a lot of documentation, Treehouse is building up on it and their tutorials are pretty good!

    Reply
  3. frank on

    This article is of very little value. It starts off with a premise that what you’be been using is too big and bloated with features that you do not need. In each and every review you have listed as cons the absence of attributes that you were looking to get away with – only at the end to end up selecting the very same thing for which you were looking to get away from. It’s as if you are someone who is looking for 6 cookies in a jar but wants them to be as tasteful and as filling as 12 cookies in a jar. What an airhead time wasting review.

    Reply
    • kemie on

      I disagree a bit with your assesment. I think my conclusion was closer that when I’m really hungry I’ll go with the 12-cookie jar, and otherwise there’s a couple of 6-cookie jars that look really tasty ;).

      Reply
    • mike on

      personally, I found the comparison useful, its short, too the point and relative. I don’t think there can be an ‘absolute best’ in this case. it has given me enough pointers to now make up my own mind.

      Reply
  4. Nick on

    Very helpful post, especially as a long-time Bootstrap user now coming to terms with its limitations and wanting to look at alternatives for a project needing an ultra-lightweight framework. (I’m sure there are many others fitting my profile.)

    I appreciated the summary-level impressions of all the alternatives. I intend to look at some of them closely myself. I had heard of all of them other than Base, which sounds promising.

    Thanks!

    Reply
  5. Andrew on

    I think you missed a great ‘pro’ of Groundwork in that you can completely avoid classes that confuse layout with content, such as:

    class=”span3 offset2″

    and instead use classes like:

    class=”profile-widget”

    and then us an @include in your _custom.scss sass file to include the relevant groundwork grid commands in your .profile-widget definition.

    Reply
  6. Dmitry on

    I’ve used Kube recently on my project.
    it lacks backward compartibility. I’ve learned from docs about 1.0 and started to playing with it and kube goes to 2.0 (with total removal of all 1.0 docs from their website). i’ve build site on 2.0 and then they build 3.0 with switching from glyphicons to fa-icons in core.

    that’s unconsistient.

    Reply
    • LCW on

      I believe that’s progress – When you develop something you usually find better ways of doing it as you progress…

      Reply
    • LCW on

      I am a big fan of Kube. I also like Foundation and am looking to try Semantic-UI, though I think Semantic-UI is more complex than any of the others.

      Reply
  7. RioBrewster on

    I’ve used Bootstrap (2) and Foundation 4 pretty extensively.

    My biggest complaint about Bootstrap was that customizing their styling was overly difficult – in part because there were gradients everywhere. So if I wanted to override the color of the nav bar, not only did I have to add a background-color, but also override the background image code, which is quite bloated. I believe Bootstrap 3 is a bit better in this regard.

    I like Foundation 4 much better – partly because it uses Compass/SASS instead of LESS. I think it’s more powerful – BUT while LESS has some nice, free GUI tools, Compass/SASS pretty much requires command line.

    As far as support goes, I think ZURB does a pretty good job – as long as you are using their latest version. Still I think the docs are pretty good and there does seems to be a pretty robust community around it.

    Now Foundation 5? Argh. Very difficult to set up if you are behind a corporate firewall, and the docs are not helpful at all. That surprises me because it has been out for awhile and if you google “problems with Foundation 5 install” you have a lot to choose from.

    And lack of support for IE8 is no joke. There are shims for F4 – but it was pretty painful to get things working consistently across browsers.

    Just getting started evaluating F5 (again). We’ll see how good the hacks for IE8 are before we choose.

    Reply
  8. Tshon on

    I found this information to be very useful. While it did not provide me with the answers that I am looking for, it did inform me (novice) about different frameworks as I only knew about bootstrap. So now I pose a question, i have a very artistic design in my head and can’t figure out what would be the best framework to accomplish it. While I want something completely responsive for various screen sizes, I need to maintain the layout, I just need the size to adjust, as I’m placing pictures that will need to maintain their position. In the end I need to make one picture a bunch of separate pictures but combined together will maintain the look of the original picture.

    Reply
    • kemie on

      It’s really hard to say without looking at the design, but I’m guessing you need a fluid grid that does not stack up at small screen sizes. You can probably achieve that with several of the options mentioned here.

      Reply
  9. Ben on

    Great article. Working with Bootstrap is a pain but you covered all the essential reasons why other frameworks are not worth switching to yet (lack of IE8 support is a massive dealbreaker, and the vast array of both support and UI quick-fixes). I would suggest only one improvement if you did this again, and that would be integration with other libraries such as jQuery.

    Thanks
    Ben

    Reply
  10. John on

    I completely agree. I loved frameworks like bs & foundation, then I hated it once I started looking at performance and how much of it I didn’t need in my ux layouts. I think a modular approach it best. So you build a core like in foundation with a: reset, grid, typography, basic forms, etc and then you can also add a module for blog, gallery, carousel, dashboard etc. This way you can save time and only add what parts you need for a given project. I’m working on a framework that will in the future have modules. Right now it’s just the core. It’s hosted on github and it’s called spark. It’s meant for an aid to building the best ux layouts so it’s kind of opinionated but uses the bs grid class naming scheme and buttons too. a href=”https://github.com/alteredstudio/spark-framework”>Spark CSS Framework

    Reply
  11. Rodger Castle on

    I personally use w3.css
    I have never used the other frameworks, however, based on this information, I might take a look.

    Reply

Leave a Reply

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