Today's era of many CSS front-end framework is coming, but the real good is only a handful.
In this article we will compare the five frameworks that I think are best, each with its own pros and cons and specific areas of application that allow you to choose the right framework for your specific project needs. For example, if your project is simpler, you don't need a complex framework, and many of the options are modular, allowing you to use only the components you need, or mix components with different frameworks.
The framework we want to discuss is based on its popularity on the GitHub, first of all, the most popular, of course: Bootstrap.
(Note: Some of the information below will be obsolete in the weeks and months ahead, such as the number of GitHub (stars) and versions, so if you read this article long after it is published, you need to be aware of that.) Also, be aware that the frame size minimizes the necessary CSS and JS files. )
1. Bootstrap
Bootstrap is the undisputed boss of the various frameworks in vogue today. Given its growing popularity every day, it is certain that this wonderful tool will never disappoint you and it will not leave you until you successfully build a website.
Creator: Mark Otto and Jacob Thornton.
Post: 2011
Current version: 3.3.1
Popularity: There are 75,000+ stars on the GitHub
Description: "Bootstrap is the most popular HTML, CSS and JavaScript Responsive Development framework, the first mobile project developed on the web."
Core Concepts/principles: RWD and Mobility first
Frame size: 145 KB
Preprocessor: Less and Sass
Response: Yes
Modular: Yes
Start template/Layout: Yes
Icon settings: Glyphicons halflings Set
Add-on/plugin: no bundled plugins, but many Third-party plug-ins are available.
Unique components: Jumbotron
Documentation: Good
Customization: the basic GUI customizer. Unfortunately, you need to manually enter the color value because no color selector is available.
Browser support: Firefox, Chrome, Safari, ie8+ (you need respond.js for IE8)
License: MIT
Bootstrap description
The main advantage of Bootstrap is that it is very popular. Technically, it's not necessarily better than the other frameworks listed this time, but the resources it provides (articles and tutorials, Third-party plug-ins and extensions, theme developers, and so on) are more than the sum of the other four frameworks. In short, Bootstrap is everywhere. This is the main reason why people continue to choose it.
(Note: "Unique components" means that they are unique compared to the other frameworks mentioned here.) )
2. Foundation by Zurb
Foundation is the second largest of these frameworks, supported by a company as powerful as Zurb, which is really powerful, yes, foundation. After all, Foundation has been put into use on many large Web sites, including Facebook, Mozilla, Ebay, Yahoo! and National Geographic, among others.
Created by: Zurb
Post: 2011
Current version: 5.4.7
Popularity: There are 18,000+ stars on the GitHub
Description: "The best responsive Front-End framework in the world"
Core Concepts/principles: RWD, Cell phone priority, semantic
Frame size: 326KB
Preprocessor: Sass
Response: Yes
Modular: Yes
Start template/Layout: Yes
Icon settings: Foundation icon Fonts
Attach/plugin: Yes
Unique components: Icon Bar, clearing Lightbox, Flex video, keystrokes, joyride, Pricing Tables
Documentation: Good, and a lot of additional resources are available.
Customization: No GUI editor, only manual customization.
Browser support: Chrome, Firefox, Safari, ie9+; IOS, Android, Windows Phone 7+
License: MIT
Foundation description
Foundation is a truly professional framework for providing business support, training, and consulting. It also provides a lot of resources to help you learn and use the framework faster and easier.
3. Semantic UI
The semantic UI has worked hard over the years to build a Web site in a more semantic way. It uses the principles of natural language to make the code more readable and easier to understand.
Created by: Jack Lukic
Post: 2013
Current version: 1.2.0
Popularity: There are 12,900+ stars on the GitHub
Description: "Framework of UI components based on natural language effective principles"
Core concept/principle: semantics, the contradiction of the label, the response type
Frame size: 552KB
Preprocessor: Less
Response: Yes
Modular: Yes
Start template/Layout: No
Icon settings: Font Awesome
Attach/plugin: Yes
Unique components: divider, Flag, Rail, Reveal, step, advertisement, card, Feed, Item, statistic, dimmer, Rating, Shape.
Document: Very good. Semantic provides a good organization document, as well as an introductory guide to customizing and creating a separate site for the theme.
Customization: No GUI customizer, only manual customization.
Browser support: Firefox, Chrome, Safari, ie10+ (IE9 with browser prefix only), Android 4, Blackberry 10
License: MIT
Semantic UI Description
Semantic is the most innovative and functionally comprehensive framework discussed here. In the framework of the overall structure and naming conventions, but also with clear logic and semantic classes beyond the other framework.
4. Pure by Yahoo!
Pure is a lightweight, modular framework, written in pure CSS, that includes a number of components that you can use together or independently, depending on your needs.
Created by: Yahoo
Post: 2013
Current version: 0.5.0
Popularity: There are 9,900+ stars on the GitHub
Description: "A small and responsive CSS module that you can use in each Web project"
Core Concepts/principles: SMACSS, minimalist.
Frame size: KB
Preprocessor: None
Response: Yes
Modular: Yes
Start template/Layout: Yes
Icon settings: No, you can use the font awesome instead
Additional/plugins: None
Unique components: None
Documentation: Good
Customization: the basic GUI customizer.
Browser support: Firefox's latest version, Chrome, Safari; ie7+; IOS 6.x, 7.x; Android 4.x
License: MIT
Pure description
Pure only provides a basic style to make your project have a clean start. It is ideal for people who do not need a fully functional framework at work to have specific components.
5. Uikit by Yootheme
Uikit is a concise framework that is easy to use and easy to customize components. Although it is not as popular as other competitors, it provides the same functionality and quality.
Created by: Yootheme
Post: 2013
Current version: 2.13.1
Popularity: There are 3,800+ stars on the GitHub
Description: "A lightweight and modular front-end framework for fast development and powerful web interfaces." ”
Core concept/principle: RWD, mobile priority.
Frame size: 118 KB
Preprocessor: Less, Sass
Response: Yes
Modular: Yes
Start template/Layout: Yes
Icon settings: Font Awesome
Attach/plugin: Yes
Unique components: Article, Flex, Cover, HTML Editor
Documentation: Good
Customization: Excellent GUI customizer.
Browser support: Chrome, Firefox, Safari, ie9+
License: MIT
Uikit description
Uikit has been successfully used on many WordPress themes, providing a flexible, powerful customization mechanism that can be manually operated through a GUI customizer.
Which frame suits you better?
Finally, in choosing the right framework, let me give you some advice, and here are some important things to note:
Is there enough popularity in this framework? Greater popularity means more people are involved in the project, so there will be more tutorials and articles from the community, more real cases/websites, more Third-party extensions, and better integration with related web development products. The huge popularity also means that the framework is not too outdated, after all, a framework with large groups is unlikely to be abandoned.
Is this framework still being actively developed? A good framework is the need to integrate the latest networking technologies, especially on mobile technologies.
Is this framework ripe? If a framework is not yet used in actual projects and tests, then you can play it at will, but it is unwise to rely on it for professional projects.
Does this framework provide good documentation? Good documentation always facilitates your learning process.
How high is the specificity of this framework? The point here is that it is much easier to use a more generic framework than a highly specific framework. In most cases, it's a good idea to choose a minimal style frame because it's easier to customize. Adding new CSS rules is a more convenient and efficient process than overriding or overwriting existing rules. In addition, if you add new rules to the header of an existing frame, you may leave some unused rules that will increase the size of unnecessary CSS files.
Finally, if you are still unsure, you can use a mix-and-match approach. If a specific framework does not meet your needs, you can mix components from two or more items. For example, you can get a smaller CSS style base from one frame and get an excellent grid system from another frame, and then get more complex components from the third frame. Long Live modularity!:)