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