Comparison of css-frameworks / libraries on a live example. Part 1

Prologue

In this series of articles, I intend to conduct an objective comparison of css-frameworks based on living 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 solutions for analysis.
')

Content

• Prologue
• Introduction
• Differences between framework and library
• Types of solutions for implementing web user interfaces
  
  • Simple css-framework
  • Web-component
  • Css mesh
  • Complex css-framework
  
  
• Comparison
• Conclusion

Introduction

Every day the world is filled with many ideas and technologies, especially in the IT sector. People in it quickly begin to move from one innovation to another, applying it to the wrong destination.

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 is created on the productivity and quality of products.

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

You probably noticed that there are already at least 30 css frameworks with a different set of components and architectures. To understand all this from the first time is not easy, and from the second, and the third, and ...

Therefore, we decided to make a comparison of css-frameworks on a live example, as in ToMVC. This should help web developers quickly select the appropriate css solution.

There is a lot of work, so I will describe the comparison in habre gradually - in the form of 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: the framework and the library . At first glance, they may seem the same, but they are not. Refer to their definitions in Wikipedia.

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

Library (from the English. Library) in programming - a collection of subroutines or objects used to develop software (software).

The Css framework is a framework created to simplify the work of the typesetter, speed of development and the elimination of the maximum possible number of layout errors (compatibility problems between different browser versions, etc.).

About the differences between the concepts it says:

" The framework differs from the library in that the library can be used in a software product simply as a set of routines of similar functionality, without affecting the architecture of the software product and without imposing any restrictions on it. While the framework dictates the rules for constructing the architecture of the application, setting the initial the design phase of 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 constructing the architecture of software code;
• dictates the principles of structuring files ;
• within itself has several libraries .

Despite their clear separation, it is not always possible to see the edge 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, since their formalization does not always fit the rules defined above. But I will be more careful and try to do everything as accurately as possible. And you, I hope, will prompt and help you in making mistakes.

Types of css-frameworks / libraries

On the market there are many css-frameworks and libraries. They all have a different set of elements. For the sake of a fair assessment and reduction of errors in the results, I decided to divide the css-solution into subtypes, having analyzed about 40 options:

• Simple css-frameworks ;
• Web components ;
• Css meshes ;
• Complex css-frameworks .

Simple css frameworks

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

They may include the following modules:

• primitives (typography, images, etc.);
• mesh;
• buttons;
• tables;
• form elements;
• menu;
• auxiliary elements.

List of analysis solutions:

• Kube ;
• PureCSS ;
• Skeleton ;
• Amazium ;
• Css-framework ;
• Inuit ;
• Yaml4 ;
• Cardinal ;
• Typeplate ;
• Furato ;
• Kraken ;
• CascadeFramework ;
• Simpliste ;
• Apppie .

Web components

They are based on a new web component engine.

Web components are a set of standards that add technology to the browser for conveniently implementing 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 it to maintain the encapsulation property. I wrote about this in more detail in the project group: Web Components .

List of frameworks for analysis:

• Brick ;
• Polymer .

Css meshes

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

List of analysis solutions:

• 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 large-scale frameworks. Possess javascript and css + html modules. Able to solve most of the tasks for creating web-UI.

Usually they are present in:

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

List of analysis solutions:

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

Conclusion of introductory material

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

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

• Simple css-frameworks ;
• Web components ;
• Css meshes ;
• Complex css-frameworks .

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

In the following article we will start with the analysis of specific css-frameworks and libraries (the list may vary). Until new meetings.

UPD 12/21/2015: thanks to oledje, added materialize and material design lite to complex css frameworks.
UPD 12.22.2015 : andrewiWD suggested the Gridle and I added it to the list of css grids.