Components

.componentName

Ignite is a libary of different interface components. Components are self-contained objects. You can think of components as custom elements that enclose specific semantics, styling, and behaviour. Every component is stored in its LESS file — button.less, form.less etc. All LESS files are catagolized in the viur.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, descendant 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 seperate 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 descendant node of a component. It's responsible for applying presentation directly to the descendant on behalf of a particular component.

Component variation

.componentName-vVariationName

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 lowerCamelCase.
  • Component parts are seperated by a hyphen.
  • Component variation names are separated from the component name by a hyphen and a small v.

Generic elements

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

.mygrid {
	.grid(10px, 12) // default values: @gridSpace, @gridColumns
}

The code above init the grid system. Now you can use it with the namespace .mygrid-.