Naming conventions

General

The less framework is built around css classes composed of:

• the obligatory 'lui' vendor prefix

• an element name, that defines the behavior

• an optional element style, that changes its appearance around

• a list of optional supported adjectives

<div class="lui {adjectives...} {optionalElementStyle} {elementName}"></div>

In the case of a button with the 'wired' style and in the 'primary' color scheme (adjective): <button class="lui primary wired button"></button>

Position

Many lucca-UI elements supports some sort of "position", defined though the "left", "right", "top", "bottom" classes. These positional adjectives often affect a single optional property (text alignment, for example). In order to avoid name colliding (when adding two position-supporting properties), there is a strict class order to respect.

Generally, any positional class must be defined right before the affected adjective.

For example:

<p class="lui left aligned right pulled">My custom text</p>

will define a paragraph whose text is aligned left (left aligned) and which is floated right (right pulled).