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 in the coming weeks and months – 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.
- Released: 2011
- Current version: 4.0
- Popularity: 121,374 stars on GitHub
- Description: “Sleek, intuitive, and powerful front-end framework for faster and easier web development.”
- Core concepts/principles: RWD and mobile first.
- Framework size: 578 KB (precompiled zip folder)
- Preprocessor: Sass
- Responsive: Yes
- Modular: Yes
- Starting templates/layouts: Yes
- Icon set: Not included
- Extras/Add-ons: None bundled, but many third-party plugins are available.
- Unique components: Jumbotron, Card
- Documentation: Excellent
- Customization: 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.
- 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.
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
- Released: 2011
- Current version:6
- Popularity: 26,956 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, with many additional resources available.
- Customization: Basic GUI customizer
- Browser support: 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.
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
- Released: 2013
- Current version: 2.2
- Popularity: 39,364 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, 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 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.
Continue reading %The 5 Most Popular Front-end Frameworks Compared%
by Ivaylo Gerchev via SitePoint
No comments:
Post a Comment