Most Popular Front end frame contrast bootstrap/foundation by zurb/semantic ui/pure by Yahoo!/uikit by Yootheme

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!:)