Top 5 Most Popular Front-end Frameworks

There’s a deluge of CSS front-end frameworks out there lately. but the quantity of specific ones is narrowed all the means right down to merely a handful of. throughout this text, I’ll compare what I feel are the five best front-end frameworks out there lately.

Each framework has its strengths and weaknesses, and specific areas of application, allowing you to choose to support the needs of a particular project. as associate example, if your project is straightforward, there’s no need to use a complicated framework. Also, many of the alternatives ar normal, allowing you to use exclusively the elements you'd like, or even mix elements from fully completely different front-end frameworks.

The front-end frameworks I’m attending to explore ar given supported their GitHub quality, beginning with the foremost widespread, which is, of course, Bootstrap.

Note that variety of the data below will depart of go back the time of publication – like GitHub stars and version numbers – so bear in mind of this if you’re reading this text long once the publication date. jointly note that the framework sizes ar the minified sizes of the desired CSS and JavaScript files.

1. Bootstrap

Bootstrap is an undisputed leader among front-end frameworks lately. Given its large quality, that continues to be growing on every day, you will confirm that this wonderful toolkit won’t fail you, or leave you alone on your due to building thriving websites.

• Creators: Mark Otto and Jacob designer.
• Released: 2011
• Current version: four.*.*
• Popularity: 126,202 stars on GitHub
• Core concepts/principles: RWD and mobile-first.
• Framework size: 592 computer memory unit (precompiled nothing folder)
• Preprocessor: Sass
• Responsive: affirmative
• Modular: affirmative
• Starting templates/layouts: affirmative
• Icon set: Not basined
• Extras/Add-ons: None bundled, but many third-party plugins are out there.
• Unique components: Jumbotron, Card
• Documentation: wonderful
• Customization: the chance for separate files for Grid system and resuscitate, simple customization with Sass; no on-line customizer
• Browser support: Latest releases of Firefox, Chrome, Safari, IE810-11-Microsoft Edge.
• License: MIT

Notes on Bootstrap
The main strength of Bootstrap is its large quality. Technically, it’s not primarily on top of the others at intervals the list, but it offers a lot of resources (articles and tutorials, third-party plugins and extensions, theme builders, therefore on) than the other four front-end frameworks combined. In short, Bootstrap is everywhere. And this could be the foremost reason people still choose it.

If you’d like to be told extra concerning Bootstrap, examine Your First Week With Bootstrap, Bootstrap: connected Tools & Skills, and eight smart Bootstrap comes.

Note: By language “unique components”, I mean that they’re distinctive compared exclusively to the front-end frameworks mentioned throughout this list.

2. Foundation by ZURB

Foundation is the second immense player throughout this front-end framework comparison. With a solid company like ZURB backing it, this framework options a very durable … well … foundation. After all, Foundation is used on many immense websites alongside Facebook, Mozilla, eBay, Yahoo! and National Geographic, to decide a handful of.

• Creators: ZURB
• Released: 2011
• Current version:6
• Popularity: twenty-seven, 497 stars on GitHub
• Core concepts/principles: RWD, mobile 1st, semantic
• Framework size: 233 computer memory unit
• Preprocessors: Sass
• Responsive: affirmative
• Modular: affirmative
• Starting templates/layouts: affirmative
• Icon set: Foundation Icon Fonts
• Extras/Add-ons: affirmative
• Unique components: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, analysis Tables
• Documentation: sensible, with many further resources out there.
• Customization: Basic interface customizer
• Browser support: Chrome, Firefox, Safari, IE9+, iOS, Android.
• License: MIT

Notes on Foundation
Foundation could also be a very ball-hawking front-end framework with business support, training, and consulting offered. It jointly provides many resources to help you learn and use the framework faster and easier.

3. Semantic UI

Semantic UI is AN in-progress effort to create building websites far more linguistics. It utilizes tongue principles, therefore creating the code far more legible and apprehensible.

• Creator: Jack Lukic
• Released: 2013
• Current version: 2.3
• Popularity: 42,162 stars on GitHub
• Core concepts/principles: Semantic, tag ambivalence, responsive
• Framework size: 1.8 MB
• Preprocessors: Less
• Responsive: Yes
• Modular: Yes
• Starting templates/layouts: affirmative, some basic starter templates are offered
• Icon set: Font Awesome
• Extras/Add-ons: No
• Documentation: excellent, 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
• 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 front-end framework among those mentioned here. The overall structure of the framework and therefore the naming conventions, in terms of clear logic and semantics of its classes, also surpasses the others.

4. Pure, by Yahoo!

Pure could be a light-weight, modular framework — written in pure CSS — that includes components that can be used together or separately depending on your needs.

• Creator: Yahoo
• Released: 2013
• Current version: 1.0.0
• Popularity: 18,825 stars on GitHub
• Core concepts/principles: SMACSS, minimalism
• Framework size: 3.8 KB minified and gzipped
• Preprocessors: None
• Responsive: Yes
• Modular: Yes
• Starting templates/layouts: Yes
• Icon set: None; you'll use Font awe-inspiring instead
• Extras/Add-ons: None
• Documentation: Good
• Customization: Basic GUI Skin Builder
• Browser support: Latest versions of Firefox, Chrome, Safari; IE7+; iOS vi.x, 7.x; robot four.x
• License: Yahoo! Inc. BSD

Notes on Pure
Pure offers solely bare-bones designs for a clean begin to your project. It’s ideal for those that don’t want a full-featured framework however solely specific parts to incorporate 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
• Released: 2013
• Current version: 3.0.0
• Popularity: 12,821 stars on GitHub
• Core concepts/principles: RWD, mobile-first
• Framework size: 374 KB (zipped folder)
• Preprocessors: Less, Sass
• Responsive: Yes
• Modular: Yes
• Starting templates/layouts: Yes
• Icon set: UIkit comes with its 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 interface Customizer solely accessible in version a pair of (previous version)
• Browser support: Chrome, Firefox, Safari, IE9+
• License: MIT

Notes on UIkit

UIkit is successfully used in many WordPress themes. It offers a versatile and powerful manual customization mechanism. (Previous version of the framework conjointly offered a complicated interface customizer.)

What’s the Right Front-end Framework for You?

In the end, let ME provide you with some tips for selecting the proper framework. Here are some of the more important things to watch out for:

• Does the framework have enough popularity? Bigger quality means that a lot of folks concerned within the project, and thus, a lot of tutorials and articles from the community, more real-world examples/websites, more third-party extensions, and better integration with relative web development products. Great quality conjointly means the framework is a lot of future-proof: a framework with a lot of bigger|an even bigger} community around it's much less possible to be abandoned.

• Is the framework under active development? A good framework has to level up perpetually with the most recent internet technologies, particularly with regards to mobile.

• Has the framework reached maturity? If a selected framework isn't however used and tested in real-world comes, 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 usually fascinating to facilitate the educational method.

• What is the framework’s level of specificity? The main purpose here is that a lot of generic frameworks is way easier to figure with, in comparison to a framework with high-level specificity. In most cases, it’s higher to settle on a framework with token designs applied, because it’s much easier to customize. Adding new CSS rules may be a much more convenient and economical method compared to overwriting or dominant existing ones. Plus, if you add new rules on high of the present ones, you’ll find yourself with unused rules, which can increase unnecessarily the dimensions of the CSS.