Comparison of the most Popular front-end development frameworks

Source: Internet
Author: User

Today, a variety of development frameworks abound. Which of the last year was more interesting to developers? Not long ago, cloud the 2014 most popular 6 front-end development frameworks based on the popularity of GitHub, and compared them, hoping to help needy friends choose the right front-end frame.

1. Bootstrap

Bootstrap is undoubtedly the leader of today's framework. He is not only popular, the daily user volume is also growing. You can trust that this tool will not disappoint you, and you can use it alone to make your own pages.

    • Created by: Mark Otto and Jacob Thornton
    • Posted: 2011
    • Current version: 3.3.1
    • Popularity: 75,000+ stars on GitHub
    • Description: "Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on The web. "
    • Core Concepts/principles: RWD and mobile first
    • Frame size: 145 KB
    • Preprocessor: Less and Sass
    • Response: Yes
    • Modularity: Yes
    • Start template/profile: Yes
    • Icon set: glyphicons
    • Other plugins: No bindings, there are other three-party plug-ins
    • Unique components: Jumbotron
    • Documentation: Good
    • Customization: Basic GUI customization, but manual modification is required because there is no color picker tool.
    • Browser support: Firefox, Chrome, Safari, ie8+ (IE8 requires respond.js)
    • Authorization: MIT

2. Foundation by Zurb

The foundation is second in comparison to Bootstrap, but that does not mean it is unpopular. Zurb in the back strong support, make Foundation more powerful! Foundation is used by major websites, such as Facebook, Mozilla, Ebay, Yahoo, National Geographic website and so on.

    • Created by: Zurb
    • Posted: 2011
    • Current version: 5.4.7
    • Popularity: 18,000+ stars on GitHub
    • Description: "The most advanced responsive front-end framework in the world"
    • Core Concepts/principles: RWD, Mobile first, Semantic
    • Frame Size: 326 KB
    • Preprocessor: Sass
    • Response: Yes
    • Modularity: Yes
    • Start stencil/Layout: Yes
    • Icon set: Foundation icon Fonts
    • Other components: Yes
    • Unique components: Icon Bar, clearing Lightbox, Flex Video, keystrokes, joyride, Pricing Tables
    • Documentation: Good. There are many resources to refer to.
    • Customization: no GUI customization, but can write their own.
    • Browser support: Chrome, Firefox, Safari, ie9+, IOS, Android, Windows Phone 7+
    • Authorization: MIT
    • Different: For business transport, education and training, consulting and other industries, foundation is a professional framework. It also provides a lot of resources for you to learn quickly.

3.Semantic UI

Semantic UI is working tirelessly to make Web page making more Semantic. Native language rules make code easier to read and understand.

    • Created by: Jack Lukic
    • Posted: 2013
    • Current version: 1.2.0
    • Popularity: 12,900+ stars on GitHub
    • Description: "A UI component framework based around useful principles from natural language."
    • Core Concepts/principles: Semantic, Tag ambivalence, responsive
    • Frame size: 552 KB
    • Preprocessor: Less
    • Response: Yes
    • Modularity: Yes
    • Start template/Layout: No
    • Icon set: Font Awesome
    • Other components: No
    • Unique components: Divider, Flag, Rail, Reveal, Step, advertisement, Card, Feed, Item, statistic, dimmer, Rating, Shape
    • Documentation: Very perfect. Semantic provides multiple layers of documentation, individual sites for beginners and other customized tutorials.
    • Customization: no GUI customization, but can write their own.
    • Different: Semantic can say that the framework we are discussing today is the most innovative and versatile. The whole structure, naming rules, has clear logic, semantics, more than other frameworks.

4. Pure by Yahoo!

Pure is a purely CSS-written, lightweight, modular framework that contains a variety of integrated and standalone components.

    • Created by: Yahoo!
    • Posted: 2013
    • Current version: 0.5.0
    • Popularity: 9,900+ stars on GitHub
    • Description: "A set of small, responsive CSS modules," can use in every Web project. "
    • Core Concepts/principles: SMACSS, minimalism
    • Frame size: KB
    • Preprocessor: None
    • Responsive:yes
    • Modularity: Yes
    • Start stencil/Layout: Yes
    • Icon set: None. You can use the font awesome instead.
    • Other components: None
    • Unique components: None
    • Documentation: Good
    • Customization: Basic GUI Skin Builder
    • Browser support: Latest version of Firefox,chrome,safari,ie7+,ios 6.x, 7.x, Android 4.x.
    • Authorization: Yahoo! Inc. BSD
    • Different: pure provides a clean infrastructure for your project. Pure is a good choice for developers who do not need a full-featured framework that requires only specific components.

5. UIkit by Yootheme

UIkit is a simple and easy to use and easy to customize component. Although it is not as popular as its rivals, it offers the same functionality as the framework above, and the quality is good.

    • Created by: Yootheme
    • Posted: 2013
    • Current version: 2.13.1
    • Popularity: 3,800+ stars on GitHub
    • Description: "A lightweight and modular front-end framework for developing fast and powerful web interfaces."
    • Core Concepts/principles: RWD, Mobile first
    • Frame size: 118 KB
    • Preprocessor: Less, Sass
    • Response: Yes
    • Modularity: Yes
    • Start stencil/Layout: Yes
    • Icon set: Font Awesome
    • Other components: Yes
    • Unique components: article, Flex, Cover, HTML Editor
    • Documentation: Good
    • Customization: Advanced GUI customization
    • Browser support: Chrome, Firefox, Safari, ie9+
    • Authorization: MIT
    • Different: Uikit is used in many WordPress themes. With GUI editor and manual editing, it provides a flexible and powerful customization mechanism.

6.Amaze UI

Amaze UI is a mobile first concept, compared to foreign frameworks, it is more concerned about Chinese typography, by the front-end engineers praise the most understanding of Chinese front-end framework, officially launched only 4 months, has been on GitHub on the 1500+stars, visible firepower.

    • Created by: Cloud with
    • Posted: 2014
    • Current version: 2.0.0
    • Popularity: 1500+ stars on GitHub
    • Description: The Amaze UI is a mobile-first, cross-screen front-end framework with rich components to quickly build a great interface and experience excellent cross-screen pages for a significant increase in development efficiency.
    • Core Concepts/principles: responsive, WEB components
    • Frame size: CSS 40KB, JS 48KB (gzipped)
    • Preprocessor: Less
    • Response: Yes
    • Modularity: Yes
    • Start stencil/Layout: Yes
    • Icon set: Font Awesome
    • Other components: Yes
    • Unique components: Loading progress bar, sidebar, picture carousel, fixed element, pagination, folding panel, picture gallery, etc.
    • Documentation: Amaze UI documentation very well adapted to each stage of the developer, to provide a number of structural levels of documentation, API design is reasonable and easy to learn and use, bug feedback relies on GitHub and the official QQ group, many say messages, users can timely feedback problems.
    • Customization: currently no GUI customization, customization needs to download custom profiles, download amaze UI source code using the Gulp build tool to customize the compilation.
    • Browser support: For modern browser development, IE 8 provides limited support.
    • Different: The amaze UI joins more elements that fit the Chinese market: Chinese typography is more optimized, compatible with mainstream Chinese browsers, and Web Components cut the components of mobile development into different parts in accordance with Web component implementations, greatly improving development efficiency.

What kind of frame is right for you?

Finally, give some suggestions to help you choose the right frame for you:

    • Is the framework popular enough?

The more popular The more people you use, the more resources you have, the more ways you can communicate. The less likely you are to be discarded, the more comfortable you can use the framework.

    • Is the framework continuing to evolve?

A good framework needs to be constantly updated and adapted to the current technology, especially the mobile side.

    • Does the frame mature?

If a framework is not practiced in the actual project, you can take it practiced hand, but if you want to use a specific project, you still find a more mature framework.

    • Do you provide complete documentation?

During the learning phase, a comprehensive document helps us to do more with less.

    • How specific?

A common framework can make development easier than a special framework. In most cases, choosing the smallest style makes customizing easier, and adding new CSS is easier and more efficient than overwriting the original style.

Finally, if you're still not sure if the framework is right for you, you can find one or two components in your project from a different project. Such a synthesis should also be helpful.

Transfer from

Comparison of the most Popular front-end development frameworks

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.