Now nearly all kinds of CSS front-end framework to drown, really do a good job in fact, so a few. This article will contrast five of the best frameworks I think are now. Each of these frameworks has its own pros and cons and applicable application types, and you need to choose a different framework for your own needs.
For example, if your project is simple, you don't need to use a complex framework. Or, many frameworks are modular, and you can just use the modules you need, or mix the modules of different frameworks together.
The order of these frameworks that I am going to describe is related to their prevalence in GitHub. Naturally, it is from the most popular Bootstrap talk about.
Tip: In the next few weeks or months, some of the information below is likely to be outdated. such as the number of star on the GitHub, version number, and so on. If you read this article long after it has been published, don't forget it. Also, the size of the following frames refers to the size of the necessary CSS and JavaScript files that are compressed.
Bootstrap
Bootstrap is undoubtedly the front-runner for the current class libraries. It is very popular and the popularity is increasing day by day. This amazing toolset will not disappoint you, but it is not the way to build a successful site.
Author: Mark Otto and Jacob Thornton
Release Time: 2011
Latest Version: 3.3.
Popularity: Star of 75,000+ on GitHub
Description: "Bootstrap is the most popular HTML, CSS, and JavaScript framework that can be used to open responsive, mobile-limited Web projects." ”
Core Concepts/principles: responsiveness and mobility first
Frame size: 145 KB
Preprocessor: Less and Sass
Response Type: Yes
Modularity: Yes
Hands-on module/layout: Yes
Font icon: Half glyphicon icon
Plugins/extensions: None, but there are a large number of Third-party Plug-ins
Featured components: Super Large screen design
Documentation: Perfecting
Customization: basic GUI customization; But you need to manually enter the color value because the color selector is not supported
Browser support: Firefox, Chrome, Safari, ie8+ (IE8 words need to use respond.js)
Open Source protocol: MIT
Bootstrap Use Experience
Bootstrap's biggest advantage is that it's very popular. Technically, it's not better than the other in the column framework. It's just that it has a lot of resources (articles, tutorials, Third-party plug-ins and extensions, and theme constructors, and so on), more than the other four frames. Simply put, Bootstrap is everywhere. This is why we continue to use it.
Tip: When I say "featured" components, this feature is for the frameworks currently listed.
Foundation (ZURB)
Foundation is the second largest player in the field. Having a company like Zurb behind it has to say that it does have a very solid foundation. In short, Foundation is used by many large websites. including Facebook, Mozilla, Ebay, Yahoo and National Geographic, and so on.
Author: zurb
Release Time: 2011
Latest Version: 5.4.7
Popularity: Star of 18,000+ on GitHub
Introduction: "The world's most advanced response-style front-end framework"
Core idea/principle: responsive, mobile first, semantic
Frame Size: 326 KB
Preprocessor: Sass
Response Type: Yes
Modularity: Yes
Hands-on module/layout: Yes
Font icon: Foundation font icon
Plugins/Extensions: there are
Featured components: Icon Bar, clearing Lightbox, Flex video, keystrokes, joyride, Pricing Tables
Documentation: Perfect, there are many other resources
Custom: GUI-free custom tools that need to be manually modified by themselves
Browser support: Chrome, Firefox, Safari, Ie9+;ios, Android, Windows Phone 7+
Open Source protocol: MIT
Foundation Use Experience
Foundation is indeed a very professional framework with business support, training, and outsourcing. It also provides a lot of resources to help you learn and use the framework more quickly and easily.
Semantic UI
The semantic UI has been trying to make Web site construction more semantic. It leverages the principles of natural language, making it easier to read and understand code.
Author: Jack Lukic
Release Time: 2013
Latest Version: 1.2.0
Popularity: Star of 12,900+ on GitHub
Introduction: "A UI module framework, based on some useful principles from the natural language." ”
Core idea/principle: semantic, tag ambivalence, response type
Frame size: 552 KB
Preprocessor: Less
Response Type: Yes
Modularity: Yes
Hands-on module/layout: None
Font icon: Font Awesome
Plugins/Extensions: None
Featured components: Divider, Flag, Rail, Reveal, step, advertisement, card, Feed, Item, statistic, dimmer
Rating, Shape
Document: Very good. Semantic has well-organized documentation plus a separate Web site to help users get started, customize, and create themes.
Custom: GUI-free custom tools that need to be manually modified
Browser support: Firefox, Chrome, Safari, ie10+ (IE9 need prefix support), Android 4, Blackberry 10
Open Source protocol: MIT
Semantic UI Usage Experience
In these frameworks, semantic is the most revolutionary feature of the most complete framework. In order to make the style logically clear and semantic, the structure of the entire framework and naming conventions are superior to other frameworks.
Pure (Yahoo!)
Pure is a lightweight, modular framework-written using pure CSS-and can be combined or separated using Pure modules, depending on your needs.
Author: Yahoo
Release Time: 2013
Current version: 0.5.0
Popularity: Star of 9,900+ on GitHub
Introduction: A series of small, responsive CSS modules that can be used in each of your projects. ”
Core Ideas/principles: SMACSS, minimalism
Frame size: KB
Preprocessor: None
Response Type: Yes
Modularity: Yes
Hands-on module/layout: Have
Font icon: None, you can use font Awesome
Plugins/Extensions: None
Featured components: None
Documentation: Good
Customization: The base GUI skin Construction tool
Browser support: The latest Firefox, Chrome, Safari; ie7+, IOS 6.x, 7.x; Android 4.x
Kaiyuan Protocol: Yahoo! Inc. BSD
Pure Use Experience
Pure only offers a minimalist style that allows you to start your project from scratch. This framework is very consistent for users who do not need a full stack framework and require only certain components to be added to their own projects.
Uikit (Yootheme)
Uikit contains a list of simple and easy-to-use components that are easy to customize. Although it is not popular with other frameworks in the column, it provides considerable functionality and quality.
Author: yootheme
Release Time: 2013
Current version: 2.13.1
Popularity: Star of 3,800+ on GitHub
Introduction: "Lightweight, modular front-end framework, can be used to quickly build a powerful web interface"
Core concept/principle: responsive, mobile first
Frame size: 118 KB
Preprocessor: Less, Sass
Response Type: Yes
Modularity: Yes
Hands-on module/layout: Yes
Font icon: Font Awesome
Plugins/Extensions: there are
Featured components: Article, Flex, Cover, HTML Editor
Documentation: Good
Customization: Advanced GUI Customization Tools
Browser support: Chrome, Firefox, Safari, ie9+
Kaiyuan protocol: MIT
Uikit Use Experience
Uikit is very successful in WordPress theme. It provides a powerful and flexible customization mechanism that can be manually modified or implemented using the GUI customization tools it provides.
How do I choose a frame?
Finally, I'll give some advice on choosing a framework. Here are some of the options you need to focus on:
Is this framework popular enough? Popular means more people are involved in the project, so there are more articles and tutorials in the community, more examples and Web sites in the real world, there will be more third-party extensions, of course, to better integrate with the real web development projects. The extreme popularity means that this framework can withstand the test of the future;
A framework with a large community is the least likely to be abandoned;
Is the framework still being developed actively? A good framework needs to constantly upgrade itself to keep up with the latest WEB technologies, especially for mobile;
Is the framework ripe? If a framework is not fully used and tested in real projects, it is only possible to try and play, and it is not a wise choice to use a professional project;
Does the framework have a comprehensive documentation? Finally good can have the perfect document, this can speed up the process of learning;
What is the level of detail of the framework? The point here is that a more generic framework is easier to use than a framework with a high level of detail. In many cases, the best thing to do is to choose a frame with the least style, because it's easier to customize. Adding new CSS rules is much more convenient than having existing style rules for replication. And, if you add a new style to an existing style, you end up with useless style rules that will increase the size of the CSS file.
Finally, if you're still unsure, you can use a mix-and-match approach. If a framework doesn't meet your needs, you can mix components from other frameworks. For example, you can use a streamlined CSS base style for a frame, use a grid system from another frame, and a more complex module from a third framework. Long Live modularity!:)
What do you think? What other strategies or weaknesses are there in these frameworks that are not mentioned here? What other frameworks do you think should be listed here? You can reply to us below.