There’s a deluge of CSS front-end frameworks available nowadays. But the number of really good ones can be narrowed down to just a few. In this article, I’ll compare what I think are the five best front-end 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’s 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 front-end frameworks.

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

Note that some of the information below will go out of date from the time of publication – such as GitHub stars and 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.

1. Bootstrap

Bootstrap is the undisputed leader among the available front-end 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.

Creators: Mark Otto and Jacob Thornton.

Mark Otto and Jacob Thornton. Released: 2011

2011 Current version: 4.*.*

4.*.* Popularity: 126,202 stars on GitHub

126,202 stars on GitHub Description: “Sleek, intuitive, and powerful front-end framework for faster and easier web development.”

“Sleek, intuitive, and powerful front-end framework for faster and easier web development.” Core concepts/principles: RWD and mobile first.

RWD and mobile first. Framework size: 592 KB (precompiled zip folder)

592 KB (precompiled zip folder) Preprocessor: Sass

Sass Responsive: Yes

Yes Modular: Yes

Yes Starting templates/layouts: Yes

Yes Icon set: Not included

Not included Extras/Add-ons: None bundled, but many third-party plugins are available.

None bundled, but many third-party plugins are available. Unique components: Jumbotron, Card

Jumbotron, Card Documentation: Excellent

Excellent Customization: Option for separate files for Grid system and Reboot, easy customization with Sass; no online customizer

Option for separate files for Grid system and Reboot, easy customization with Sass; no online customizer Browser support: Latest releases of Firefox, Chrome, Safari, IE810-11-Microsoft Edge.

Latest releases of Firefox, Chrome, Safari, IE810-11-Microsoft Edge. 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 plugins and extensions, theme builders, and so on) than the other four front-end frameworks combined. In short, Bootstrap is everywhere. And this is the main reason people continue to choose it.

If you’d like to learn more about Bootstrap, check out Your First Week With Bootstrap, Bootstrap: Related Tools & Skills, and 8 Practical Bootstrap Projects.

Note: By saying “unique components”, I mean that they’re unique compared only to the front-end frameworks mentioned in this list.

2. Foundation by ZURB

Foundation is the second big player in this front-end framework 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.

Creators: ZURB

ZURB Released: 2011

2011 Current version: 6

6 Popularity: 27, 497 stars on GitHub

27, 497 stars on GitHub Description: “The most advanced responsive front-end framework in the world”

“The most advanced responsive front-end framework in the world” Core concepts/principles: RWD, mobile first, semantic

RWD, mobile first, semantic Framework size: 233 KB

233 KB Preprocessors: Sass

Sass Responsive: Yes

Yes Modular: Yes

Yes Starting templates/layouts: Yes

Yes Icon set: Foundation Icon Fonts

Foundation Icon Fonts Extras/Add-ons: Yes

Yes Unique components: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables

Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables Documentation: Good, with many additional resources available.

Good, with many additional resources available. Customization: Basic GUI customizer

Basic GUI customizer Browser support: Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+

Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+ License: MIT

Notes on Foundation

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

If you’d like to learn Foundation, check out our book: Jump Start Foundation.

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.

Creator: Jack Lukic

Jack Lukic Released: 2013

2013 Current version: 2.3

2.3 Popularity: 42,162 stars on GitHub

42,162 stars on GitHub Description: “A UI component framework based around useful principles from natural language”

“A UI component framework based around useful principles from natural language” Core concepts/principles: Semantic, tag ambivalence, responsive

Semantic, tag ambivalence, responsive Framework size: 1.8 MB

1.8 MB Preprocessors: Less

Less Responsive: Yes

Yes Modular: Yes

Yes Starting templates/layouts: Yes, some basic starter templates are offered

Yes, some basic starter templates are offered Icon set: Font Awesome

Font Awesome Extras/Add-ons: No

No Unique components: Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape

Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape Documentation: Very good, offering very well-organized documentation, plus a separate website that offers guides for getting started, customizing and creating themes

Very good, offering 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

No GUI customizer, only manual customization Browser support: Firefox, Chrome, Safari, IE10+ (IE9 with browser prefix only), Android 4, Blackberry 10

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 front-end 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.

Creator: Yahoo

Yahoo Released: 2013

2013 Current version: 1.0.0

1.0.0 Popularity: 18,825 stars on GitHub

18,825 stars on GitHub Description: “A set of small, responsive CSS modules that you can use in every web project”

“A set of small, responsive CSS modules that you can use in every web project” Core concepts/principles: SMACSS, minimalism

SMACSS, minimalism Framework size: 3.8 KB minified and gzipped

3.8 KB minified and gzipped Preprocessors: None

None Responsive: Yes

Yes Modular: Yes

Yes Starting templates/layouts: Yes

Yes Icon set: None; you can use Font Awesome instead

None; you can use Font Awesome instead Extras/Add-ons: None

None Unique components: None

None Documentation: Good

Good Customization: Basic GUI Skin Builder

Basic GUI Skin Builder Browser support: Latest versions of Firefox, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x

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.

Creator: YOOtheme

YOOtheme Released: 2013

2013 Current version: 3.0.0

3.0.0 Popularity: 12,821 stars on GitHub

12,821 stars on GitHub Description: “A lightweight and modular front-end framework for developing fast and powerful web interfaces”

“A lightweight and modular front-end framework for developing fast and powerful web interfaces” Core concepts/principles: RWD, mobile first

RWD, mobile first Framework size: 374 KB (zipped folder)

374 KB (zipped folder) Preprocessors: Less, Sass

Less, Sass Responsive: Yes

Yes Modular: Yes

Yes Starting templates/layouts: Yes

Yes Icon set: UIkit comes with its own SVG icon system and library with a growing number of outline icons

UIkit comes with its own SVG icon system and library with a growing number of outline icons Extras/Add-ons: Yes

Yes Unique components: Article, Flex, Cover, HTML Editor

Article, Flex, Cover, HTML Editor Documentation: Good

Good Customization: Advanced GUI Customizer only available in version 2 (previous version)

Advanced GUI Customizer only available in version 2 (previous version) Browser support: Chrome, Firefox, Safari, IE9+

Chrome, Firefox, Safari, IE9+ License: MIT

Notes on UIkit

UIkit is successfully used in many WordPress themes. It offers a flexible and powerful manual customization mechanism. (Previous version of the framework also offered an advanced GUI customizer.)

What’s the Right Front-end 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.

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

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

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

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! :)

Finally, it should be mentioned that nowadays, with Flexbox and Grid Layout having good support in the latest versions of major browsers, it’s easier than ever to build complex layouts. This fact alone might encourage more developers to leave the crutch of front-end frameworks and code their layouts from scratch.

What are your thoughts? Do any of these front-end 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.

To dive deeper into the top two front-end frameworks, try Bootstrap: A SitePoint Anthology #1 and Jump Start Foundation.

This article was updated in July 2018 to reflect the current status of the features present in the front-end frameworks listed below.