HTML & CSS
Article

The 5 Most Popular Frontend Frameworks of 2014 Compared

By Ivaylo Gerchev

Nowadays there is a deluge of CSS front-end frameworks. But the number of really good ones can be narrowed down to just a few.

In this article we’ll compare what I think are the five best frameworks available today. Each framework has its own strengths and weaknesses, and specific areas of application, allowing you to choose based on the needs of a specific project. For example, if your project is simple, there is no need to use a complex framework. Also, many of the options are modular, allowing you to use only the components you need, or even mix components from different frameworks.

The frameworks that I’m going to explore are presented based on their GitHub popularity, beginning with the most popular, which is, of course, Bootstrap.

(Note: Some of the information below will go out of date in the coming weeks and months – e.g. GitHub stars, version numbers – so be aware of this if you’re reading this article long after the publication date. Also note that the framework sizes are the minified sizes of the necessary CSS and JavaScript files.)

Versioning. A slightly sarcastic daily email for discerning web people. Sign up today!

1. Bootstrap

Bootstrap is the undisputed leader among the available frameworks today. Given its huge popularity, which is still growing every day, you can be sure that this wonderful toolkit won’t fail you, or leave you alone on your way to building successful websites.

Bootstrap

  • Creators: Mark Otto and Jacob Thornton.
  • Released: 2011
  • Current version: 3.3.1
  • Popularity: 75,000+ stars on GitHub
  • Description: “Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.”
  • Core concepts/principles: RWD and mobile first.
  • Framework size: 145 KB
  • Preprocessors: Less and Sass
  • Responsive: Yes
  • Modular: Yes
  • Starting templates/layouts: Yes
  • Icon set: Glyphicons Halflings set
  • Extras/Add-ons: None bundled, but many third-party plug-ins are available.
  • Unique components: Jumbotron
  • Documentation: Good
  • Customization: Basic GUI Customizer. Unfortunately you need to input the color values manually, because there is no color picker available.
  • Browser support: Firefox, Chrome, Safari, IE8+ (you need Respond.js for IE8)
  • License: MIT

Notes on Bootstrap

The main strength of Bootstrap is its huge popularity. Technically, it’s not necessarily better than the others in the list, but it offers many more resources (articles and tutorials, third-party plug-ins and extensions, theme builders, and so on) than the other four frameworks combined. In short, Bootstrap is everywhere. And this is the main reason people continue to choose it.

(Note: By saying “unique components” I mean that they are unique compared only to the frameworks mentioned in this list.)

2. Foundation by ZURB

Foundation is the second big player in this comparison. With a solid company like ZURB backing it, this framework has a truly strong … well… foundation. After all, Foundation is used on many big websites including Facebook, Mozilla, Ebay, Yahoo!, and National Geographic, to name a few.

ZURB Foundation

  • Creators: ZURB
  • Released: 2011
  • Current version: 5.4.7
  • Popularity: 18,000+ stars on GitHub
  • Description: “The most advanced responsive front-end framework in the world”
  • Core concepts/principles: RWD, mobile first, semantic.
  • Framework size: 326 KB
  • Preprocessors: Sass
  • Responsive: Yes
  • Modular: Yes
  • Starting templates/layouts: Yes
  • Icon set: Foundation Icon Fonts
  • Extras/Add-ons: Yes
  • Unique components: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
  • Documentation: Good. Many additional resources are available.
  • Customization: No GUI customizer, only manual customization.
  • Browser support: Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+
  • License: MIT

Notes on Foundation

Foundation is a truly professional framework with business support, training, and consulting offered. It also provides many resources to help you learn and use the framework faster and easier.

3. Semantic UI

Semantic UI is an ongoing effort to make building websites much more semantic. It utilizes natural language principles, thus making the code much more readable and understandable.

Semantic UI

  • Creator: Jack Lukic
  • Released: 2013
  • Current version: 1.2.0
  • Popularity: 12,900+ stars on GitHub
  • Description: “A UI component framework based around useful principles from natural language.”
  • Core concepts/principles: Semantic, tag ambivalence, responsive.
  • Framework size: 552 KB
  • Preprocessors: Less
  • Responsive: Yes
  • Modular: Yes
  • Starting templates/layouts: No
  • Icon set: Font Awesome
  • Extras/Add-ons: No
  • Unique components: Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape.
  • Documentation: Very good. Semantic offers a very well organized documentation, plus a separate website that offers guides for getting started, customizing and creating themes.
  • Customization: No GUI customizer, only manual customization.
  • Browser support: Firefox, Chrome, Safari, IE10+ (IE9 with browser prefix only), Android 4, Blackberry 10
  • License: MIT

Notes on Semantic UI

Semantic is the most innovative and full-featured framework among those discussed here. The overall structure of the framework and the naming conventions, in terms of clear logic and semantics of its classes also surpasses the others.

4. Pure by Yahoo!

Pure is a lightweight, modular framework – written in pure CSS – that includes components that can be used together or separately depending on your needs.

Pure by Yahoo!

  • Creator: Yahoo
  • Released: 2013
  • Current version: 0.5.0
  • Popularity: 9,900+ stars on GitHub
  • Description: “A set of small, responsive CSS modules that you can use in every web project.”
  • Core concepts/principles: SMACSS, minimalism.
  • Framework size: 18 KB
  • Preprocessors: None
  • Responsive: Yes
  • Modular: Yes
  • Starting templates/layouts: Yes
  • Icon set: None. You can use Font Awesome instead.
  • Extras/Add-ons: None
  • Unique components: None
  • Documentation: Good
  • Customization: Basic GUI Skin Builder
  • Browser support: Latest versions of Firefox, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x
  • License: Yahoo! Inc. BSD

Notes on Pure

Pure offers only bare-bones styles for a clean start to your project. It’s ideal for people who don’t need a full-featured framework but only specific components to include in their work.

5. UIkit by YOOtheme

UIkit is a concise collection of easy to use and easy to customize components. Although it’s not as popular as its competitors, it offers the same functionality and quality.

UIkit

  • Creator: YOOtheme
  • Released: 2013
  • Current version: 2.13.1
  • Popularity: 3,800+ stars on GitHub
  • Description: “A lightweight and modular front-end framework for developing fast and powerful web interfaces.”
  • Core concepts/principles: RWD, mobile first
  • Framework size: 118 KB
  • Preprocessors: Less, Sass
  • Responsive: Yes
  • Modular: Yes
  • Starting templates/layouts: Yes
  • Icon set: Font Awesome
  • Extras/Add-ons: Yes
  • Unique components: Article, Flex, Cover, HTML Editor
  • Documentation: Good
  • Customization: Advanced GUI Customizer
  • Browser support: Chrome, Firefox, Safari, IE9+
  • License: MIT

Notes on UIkit

UIkit is successfully used in many WordPress themes. It offers a flexible and powerful customization mechanism, either manually or via its GUI customizer.

What’s the Right Framework for You?

In the end, let me give you some guidelines for choosing the right framework. Here are some of the more important things to watch out for:

  • Does the framework have enough popularity? Bigger popularity means more people involved in the project, and thus, more tutorials and articles from the community, more real-world examples/websites, more third-party extensions, and better integration with relative web development products. Great popularity also means that the framework is more future-proof – a framework with a bigger community around it is much less likely to be abandoned.
  • Is the framework under active development? A good framework needs to level up constantly with the latest web technologies, especially with regards to mobile.
  • Has the framework reached maturity? If a particular framework is not yet used and tested in real-world projects, then you can freely play with it, but to rely on it for your professional projects would likely be unwise.
  • Does the framework offer good documentation? Good documentation is always desirable in order to facilitate the learning process.
  • What is the framework’s level of specificity? The main point here is that a more generic framework is far easier to work with, in comparison to a framework with high-level specificity. In most cases it’s better to choose a framework with minimal styles applied because it’s much easier to customize. Adding new CSS rules is a far more convenient and efficient process compared to overwriting or overriding existing ones. Plus, if you add new rules on top of the existing ones, you’ll end up with unused rules, which will increase unnecessarily the size of the CSS.

Finally, in case you’re still unsure, you can adopt a mix-and-match approach. If a particular framework doesn’t satisfy your needs, you can mix components from two or more projects. For example, you can get smaller CSS base styling from one framework, a preferred grid system from another, and more complex components from a third. Viva modularity! :)

What are your thoughts? Do any of these frameworks have any strengths and weaknesses that weren’t mentioned here? Do you think there are others that should have been listed? Let us know in the discussion below.

Comments
mawburn

I've recently been using PureCSS.io in one of my work projects, because some of the people are very apprehensive about frameworks in general and it's a nice easy transition. I have to say that it's pretty good, but it is very basic. I really miss offset grids and a few other things like centered grids. But it is pretty absic, so adjusting this manually isn't that big of a deal, there isn't really enough there to conflict with overrides.

I actually didn't even know it was by Yahoo, but that's pretty cool. Makes me feel better about choosing it. smiley

Also, it's worth noting that Skeleton recently updated for the first time in 3yrs. It's also a very good lightweight option. GetSkeleton.com is the site. The developer had actually forgotten about it when he went to work for Twitter and Medium.com. You can find that blog post here. And here is the github. Since you're basing it on Github popularity, Skeleton would actually be #5.

Vincent_Young

@kensho Is it possible to cover the accessibility of each framework? This is important and a deciding factor for many. Thanks.

louislazaris

That's a great suggestion, we'll have to look into doing a post about that in the future. Thanks!

metavurt

Nice, compact little comparison article, thank you!

I will definitely agree with @mawburn though, on the popularity thing. Skeleton should be #5 (and it's actually one my team is using on new project). Besides that, honestly, I'd veer away from "let's use it because it's popular". Just because "everyone's doing it", does not mean, in any way, that it's actually a good thing. Please see history regarding IE and css standards/html security....

+1 for accessibility check. Our clients are starting to ask us a lot of questions regarding 508 compliance. It's exciting to have a new-ish challenge, but it's super cool that people are becoming aware of it. That being said, I actually have no clue if one framework is better prepared than another in this area.

moguz

This is I am looking for, thanks, I will upgrade my site with this.

louislazaris

@mawburn Good point about Skeleton. Thanks. Only thing I'd add is that this post was focused on the popular ones from the past year, so I suppose within that constraint, Skeleton might fall behind. But definitely a decent option.

danieljevons

Great article thanks. I to have used Skeleton (before the recent update that is) and it was very easy to use as a base framework that works very well, would recommend too.

robwha

I love PureCSS. Removes the multitude of features/components that you never use that larger frameworks include. Also encourages unique designs rather than using out of the box styling. Also really great for mobile due to small size. Big ups.

rtbfreitas

Thanks Ivaylo for the comparison.

What you have to say these 3 frameworks:

  • Jeet
  • Neat (bourbon)
  • Susy?

I know these are more "grid" frameworks compared to those in the article, but what its your opinion about them?

Thanks.

Siraj_Khan

Wonderful analysis with good details -- I also posted similar one, covering more frameworks but not in this much detail smile

https://www.linkedin.com/pulse/web-development-using-css-siraj-khan

nghuuphuoc

If you look for a jQuery plugin to validate all Bootstrap, Zurb Foundation, PureCSS, Semantic UI and UIKit forms, then https://github.com/nghuuphuoc/bootstrapvalidator is for you!

Henri_Helvetica

I'd like to see this as well. But I believe that Foundation made some #a11y additions recently, and i'm sure they announced it.

Foundation 5.4 is here! You can now make the web more accessible for everyone. http://t.co/6iCH2LgEaO pic.twitter.com/YuLnNlB6wc

— ZURB Foundation ( @ZURBfoundation ) August 22, 2014

And there it is... I had this bookmarked somewhere.

HH!

chiefalchemist

I think it would be worth mentioning which of these has dedicated "template builders." For example, there are a number of 3rd party products that let you work with Bootstrap without actually having to code. In theory the code quality should be on par with hand-coding. The difference being, a builder with a UI can be the gateway to developing live wireframes, prototypes, etc.

Such tools can be helpful for designers, junior devs, etc. who are less familiar with actual coding.

kensho

Hi @rtbfreitas

Yes, Jeet, Neat, and Susy are all grid frameworks. Their role is to automate and simplify the building of website layouts, and they have some advantages compared to the grid systems used in Bootstrap, Foundation, etc.

A ready-to-use framework such as Bootstrap offers a ready-to-use grid. This means that you have to build your layout with predefined classes and default grid settings. You can change some settings but the amount of control is minimal. On the other hand a grid framework such as Jeet gives you complete design freedom in terms of more flexible syntax, custom grids, etc. In short, grid frameworks offer more flexibility and more control. Also they provide more advanced features such as asymmetric layouts. But this comes with a price. Such frameworks depend on preprocessors. In our case Stylus and Sass. So in order to use them you need to have the needed preprocessor installed and to know how to use it.

I hope this was helpful to you.

istvanujjmeszaros

I made a better customizer for Bootstrap, with color picker and some other features:
http://bootstrap-live-customizer.com/

kensho

Hey @istvanujjmeszaros your customizer looks pretty cool. Thanks for sharing.

mark2szymanski

Hey @rtbfreitas I'm glad you mentioned those grids, they're all great. I'm a long time Foundation fan, since the beginning. However, lately I've been using Jeet and loving it. I'm a sass guy, and after I stopped using the grid and column class's in my markup I'm way happier. Jeet has a really simple, yet flexible api, for using mixins in your sass.

I'd say checking out the "issues" of these frameworks on github, and how fast they get addressed, is a very important factor. These huge frameworks have a lot of moving parts. The big guys seem to always introduce new bugs on every update. Still great stuff, but building with a small grid like Jeet can save a lot of headaches.

anthonybrown

Used most of these, not for finished sites but for prototyping and quick click throughs for user stories
Most of them are bloated and needs to be striped down

anthonybrown

Susy and it's kind are, for me the best,

Owain

I think one of the underrated frameworks is INK. Came across this framework during a research my team did a couple of months back and I'm a big fan of it.

rafibomb

@Owain Thanks for the shoutout on Ink!

Also, note on the Foundation breakdown - we do have a customizer GUI http://foundation.zurb.com/develop/download.html

alinionutseba

You can also check out Blackhole, which is a SASS / CSS framework designed with modularity in mind and very semantic. It comes with a simple config file in where you can adjust all the styling stuff for your project, before and during the project.

Momentarily it has around 130kb, without its modules (such as responsive support for all its components, RTL support, CSS3 features, a module which iterates and applies CSS3 properties assigned to your elements, etc.) and has bundled as a module some of the most used UIkit components and add-ons, which are ready to be used and in style with the overall look of the framework.

I also plan to release its second version, which will make the core even smaller, breaking its basic components and helpers into separate modules, ready to be loaded when needed.

It also features a Component Manager, which is an interface showing all the components and add-ons that are available to the framework, in an organized way, and with the HTML code attached to each of the components, to fast grab the specific base code.

Although it has a lot of modules and add-ons, you can use it in its raw state, which I told you is around 130kb, unminifed.

Keep in mind this project is still in his youth though, but I will do my best to improve it over time and all the feedback is very welcomed. Thanks!

eyalb

Thanks for the info.. I have been looking at using Lost by the creator of Jeet, but unfortunately it doesn't support old Android browsers :frowning: I love how the HTML is not packed with a million class names with these type of grid systems but until old Android use drops, I'm looking for a different framework.. Has anyone had a chance to work with gridle?

Dhavalc017

Its a good comparison between the UI. However I would like to add MaterialUI by Google. Relatively new UI but its going at quite fast pace and since its a mobile first approach it can be used for the large projects which also have their apps.

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Front-end, once a week, for free.