Ignite is a library 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 —
All LESS files are categorized in the
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 separate its enclosed specifics from the rest of the
Namespacing should be made at a descriptive, functional level.
Prefer components over page level styles.
Pages should largely be reusing the general component level styles, such as
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.
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.
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.
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.
- 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 hyphen.
Generic elements are built as less mixin function, so they have to initialize before use.
The code above init the table. Now you can use it with the namespace