The Magento UI

The Magento 2.0 system works with the LESS CSS preprocessor to extend the features of CSS and enable the opportunity to create theme inheritance with minimal and organized effort. With this premise, to help theme developers, we have the Magento UI library in Magento 2.0.

The Magento UI library is based on LESS and provides a set of components to develop themes and frontend solutions:

• Actions toolbar

• Breadcrumbs

• Buttons

• Drop-down menus

• Forms

• Icons

• Layout

• Loaders

• Messages

• Pagination

• Popups

• Ratings

• Sections

• Tabs and accordions

• Tables

• Tooltips

• Typography

• A list of theme variables

Another important resource of the Magento UI and of LESS is the mixin capability. The mixin allows developers to group style rules to work with different devices.

For example, consider that you declared the following CSS code in one determined file:

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .example-responsive-block {
        background: #ffc;
    }
    .example-responsive-block...