Responsive frameworks – comparative table

Responsive frameworks – comparative table

0 39165
Responsive frameworks

Responsive frameworks are very popular nowadays. Today we look at a great compilation of all currently existing responsive frameworks. This table is a deep comparative analysis of frameworks, reflecting their advantages and disadvantages. The table list consists of paid and free open-source projects. All the projects are evaluated by the following parameters:: the use of css preprocessors, using a js library, dependence on third-party solutions that support Responsive web design and common elements in developing web projects.

In today’s review we provide the following frameworks:

  • Twitter Bootstrap
  • Gumby
  • Foundation
  • Semantic-ui
  • Metro UI
  • Kube
  • Skeleton
  • Responsive Framework
  • ZinoUI
  • FlatUI

Here is the result comparative table:

Property

Twitter

Bootstrap

 

Gumby

Foundation

Semantic-ui

metroui

Kube

 

Skeleton

 

Responsive

Framework

ZinoUI

FlatUI

Preprocessors

 

LESS,

SASS

SCSS

SCSS

No

LESS

LESS

No

LESS, SCSS, SASS, Stylus

No

LESS,

SASS

JS-library

Jquery

Jquery

Jquery

Jquery

Jquery

Jquery

No

Pure JS, Jquery, AngularJS

Jquery

Jquery

using external plugins

No

jquery.validation, modernizr

Modernizr,

FastClick

No

Yes

(jquery.widget.min.js)

No

No

No

No

No

Grid system

Yes

Yes

Yes

Yes

Yes

Yes

Yes

 

Yes

No

Yes

Responsive

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

No

Yes

Typography

Yes

 

Yes

Yes

Yes

Yes

Yes

 

No

No

Yes

Tables

Yes

Yes

Yes

Yes

Yes

Yes

Yes

 

yes

Yes

No

Inputs

Yes

Yes

Yes

Yes

Yes

Yes

Yes

 

yes

No

Yes

SelectBox

Yes

Yes

Yes

Yes

Yes

Yes

No

Yes

Yes

Yes

RadioBox

No

Yes

No

Yes

Yes

No

No

Yes

Yes

Yes

Checkbox

No

Yes

No

Yes

Yes

No

No

Yes

Yes

Yes

Slider

No

No

Yes

Yes

Yes

No

No

Yes

Yes

Yes

Rating

No

No

No

Yes

Yes

No

No

Yes

Yes

No

Search

Yes

No

Yes

Yes

Yes

Yes

No

Yes

No

Yes

Buttons

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Switches

 

No

Yes

Yes

Yes

 

No

Yes

No

Yes

Progress bar

Yes

No

Yes

Yes

Yes

Yes

No

No

Yes

Yes

Carousel

Yes

No

Yes

No

Yes

No

No

Yes (Layred carousel, full-screen, 11 effects, touch, drag)

Yes

No

Tabs

Yes

Yes

Yes

Yes

Yes

Yes

No

Yes (7 effects)

Yes

No

Accordion

Yes

No

Yes

Yes

Yes

Yes

No

Yes

Yes

No

Navs

Yes

Yes

Yes

Yes

Yes

Yes

No

Yes

Yes

Yes

Drop-down menu

Yes

Yes

Yes

Yes

yes

Yes

No

Yes

Yes

Yes

Side menu

No

No

Yes

Yes

Yes

No

No

Yes

No

No

Full-screen menu

No

No

No

No

No

No

No

Yes(5 effects)

No

No

On-canvas menu

No

No

Yes

No

Yes

No

No

Yes(5 effects)

No

No

Breadcrumbs

Yes

No

Yes

Yes

Yes

No

No

No

No

No

Pagination

Yes

No

Yes

No

Yes

Yes

No

No

No

Yes

Labels

Yes

Yes

Yes

Yes

Yes

No

No

No

No

No

Alerts

Yes

Yes

Yes

Yes

Yes

Yes

No

No

No

No

Preloaders

No

No

No

Yes

(3 types)

No

No

No

Yes (19 types)

No

No

Tooltips

Yes

Yes

Yes

Yes

Yes

Yes

No

Yes (64 effects)

Yes

No

Modal

Yes

Yes

Yes

Yes

Yes

Yes

No

Yes (64 effects)

Yes

No

Price

Free

Free

Free

Free

Free

Free

Free

9$

59$

39$

Site

1

2

3

4

5

6

7

8

9

10

Next, we need to mention the components that were not included in the table, but they are unique and can help in the development.

Metro UI

Data Tables.

Using this component you can display the information in a table. Supports sorting data, search data, different output number of records, the switches pages of notes.

Tree View.

This component displays information in a tree view.

Steamer.

This component is designed to create a timeline. There is support for filtering.

Calendar.

DatePicer.

Times.

Window.

Component in exactly the same dialog box of the Windows operating system.

Foundation

Lightbox.

Joyride.

This component helps to make the easy site navigation, using smooth animated scrolling.

Pricing table.

Semantic-ui

The Reveal.

This component helps to make 7 hover effects.

Shape

Using Shapes

A shape must have defined the width and heights for each side or else text flow may change during the animation.

The module uses 3D transformations which are currently only supported in modern versions of Chrome, Safari, and Firefox.

Sticky.

This component captures the blocks on the page when scrolling.

Framework has 29 css animation.

Kube

Autocomplete.

Infinite Scroll.

This component carries out the loading content when scrolling.

Livesearch.

Navigation Fixed.

Upload.

Responsive framework

Responsive cart.

With this component you can create a responsive shopping cart. There is a version based on Jquery, and the second version of AngularJS. You can remove an item, change the number. Implemented AJAX requests.

Responsive filter (dynamic grid).

This components you can use to create a dynamic grid.

DataTable.

The component is based on AngularJS. Have a search through the records. Appearance corresponds to Material Design.

Components for Material Design

Implemented several components for Material Design (Tabs, Accordion, Form elements, Cards, Preloaders, Table)

ZinoUI

Upload.

Tree View.

This component displays information in a tree view.

Calendar.

Chart.

ComboBox

FlatUI

Video Player

Tags Input

Conclusion

In this article we reviewed the advantages and disadvantages of 10 frameworks. Each of them may help you in your work. Do not limit yourself to one. Use them all, but wisely!

Author Bio: The article was provided by Stas Melnikov, UI Designer/Front-End Developer.

SIMILAR ARTICLES


NO COMMENTS

Leave a Reply