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!
