HTML & CSS
Article
By Ivaylo Gerchev

The 5 Most Popular Frontend Frameworks of 2017 Compared

By Ivaylo Gerchev

This article was updated on May 17, 2017, to reflect the current status of the features present in the front-end frameworks listed below.

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

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.7
  • Popularity: 111,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: 154 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:6.3.1
  • Popularity: 25,400 stars on GitHub
  • Description: “The most advanced responsive front-end framework in the world”
  • Core concepts/principles: RWD, mobile first, semantic.
  • Framework size: 197.5 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: Basic GUI customizer similar to the Bootstrap Customizer tool.
  • 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: 2.2
  • Popularity: 34,762 stars on GitHub
  • Description: “A UI component framework based around useful principles from natural language.”
  • Core concepts/principles: Semantic, tag ambivalence, responsive.
  • Framework size: 806 KB
  • Preprocessors: Less
  • Responsive: Yes
  • Modular: Yes
  • Starting templates/layouts: Yes, some basic starter templates are offered
  • 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.6.2
  • Popularity: 16,637 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: 16 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: 3.0.0
  • Popularity: 9,422 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: 326.9 KB (384.4 KB if you include uikit-icons.min.js for the functionality related to SVG icons)
  • Preprocessors: Less, Sass
  • Responsive: Yes
  • Modular: Yes
  • Starting templates/layouts: Yes
  • Icon set: UIkit comes with its own SVG icon system and library with a growing number of outline icons.
  • Extras/Add-ons: Yes
  • Unique components: Article, Flex, Cover, HTML Editor
  • Documentation: Good
  • Customization: Advanced GUI Customizer only available in version 2 (previous version)
  • 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 manual customization mechanism (previous version of the framework also offered an advanced 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.

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 latest versions of major browsers, it’s easier than ever to build complex layouts. This fact alone might encourage more devs to leave the crutch of front-end frameworks and code their layouts from scratch.

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.

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

  • P.K. Hunter

    Where’s the comparison? The last few bullet points? I was hoping for a more in depth article comparing the code sphagehtti of bootstrap to the sensible mark up of Foundation or Semantic. And a summary of a “comparison” in a table.

    • J.M. de Oliveira, Jr

      I have to agree

    • Exactly.

    • LizzyBiz

      This my friends is what you call a bait and switch. Boo.

      • P.K. Hunter

        Thanks for sharing the official word. Meanwhile if there’s any content of substance, there are many ears below our banter :)

      • AdrianP

        As many other s*** going online nowadays. What do you want? There is no rule on the Internet. Anybody can publish anything. And it is good to be free. My advice: Say: “S***, they have me one more time and close the page.” :)

    • Maria Antonietta

      It seems that by referring to Bootstrap as using ‘spaghetti code’ you’ve pretty much made up your mind with regard to any comparison. What do you exactly mean by that? The most innovative iteration of Bootstrap, version 4, would have withstood the comparison with the latest version of Foundation very well. Unfortunately, Bootstrap 4 is still in the alpha stage at the present time, and this fact has been decisive in not having it included in this list. Also, given the circumstances, a code comparison between Bootstrap 3 and Foundation 6 wouldn’t have been too fair on Bootstrap, at least in my view.

  • Foundation has been a lifesaver for our team. Super easy to work with.

  • Ryh

    + for Material Design Lite by Google. It’s well thought and backed up by a giant.

    • hanakin

      not anymore…abandoned per usual practice!

    • Materialize.css is also worth a try

  • wdiechmann

    5 most popular!? Materializecss has approx 3 times that many stars on GitHub then UI Kit – and Material Design is, to my knowledge, rather posh. Actually – Materializecss ties Foundation on GitHub stars!

    I’m sorry, Ivaylo Gerchev, but this post is like your motto – only half the truth (the minimum effort part seems real enough, to me – but the maximum effect part; not so much)

    • Maria Antonietta

      I also like Materialize, however, it’s too tied to Material Design, which makes overriding those design decisions rather time-consuming. Material Design is an attractive and trendy look, but for those who are not interested in replicating that specific look, using Materialize would be the wrong choice.

      • wdiechmann

        I believe the title read: The 5 Most Popular Frontend Frameworks… – it did not (at least not in the heading) exclude frameworks tied to design regime XYZ. But point taken – so perhaps Ivaylo should reword his title: Listing Bootstrap, Foundation and 3 other frameworks :P

        • Maria Antonietta

          Even better, why not take away the number 5 from the title altogether and just keep adding frameworks (there is always a good reason to include one more item). Thank you for suggesting Materialize :)

  • Carlos Eduardo de Souza

    We use Foundation at Coopers, it has an excellent “foundation” and flexibility. Also, the team at Zurb is aways improving it over time.

  • Tom

    I’m finding the comments a bit more enlightening than this article. I’ve been waiting for Bootstrap 4, which has been in alpha stage for more than a year now, for an upcoming project, but may look into Foundation and Semantic UI. I’ve never heard of Material Design by Google until I saw the comment by Ryh, may check that out, too.

  • The Informer

    They’re all good and if you’re like me, you’ll want to get to know them all and use them on a best fits the project basis.

    also check out flexbox. the next version of bootstrap is based on this. wow

  • rowild

    inuitcss (with ITCSS approach)

  • hanakin

    I would also argue that none of these are frameworks but rather UI libraries…further more justification based on popularity? Also would agree this is not a comparison but rather info about 5 projects and personnel opinions…

    • Maria Antonietta

      You can call them UI libraries, but also front-end frameworks is correct. Since it’s come out, Bootstrap has been calling itself a ‘framework’, and its banner rather modestly says: ‘Bootstrap is the most popular HTML, CSS, and JS framework in the world …’. Also, on the Foundation website you read: ‘The most advanced responsive front-end framework in the world.’ I’d say it’s not far-fetched to use the word ‘framework’ here.

  • HMS10

    Zurb Foundation has many solutions out of the box compared to Bootstrap. I do not know why Zurb Foundation do not get love like Bootstrap

    • Maria Antonietta

      Foundation gets a lot of love, although your claim about out of the box solutions sounds a bit generic.

  • Simon Olsen

    Want to know which one is the best? Foundation for Sites by ZURB. Fantastic, easy-to-use docs (super easy to use, now with video walkthroughs). Use classes for controlling the grid or use Sass mixins (one class, controlled with a @include – no more small-12 medium-4 or col-xs-12 col-md-4 etc). Easily centre incomplete rows (Bootstrap can’t do this and you’ll be amazed at how often a row with 5 equal-width divs is required!). Sass mixins can control most components, so less classes in your HTML (if you want that). Includes modern technologies like Flexbox – with new technologies being added all the time. A really great community and forum for very specific solutions. Awesome email updates from the ZURB Team. ALSO, Foundation also has Foundation for Emails – HTML email template framework. Working with many of the same principles as the Sites framework. No brainer. ZURB Foundation.

  • Same overexposed players

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