The 5 most used Frontend framework of 2014


CSS frontend frameworks are now one of the most important parts of website development but the sad part is we have very few lists of good frameworks to choose. Based on the github popularity, we have tried to list 5 best and most used framework of 2014.

1. Bootstrap

This is the most used and preferred framework till date.  If we take 100 website for sample, the chances are that 80 websites will have bootstrap used. Technically, this framework offers many resources, articles and tutorials, third-party plugins and extensions, theme builders and so on. This is the reason bootstrap is like king among the available frameworks.

  • Creators: Mark Otto and Jacob Thornton.
  • Released: 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.
  • Framework size: 145 KB
  • Preprocessors: Less and Sass
  • Unique components: Jumbotron
  • Documentation: Good
  • Customization: Basic GUI Customizer. Unfortunately you need to input the color values manually, because there is no color picker available.
  • Browser support: Firefox, Chrome, Safari, IE8+
  • Responsive: Yes
  • Modular: Yes
  • Starting templates/layouts: Yes
  • Extras/Add-ons: None bundled, but many third-party plug-ins are available.
  • License: MIT

2. Foundation

Foundation, secures second position in our ranking, powered by ZURB Company, this framework truly have solid foundation. Apart from offering business support, training and consulting, this framework also provides man resources to help us learn and use this framework faster and easier.

  • Creators: ZURB
  • Released: 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.
  • Framework size: 326 KB
  • Preprocessors: Sass
  • Responsive: Yes
  • Modular: Yes
  • Starting templates/layouts: Yes

3. Semantic UI

The continuous effort to make website more systematic keeps apart Semantic UI with the rest framework. This framework utilizes natural language principles which in result make the code more readable and understandable. This framework is the most innovative and full featured framework among the five frameworks discussed here.

  • Creator: Jack Lukic
  • Released: 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.
  • Framework size: 552 KB
  • Preprocessors: Less
  • Responsive: Yes
  • Modular: Yes
  • Starting templates/layouts: No
  • Icon set: Font Awesome
  • Extras/Add-ons: No
  • Unique components: Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape.
  • Documentation: Very good. Semantic offers a very well organized documentation, plus a separate website that offers guides for getting started, customizing and creating themes.
  • Customization: No GUI customizer, only manual customization.
  • Browser support: Firefox, Chrome, Safari, IE10+ , Android 4, Blackberry 10
  • License: MIT

 4. Pure by Yahoo!

Pure is a lightweight, modular framework – written in pure CSS – that includes components which can be used together or separately depending on your needs.

  • Creator: Yahoo
  • Released: 2013
  • Current version: 0.5.0
  • Popularity: 9,900+ stars on GitHub
  • Description: “A set of small, responsive CSS modules that you can use in every web project.”
  • Core concepts/principles: SMACSS, minimalism.
  • Framework size: 18 KB
  • Preprocessors: None
  • Responsive: Yes
  • Modular: Yes
  • Starting templates/layouts: Yes
  • Icon set: None. You can use Font Awesome instead.
  • Extras/Add-ons: 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

5.    UIkit

UIkit is a concise collection with easy to use and easy to customize components. Although it’s not as popular as its competitors, it offers the same functionality and quality.

  • Creator: YOOtheme
  • Released: 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
  • Framework size: 118 KB
  • Preprocessors: Less, Sass
  • Responsive: Yes
  • Modular: Yes
  • Starting templates/layouts: Yes
  • Icon set: Font Awesome
  • Extras/Add-ons: Yes
  • Unique components: Article, Flex, Cover, HTML Editor
  • Documentation: Good
  • Customization: Advanced GUI Customizer
  • Browser support: Chrome, Firefox, Safari, IE9+
  • License: MIT

If you are trying to have one framework used for your website, we have few suggestions for you. If you follow these suggestions, it will help you to choose wisely.

  1. Popularity: The more popular frameworks mean more people are involved. This means people have already tested and trusted the framework. This results to having multiple options with plugins, third party extensions and so on.
  2. Continuous development: if the frameworks are continuously developed and updated,  we can flow with the time and update regularly.
  3. Maturity: If it’s your personal website and if you are risk taking type, maturity is not for you. But if your need is for corporate development, you seriously need to look after framework maturity. You need to have stable framework.
  4. Documentation: In order to facilitate the learning process, you always need good documentation.
  5. Level of specificity: In comparison to framework with high level of specificity, it is lot easier to work in more generic framework. And its considered more wise to choose.

If you are still in dilemma about which framework to choose for your website, contact us for best consultation.

 Image soruce: www.angiburton.com