Our brands

Magento 2 UI Library

magento-2 -UI-library

To find where is Magento 2 UI Library please open file: localhost/theme name/lib/web/css/docs/index.html

I. Introduction

The magento 2 UI library, a flexible modular magento frontend library that is created to support magento theme developer. It uses a set of mixins for base elements to develop and customize frontend easily.

II. Magento 2 UI library Features and Elements

Magento 2 UI Library comes with the following features for developer to develop and customize magento theme.

  • Built on LESS preprocessor
  • Focused on web standards
  • Customizable
  • Easy to maintain
  • Responsive
  • Accessible

Moreover, the Magento 2 UI library let you to customize all of below 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

III. Magento 2 UI library file structure

Magento 2 UI library is located in /lib/web/ and it includes:

  • css/ folder where the library files are located
  • fonts/ folder where default and icon fonts are located
  • images/ folder where default images are located
  • jquery/ folder where jQuery and jQuery widgets are located

Magento UI library structure


/lib/web/
├── css/
│ ├── docs/ (Library documentation)
│ │ ├── source/
│ │ │ ├── _actions-toolbar.less
│ │ │ ├── _breadcrumbs.less
│ │ │ ├── _buttons.less
│ │ │ ├── _dropdowns.less
│ │ │ ├── _forms.less
│ │ │ ├── _icons.less
│ │ │ ├── _layout.less
│ │ │ ├── _lib.less
│ │ │ ├── _loaders.less
│ │ │ ├── _messages.less
│ │ │ ├── _pages.less
│ │ │ ├── _popups.less
│ │ │ ├── _rating.less
│ │ │ ├── _resets.less
│ │ │ ├── _responsive.less
│ │ │ ├── _sections.less
│ │ │ ├── _tables.less
│ │ │ ├── _tooltips.less
│ │ │ ├── _typography.less
│ │ │ ├── _utilities.less
│ │ │ ├── _variables.less
│ │ │ ├── _components.less
│ │ │ ├── docs.less
│ │ │ └── README.md
│ │ ├─── extends.html
│ │ ├─── actions-toolbar.html
│ │ ├─── breadcrumbs.html
│ │ ├─── buttons.html
│ │ ├─── components.html
│ │ ├─── docs.css
│ │ ├─── docs.html
│ │ ├─── dropdowns.html
│ │ ├─── forms.html
│ │ ├─── icons.html
│ │ ├─── index.html
│ │ ├─── layout.html
│ │ ├─── lib.html
│ │ ├─── loaders.html
│ │ ├─── messages.html
│ │ ├─── pages.html
│ │ ├─── popups.html
│ │ ├─── rating.html
│ │ ├─── resets.html
│ │ ├─── responsive.html
│ │ ├─── sections.html
│ │ ├─── tables.html
│ │ ├─── tooltips.html
│ │ ├─── typography.html
│ │ ├─── utilities.html
│ │ └─── variables.html
│ └── source/
│ ├── components/ (Reusable components files)
│ │ └── _modals.less
│ ├── lib/ (Library source files)
│ │ └── variables/ (Decoupled variables)
│ │ └── ...
│ │ ├── _extends.less
│ │ ├── _actions-toolbar.less
│ │ ├── _breadcrumbs.less
│ │ ├── _buttons.less
│ │ ├── _dropdowns.less
│ │ ├── _forms.less
│ │ ├── _icons.less
│ │ ├── _layout.less
│ │ ├── _lib.less
│ │ ├── _loaders.less
│ │ ├── _messages.less
│ │ ├── _navigation.less
│ │ ├── _pages.less
│ │ ├── _popups.less
│ │ ├── _rating.less
│ │ ├── _resets.less
│ │ ├── _responsive.less
│ │ ├── _sections.less
│ │ ├── _tables.less
│ │ ├── _tooltips.less
│ │ ├── _typography.less
│ │ ├── _utilities.less
│ │ └── _variables.less
│ ├── _extend.less
│ └── _theme.less
├── fonts/
│ └── Blank-Theme-Icons/ (Library custom icons font)
├── images/
│ └── blank-theme-icons.png (Library icons sprite)
└── jquery/ (Library javascript files)

See how it looks: http://demoleotheme.com/vigoss/pub/static/frontend/Magento/blank/en_US/css/docs/index.html

Learn More Magento 2 tutorials :

Share this Post!

Alena Dao
Alena Dao
“Good marketing makes the company look smart. Great marketing makes the customer feel smart.”

0 Comment

Leave a Comment

Your email address will not be published.

Do NOT follow this link or you will be banned from the site!