The 5 Most Popular Frontend Frameworks of 2014 Compared

Originally published at: http://www.sitepoint.com/5-most-popular-frontend-frameworks-compared/

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.)

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.

Continue reading this article on SitePoint

4 Likes

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.

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

2 Likes

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

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.

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

@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.

1 Like

thanks.

Nice work
thanks

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.

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.

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.

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

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!

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!

1 Like

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.

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.

I made a better customizer for Bootstrap, with color picker and some other features:

1 Like

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

1 Like

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.