Most Popular Frameworks for UI developers

Each framework has its own strengths and weaknesses, and specific areas of application, allowing you to choose based on the needs of a specific project. For example, if your project is simple, there’s no need to use a complex framework. Also, many of the options are modular, allowing you to use only the components you need, or even mix components from different front-end frameworks.

The front-end frameworks I’m going to explore are presented based on their GitHub popularity, beginning with the most popular, which is, of course, Bootstrap.

Note that some of the information below will go out of date from the time of publication – such as GitHub stars and version numbers – so be aware of this if you’re reading this article long after the publication date. Also note that the framework sizes are the minified sizes of the necessary CSS and JavaScript files.

 

#1 Bootstrap

This list would be woefully incomplete without the inclusion of the wildly popular front-end framework, Bootstrap. Created by Twitter developers and initially released in 2011, it’s the most used open source framework in the world.

Like any effective front-end framework, Bootstrap includes CSS, HTML and JavaScript, or JS, components. It adheres to responsive web design standards, allowing you to develop responsive sites of all complexities and sizes.

Because it is updated continually, Bootstrap typically includes the latest and best features. For example, it added themes that met Google’s material design guidelines shortly after they were published, and it was also upgraded to use Sass as a CSS preprocessor.

Pros:

  • Responsive web design support (can also be disabled if required)
  • Extensive documentation

Cons:

  • Out-of-the-box file size of 276kB due to excessive number of rarely used styles
  • Excessive number of HTML classes and DOM elements can be messy and confusing

 

#2 Foundation by ZURB

Foundation is the second big player in this front-end framework comparison. With a solid company like ZURB backing it, this framework has a truly strong … well … foundation. After all, Foundation is used on many big websites including Facebook, Mozilla, Ebay, Yahoo! and National Geographic, to name a few.

  • Creators: ZURB
  • Released: 2011
  • Current version:6
  • Popularity: 27, 497 stars on GitHub
  • Description: “The most advanced responsive front-end framework in the world”
  • Core concepts/principles: RWD, mobile first, semantic
  • Framework size: 233 KB
  • Preprocessors: Sass
  • Responsive: Yes
  • Modular: Yes
  • Starting templates/layouts: Yes
  • Icon set: Foundation Icon Fonts
  • Extras/Add-ons: Yes
  • Unique components: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
  • Documentation: Good, with many additional resources available.
  • Customization: Basic GUI customizer
  • Browser support: Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+
  • License: MIT

Notes on Foundation

Foundation is a truly professional front-end framework with business support, training, and consulting offered. It also provides many resources to help you learn and use the framework faster and easier.

 

#3 Semantic UI

A relative newcomer on the scene, Semantic-UI stands out in a number of ways and is poised to become one of the most popular front-end frameworks out there.

This framework’s main claim to fame is its simplicity. Because it uses natural language, the code is self-explanatory. Even those with very little coding experience will feel fairly at home working with this framework.

Another notable feature of Semantic-UI is that it is integrated with a dizzying array of third-party libraries. So much so, in fact, that you probably won’t need to use any others. Therefore, the development process is a bit easier and more streamlined.

Pros:

  • Semantic class names make for a low barrier of entry, so even beginners can hit the ground running
  • Small file sizes and minimal load times because you can load only the components that you need; each has its own JS file and stylesheet
  • Versatile elements make for easy customization

Cons:

  • Very large packages when compared to Foundation and Bootstrap
  • Those with more complex design and development needs may find this framework lacking

 

 

#4 Skeleton

 

Skeleton is a lightweight responsive boilerplate that contains only 400 lines of code. This framework is meant to include only the minimum requirements to get you started on the development of a web project. It is not meant to be all-inclusive such as other frameworks as mentioned above.

Skeleton is also responsive, based on a 12-column grid system, and includes the bare essentials such as buttons, lists, tables, forms, etc.

Pros:

  • Extremely lightweight
  • Greater simplicity and useful for smaller projects

Cons:

  • Does not include a wide selection of utility/styling components such as larger frameworks do.

 

#5 Susy

Some would argue that Susy isn’t a front-end framework in the truest sense of the term because it is focused on solving complex layout needs. In fact, many classify Susy as a grid maker more than anything, but it can be an indispensable tool for those who have specialized layout needs.

Susy arms you with mixins that can be used to create grids. The framework does all of the calculations for you, saving a lot of time and effort.

With Susy, you can create any kind of grid layout imaginable. If you have been looking for a way to do this, Susy may be the answer.

Pros:

  • Superior flexibility, so you can create any kind of grid layout that you need
  • Automatically performs all calculations

Cons:

  • Does not cover all aspects of website design, so you still need another framework solution
  • No pre-built grids

 

#6 UIkit by YOOtheme

UIkit is a concise collection of 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: 3.0.0
  • Popularity: 12,821 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: 374 KB (zipped folder)
  • Preprocessors: Less, Sass
  • Responsive: Yes
  • Modular: Yes
  • Starting templates/layouts: Yes
  • Icon set: UIkit comes with its own SVG icon system and library with a growing number of outline icons
  • Extras/Add-ons: Yes
  • Unique components: Article, Flex, Cover, HTML Editor
  • Documentation: Good
  • Customization: Advanced GUI Customizer only available in version 2 (previous version)
  • Browser support: Chrome, Firefox, Safari, IE9+
  • License: MIT

 

 

 

[Total: 1    Average: 5/5]
admin
Leave a Reply

Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages