Components

.component-name

Ignite is a library of different interface components. Components are self-contained objects. You can think of components as custom elements that incorporate specific semantics, styling, and behaviour. Every component is stored in its LESS file — button.less, form.less etc. All LESS files are categorized in the ignite.less.

Component driven development offers several benefits when reading and writing HTML and CSS:

It helps to distinguish between the classes for the root of the component, descendent elements, and modifications.
It keeps the specificity of selectors low.
It helps to decouple presentation semantics from document semantics.

Every component has to create its own namespace to separate its enclosed specifics from the rest of the page, like .input- or .footer-. Namespacing should be made at a descriptive, functional level.

Page styling

Prefer components over page level styles. Pages should largely be reusing the general component level styles, such as .btn or .wrap. Page level name-spaces however can be helpful for overriding generic components in very specific contexts. Page level overrides should be minimal and under a single page level class nest.

Nesting

Avoid nesting whenever possible. Nesting makes it harder to tell at a glance where css selector optimizations can be made. Although in the name (cascading style sheets) cascading can introduce unnecessary performance overhead for applying styles.

Component parts

.componentname-partname

A component part is a class that is attached to a descendent node of a component. It's responsible for applying presentation directly to the descendant on behalf of a particular component.

Component variation

.componentname--variationname

A component variation is a class that modifies the presentation of the base component in some form, e.g. color, direction or size. The class should be included in the HTML in addition to the base component class.

Syntax

Components, component parts and component variations are writen in lowercase.
Component parts are separated by a hyphen.
Component variation names are separated from the component name by two hyphens.

Generic elements

Generic elements are built as less mixin function, so they have to be initialized before use.


			.table {
			  .genericTable(); // ignite mixin

			  width: 100%; // custom styling
			}

The code above initializes the table. Now you can use it with the namespace .table-.