Comparison of css frameworks / libraries on a live example. Part 1 / Company blog mr. Gefest

Prologue

In this series of articles, I intend to make an objective comparison of css frameworks based on live examples, as in TodoMVC for js solutions.

In the introductory article, you will learn about frameworks and libraries and their differences. I’ll tell you what types they are divided into. I will indicate the planned list of ready-made solutions for analysis.

Content

• Prologue
• Introduction
• Differences between the concepts of a framework and a library
• Types of Web UI Implementation Solutions
  
  • Simple css framework
  • Web component
  • Css grid
  • Integrated css framework
  
  
• Comparison
• Conclusion

Introduction

Every day the world is filled with many ideas and technologies, especially in the IT sector. People in it hastily begin to move from one innovation to another, using it for other purposes.

Due to the oversaturation of the market with ready-made solutions and the lack of information about them, the choice is complicated and a negative effect on the performance and quality of products is created.

When creating a new version of mr. Gefest we lacked information about css frameworks. We needed to find out not only what components there were, but also how they were built from the inside, to get their most complete and correct comparison.

You probably noticed that at least 30 css frameworks with a different set of components and architectures already exist. It’s not easy to understand all this the first time, and from the second, and from the third, and from ...

Therefore, we decided to make a comparison of css frameworks using a live example, as in ToMVC. This should help web developers quickly choose the right css solution.

There is a lot of work, so I will describe the comparison on the hub - gradually - as a series of articles. I hope my work will be useful to you.

Differences in the concepts of “framework” and “library”.

Before analyzing solutions, you need to consider two concepts: a framework and a library . At first glance, they may seem the same, but this is not so. Turn to their definitions on Wikipedia.

Framework (neologism from the English framework - framework, structure) - a software platform that defines the structure of a software system; software that facilitates the development and integration of various components of a large software project.

A library (from the English library) in programming is a collection of subprograms or objects used to develop software (software).

Css framework- A framework created to simplify the work of the layout designer, the speed of development and the exclusion of the maximum possible number of typesetting errors (compatibility problems between different versions of browsers, etc.).

It says about the differences between the concepts:

“ The framework differs from the library in that the library can be used in a software product simply as a set of routines of close functionality, without affecting the architecture of the software product and without imposing any restrictions on it. While the framework dictates the rules building the architecture of the application, setting at the initial stage of development the default behavior, the framework that will need to be expanded and modified according to the specified requirements. ".

From all this we can conclude that the library is a framework if:

• sets the rules for building the architecture of program code;
• dictates the principles of structuring files ;
• It has several libraries inside .

Despite their clear separation, it is not always possible to see the line where the css framework begins and the css library ends. After all, they are based on the markup language and the language for determining its appearance. They are significantly different from javascript, c ++, pascal and others. This is confusing, as their formalization does not always fit the rules defined above. But I will be more attentive and try to do everything as accurately as possible. And you, I hope, will prompt and help in making mistakes.

Types of css frameworks / libraries

There are many css frameworks and libraries on the market. All of them have a different set of elements. For the sake of a fair assessment and reduction of errors in the results, I decided to subdivide the css-solutions into subtypes, having analyzed about 40 options:

• Simple css frameworks ;
• Web-components ;
• Css-grid ;
• Integrated css frameworks .

Simple css frameworks

They do not use javascript. All their modules are written in css and html. They are lightweight, fast and simple. Due to the lack of javascript components, simple css frameworks lack some functionality.

These may include the following modules:

• primitives (typography, images, etc.);
• a grid;
• buttons
• Tables
• form elements;
• menu;
• auxiliary elements.

List of solutions for analysis:

• kube ;
• PureCSS ;
• the Skeleton ;
• Amazium ;
• Framework-css ;
• inuit ;
• Yaml4 ;
• Cardinal ;
• Typeplate ;
• Furato ;
• Kraken ;
• CascadeFramework ;
• Simpliste ;
• Apppie .

Web components

They are based on the new web component engine.

Web components is a set of standards that adds technology to the browser for convenient implementation of ui solutions. Each such element will work in its own DOM tree without overlapping with the styles of the main page. This is one of the main advantages of web-components, as it allows you to maintain the encapsulation property. I wrote more about this in the project group: Web components .

List of frameworks for analysis:

• the Brick ;
• Polymer .

Css mesh

Most grid implementation solutions have a modest set of capabilities and perform only one task, so it is not part of the concept of frameworks. Despite this, we will analyze and compare them anyway.

List of solutions for analysis:

• Responsive Grid System ;
• 1140px CSS Grid Retired ;
• The Goldilocks Approach ;
• Proportional Grids ;
• ingrid ;
• Yamb ;
• Aeon ;
• Gridiculo ;
• 960 ;
• Toast ;
• Girder ;
• Pocketgrid ;
• Fitgrd ;
• Kindling ;
• flexbox ;
• Cutegrid ;
• Gridle ;
• Gridism .

Complex css frameworks

The most ambitious frameworks. They have javascript and css + html modules. Able to solve most of the tasks of creating web-UI.

Usually they are present:

• primitives (typography, images, etc.);
• grids;
• dialog boxes
• page dividers (pagination);
• panels;
• fonts with vector icons;
• cards;
• data lists;
• bread crumbs;
• accordions
• buttons
• Tables
• form elements;
• menu;
• auxiliary elements;
• and much more.

List of solutions for analysis:

• Semantic-UI ;
• Foundation ;
• UIKit ;
• 99Lime Html kickstart ;
• Gumby ;
• Bootstrap3 ;
• Material Design Lite ;
• Materialize .

Introductory material

You have learned that in the it industry there are many css frameworks and libraries, and it is difficult to determine what exactly to choose from them to solve a specific problem. As a result of which, to simplify this process, I was going to make for you a full-fledged analysis and comparison on living examples.

I clearly proved the difference between the css framework and the css library, and highlighted 4 types of solutions:

• Simple css frameworks ;
• Web-components ;
• Css-grid ;
• Integrated css frameworks .

In each type, he identified the signs and indicated a list of solutions for further study.

In the following article, we will begin by analyzing specific css frameworks and libraries (the list may change). See you again.

UPD 12/21/2015: thanks to oledje, he added Materialize and Material Design Lite to complex css frameworks.
UPD 12/22/2015: andrewiWD suggested Gridle and I added it to the list of css grids.