This framework was developed by Mark Otto and Jacob Thornton from Twitter, to ensure consistency between the internal Twitter tools. Along with Pure CSS Bootstrap is one of the most common and widely used interface systems. Using Bootstrap reduces the amount of time needed to write large codes (from ground zero). Working with such a framework significantly speeds up the process of creating pages. Standard styles are easy to change, which provides a flexible and simple process for creating site models.
HTML Resets are in a single module called “Reboot”. HTML Reset is a set of styles that replaces the usual CSS styles set in the default browser. These can be seen if the page works without CSS connected. It is accustomed to disable them so that they do not spoil the layout process.
The built-in support for flexbox provides many benefits to users. Flexbox is the most powerful component of html5, thanks to which the layout behaves exactly like a table or as a set of blocks, depending on how the developer wants. Usually, developers recompile CSS so that the block layout is not run using float: left, but based on flexbox.
The cool components of the framework are Sass variables and a more structured framework system. It is good news that the framework exists and is being improved, old mistakes are corrected and new ones arise very often.
Milligram provides minimal styling for a fast and clean starting point. With only 2kb in gzipped format, this tiny but powerful structure is among the top three lightweight frames.
In the Milligrams arsenal has everything you need, grids, tables, forms, tips, buttons and other tools.
The CSS Milligram introduces several new units, including the rem block, which stands for "root em". The rem module refers to the font size of the html root element. This means that we can define one font size on the root element and define all rem units as a percentage of the total. Typography font size is 16 pixels, line height is 24 pixels. Milligram uses the Roboto font family created by Christian Robertson for Google.
A button is an essential part of any user interface. The buttons have three styles in the Milligram: the button element has a flat color by default based on color trends in web design, whereas .button-outline has a simple outline around, and .button-clear has a completely clear outline.
The list is a very universal and common way of displaying elements in a given CSS. Milligram has three types of lists: an unordered list uses the ul element, will be marked by contour circles, an ordered list will use the ol element, and your elements will be marked by numbers, the dl element will be used in the description list, your elements will not be labeled.
There are several ways to get started. First, review all the download options available in CSS, then select the most appropriate option for your needs. Now you have to add the main Milligram and CSS Reset file to your project header. That’s all! You can work.
Bulma has 21kB miniatures, this framework works in gzipped format. Bulma is not the easiest framework from this list, but this new structure is so interesting that it deserves mentioning. Bulma was created taking into account the mobility of the technology; this makes each element of the framework as optimized as possible for vertical reading. Its grid is fully built using Flexbox. Achieving a flexible layout with identical columns in Bulma is as easy as adding a .column class to an HTML element. The only disadvantage is that there is no JS in it.
It provides a modular sass structure for optimizing the package only for the necessary classes to be used as often as possible.
UIkit is an easy and modular interface for fast and powerful web development.
The UIKit framework provides the necessary infrastructure for your iOS or tvOS applications. It provides window architecture for creating an author’s interface, event handling infrastructure for delivering Multi-Touch and other input types in your application, as well as a basic launch cycle necessary to manage the interaction between the user, the system, and your application. Other infrastructure features include animation support, document support, drawing and printing support, current device information, text control and display, search support, accessibility support, application extension support, and resource project management.
It is best to use the UIKit classes only from the main application thread or main send queue. This restriction applies, in particular, to classes derived from a UIResponder, or to controlling the user interface of an application.
With just 400 lines of code, Skeleton is widely spread. Despite 400 lines of code, it has a grid, typography, forms, media queries and so on, in general, everything you need to create a quality website as soon as possible.
Most often, Skeleton is used when it is necessary to create a small website project or when to create a website you do not need all the functions of large frameworks that are familiar to us. Skeleton stylizes several standard HTML elements, includes a grid, and this is often enough to start working on a website. In fact, such a site will be built on 200 lines of custom CSS (half of which will be the docking navigation). 400 lines will be used to create the site based on mobile devices. Styles in Skeleton are for the starting point, not for the user interface. You must start from scratch compiling or installing the necessary styles.
Base is a very simple but reliable framework. Built on the principle of light and minimal code, Base was created to provide developers and designers with an easy way to create cross-browsers and mobile applications.
Base in itself is a very thin framework that requires Normalize.css and several mixins to start its work.
After completing these nuances, you can enable the features you need, such as typography, grids, individual components, and the like.
The most interesting features of the Base framework:
1. Base animation is a very thin layering, includes animation for fading in content.
2. Base buttons is a very thin layer that includes styles for decorating buttons and links.
3. Base Containers is a very thin layer that contains styles for containers.
4. Base forms contain styles for inputs, textarea, radio, flags, and other form elements.
5. Base grid contains styles for flexible grids with lines and columns for your template.
6. Base templates. Template helpers contain styles for resetting fields, layings, floats, setting different types of positions, and flexible helpers.
Lightweight (~ 10KB gzipped) starting point for your projects. Specter provides elegantly designed elements as well as a flexible and mobile-friendly composition.
Specter provides basic styles for typography and elements, a flexible model system based on flexible functions, clean CSS components and utilities with best practices and sequential language.
Some advantages of Specter:
1. Beautiful elements design.
2. Huge opportunities to embody your ideas.
3. Easy to use design with Flexbox.
#9 Dead Simple Grid