Various development frameworks are emerging one after another, each with its own strengths. Which ones are most suitable for developers? Based on popularity on GitHub, this article compiles the 6 most popular front-end development frameworks of 2014 and provides a comparative explanation, hoping to help friends in need choose the front-end framework that suits them.

Nowadays, various development frameworks are emerging one after another, each with its own merits. Which ones attracted more attention from developers last year? Not long ago, Yunshipei compiled the 6 most popular front-end development frameworks of 2014 based on popularity on GitHub, and provided a comparative explanation, hoping to help friends in need choose the appropriate front-end framework.

1. Bootstrap

Bootstrap is undoubtedly the leader among current frameworks. It is not only popular, but its user base is also growing every day. You can trust that this tool won't let you down, and you can also use it alone to build your own web pages.

1421375811123

  • Creator: Mark Otto and Jacob Thornton
  • Released: 2011
  • Current version: 3.3.1
  • Popularity: 75,000+ stars on GitHub
  • "Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web."
  • Core concept/principle: RWD and mobile-first
  • Framework size: 145 KB
  • Preprocessor: Less and Sass
  • Responsive: Yes
  • Modular: Yes
  • Starter template/skeleton: Yes
  • Icon set: Glyphicons
  • Other plugins: No bundled plugins; third-party plugins available
  • Unique components: Jumbotron
  • Documentation: Good
  • Customization: Basic GUI customization, but requires manual modification because there is no color picker tool.
  • Browser support: Firefox, Chrome, Safari, IE8+ (IE8 requires Respond.js)
  • License: MIT

2. Foundation by ZURB

Compared with Bootstrap, Foundation ranks second, but that doesn't mean it's unpopular. With strong support from ZURB behind it, Foundation becomes even more powerful! Foundation is used by major websites such as Facebook, Mozilla, eBay, Yahoo, National Geographic, and so on.

1421375811476

  • Creator: ZURB
  • Released: 2011
  • Current version: 5.4.7
  • Popularity: 18,000+ stars on GitHub
  • "The most advanced responsive front-end framework in the world"
  • Core concept/principle: RWD, Mobile First, Semantic
  • Framework size: 326 KB
  • Preprocessor: Sass
  • Responsive: Yes
  • Modular: Yes
  • Starter template/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 available for reference.
  • Customization: No GUI customization, but you can write your own.
  • Browser support: Chrome, Firefox, Safari, IE9+, iOS, Android, Windows Phone 7+
  • License: MIT
  • What makes it different: For industries such as business transportation, education and training, and consulting, Foundation is a professional framework. It also provides many resources for you to learn quickly.

3.Semantic UI

Semantic UI is making unremitting efforts to make web development more semantic. Natural language rules make code easier to read and understand.

1421375811515

  • Creator: Jack Lukic
  • Released: 2013
  • Current version: 1.2.0
  • Popularity: 12,900+ stars on GitHub
  • "A UI component framework based around useful principles from natural language."
  • Core concept/principle: Semantic, Tag Ambivalence, Responsive
  • Framework size: 552 KB
  • Preprocessor: Less
  • Responsive: Yes
  • Modular: Yes
  • Starter 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 comprehensive. Semantic provides documentation at multiple structural levels, with a separate website for beginners as well as other customization tutorials, etc.
  • Customization: No GUI customization, but you can write your own.
  • What makes it different: Semantic can be said to be the most innovative and feature-complete framework among those discussed today. Its overall architecture and naming rules have clear logic and semantics, surpassing other frameworks.

4. Pure by Yahoo!

Pure is a pure CSS, lightweight, modular framework that includes various integrated and standalone components.

1421375811410

  • Creator: Yahoo
  • Released: 2013
  • Current version: 0.5.0
  • Popularity: 9,900+ stars on GitHub
  • "A set of small, responsive CSS modules that you can use in every web project."
  • Core concept/principle: SMACSS, Minimalism
  • Framework size: 18 KB
  • Preprocessor: None
  • Responsive：Yes
  • Modular: Yes
  • Starter template/layout: Yes
  • Icon set: None. Font Awesome can be used as an alternative.
  • Other components: None
  • Unique components: None
  • Documentation: Good
  • Customization: Basic GUI Skin Builder
  • Browser support: Latest versions of Firefox, Chrome, Safari, IE7+, iOS 6.x, 7.x, Android 4.x.
  • License: Yahoo! Inc. BSD
  • What makes it different: Pure provides a clean base framework for your project. For developers who don't need a full-featured framework and only need specific components, Pure is a good choice.

5. UIkit by YOOtheme

UIkit is a concise set of components that are easy to use and customize. Although it is not as popular as its competitors, it provides the same functionality as the frameworks above, and the quality is also quite good.

1421375811183

  • Creator: YOOtheme
  • Released: 2013
  • Current version: 2.13.1
  • Popularity: 3,800+ stars on GitHub
  • "A lightweight and modular front-end framework for developing fast and powerful web interfaces."
  • Core concept/principle: RWD, Mobile First
  • Framework size: 118 KB
  • Preprocessor: Less, Sass
  • Responsive: Yes
  • Modular: Yes
  • Starter template/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+
  • License: MIT
  • What makes it different: UIkit is used in many WordPress themes. Through its GUI editor and manual editing, it provides a flexible and powerful customization mechanism.

6.Amaze UI

Amaze UI is built around the Mobile First philosophy. Compared with foreign frameworks, it pays more attention to Chinese typography and is praised by front-end engineers as the front-end framework that best understands Chinese. Just four months after its official launch, it had already gained over 1,500 stars on GitHub, showing its strong momentum.

1421375811398

  • Creator: Yunshipei
  • Released: 2014
  • Current version: 2.0.0
  • Popularity: 1500+ stars on GitHub
  • Description: Amaze UI is a mobile-first cross-screen front-end framework with rich components that allow you to quickly build cross-screen pages with excellent interfaces and user experience, greatly improving development efficiency.
  • Core concepts/principles: Responsive, Web Components
  • Framework size: CSS 40KB, JS 48KB (gzipped)
  • Preprocessor: Less
  • Responsive: Yes
  • Modular: Yes
  • Starter templates/layouts: Yes
  • Icon set: Font Awesome
  • Other components: Yes
  • Unique components: loading progress bar, sidebar, image carousel, fixed elements, pagination, collapse panels, image gallery, etc.
  • Documentation: Amaze UI’s documentation is very complete and suitable for developers at all stages. It provides documentation at multiple structural levels, with a reasonable API design that is easy to learn and use. Bug feedback relies on GitHub, the official QQ group, Duoshuo comments, etc., allowing users to report issues in a timely manner.
  • Customization: There is currently no GUI-based customization. To customize, you need to download a customization configuration file. Download the Amaze UI source code and use the gulp build tool to compile it with custom configurations.
  • Browser support: Developed for modern browsers, with limited support for IE 8.
  • What makes it different: Amaze UI adds more elements suited to the Chinese market: optimized Chinese typography, compatibility with major local browsers in China, and Web components implemented according to the Web Components pattern, splitting common mobile development components into different parts to greatly improve development efficiency.
What kind of framework suits you?Finally, here are a few suggestions to help you choose the framework that suits you best:
  • Is the framework popular enough?
The more popular it is, the more people use it, the more resources are available, and the more ways there are to exchange ideas. The lower the chance of it being abandoned, the more at ease you can be using it.
  • Is the framework under continuous development?
A good framework needs constant updates and improvements to adapt to current technologies, especially on mobile.
  • Is the framework mature?
If a framework has not been tested in real projects, you can casually use it for practice. But if you need to use it for a dedicated project, it is safer to choose a relatively mature framework.
  • Does it provide complete documentation?
During the learning stage, complete documentation can help us get twice the result with half the effort.
  • How specialized is it?

Compared with a specialized framework, a general-purpose framework can make development simpler. In most cases, choosing minimal styles makes customization easier; adding new CSS is simpler, easier to handle, and more efficient than overwriting existing styles.

Finally, if you are still not sure whether this framework suits you, you can take one or two components from different projects and put them into your own project. Such a combination should also be helpful.