5 Most popular front-end frames in 2014 years

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.