PART – UI library


A mixin is a class that contains a combination of methods from other classes.

The Magento UI library source files are stored under the source directory.

The Magento UI library documentation is stored under the docs directory:

  • lib/web/css/docs/source/ Describes the Magento UI library structure, naming conventions, and code style.
  • lib/web/css/docs: Contains a set of .html files with detailed information about the library mixins. Each file is named after the mixin it describes, and contains a detailed mixin description and navigation controls to access documentation for other mixins.
  • The documentation is available in a convenient HTML view in the following location in your Magento installation: pub/static/frontend/Magento/blank/en_US/css/docs/index.html

UI Library

The library provides the ability to customize all of the following user interface elements:

• actions-toolbar

• breadcrumbs

• buttons

• components

• drop-downs

• forms

• icons

• layout

• loaders

• messages

• pagination

• popups

• ratings

• resets

• responsive

• sections – tabs and accordions

• tables

• tooltips

• typography

• utilities

• list of theme variables

 You can find the Magento UI library under lib/web/css.

Library source.less files are stored under the source directory.

Each file contains mixins for configuring a certain element, and in most cases the element coincides with the file name.

Here are some documentation links.

UI library elements:

 http://magento installation>/pub/static/frontend/Magento/blank/en_US/css/docs/index.html

Typopgraphy information:

 http://magento installation>/pub/static/frontend/Magento/blank/en_US/css/docs/typography.html

You can also look up documentation for each element – for example, buttons:

 http://magento installation>/pub/static/frontend/Magento/blank/en_US/css/docs/buttons.html


Exercise 5.0

Overwrite button’s colour and link’s colour on your site.