Magento UI library

Magento UI library file structure

Magento UI library structure

Magento UI library naming convention

Less variables naming

Examples:

Acceptable:

Unacceptable:

Less mixins naming

Examples:

Acceptable:

Unacceptable:

Less Code Standards

General rules

Indentation

Format

Braces

Not recommended:

Recommended:

Selector delimiters

Not recommended:

Recommended:

Quotes

Not recommended:

Recommended:

Combinator indents

Not recommended:

Recommended:

Properties line break

Not recommended:

Recommended:

Properties colon indents

Not recommended:

Recommended:

End of file

End of the selector

Not recommended:

Recommended:

End of the property line

Not recommended:

Recommended:

!Important property

Not recommended:

Recommended:

Comments

Selectors

Types

Not recommended:

Recommended:

Naming

Standard classes

Not recommended:

Not recommended: underscore separation

Recommended:

Helper classes

Example:

Size

Not recommended: too long

Not recommended: too short

Recommended:

Writing

Not recommended:

Recommended:

Meaning

Not recommended:

Not recommended: presentational

Recommended: specific

Type selectors

Not recommended:

Recommended:

Not recommended:

Recommended:

Nesting

Not recommended:

Recommended:

Properties

Sort

Not recommended:

Recommended:

Shorthand

Not recommended:

Recommended:

0 and units

Not recommended:

Recommended:

Floating values

Not recommended:

Recommended:

Hexadecimal notation

Not recommended:

Recommended:

Variables

Location

Local variables

Theme variables

Global variables

Naming

Value variables

General model is:

Examples:

Parameter variables

General model is:

Examples:

Mixins

Location

Naming

Example:

Extends

Location

Naming