This pattern library is built using Fractal.
We use a modular class-based approach to applying styles. This is based on concepts found in systems such as SMACSS and BEM. The goal is extensibility through encapsulation. Every class is a module (sometimes prefixed with either u-, l-, or o- to denote different behavior). All modules follow the same structure:
The key concept is that the core module defines the rules and states (states override base rules). Submodules inherit the core module’s rules and states and override them as needed.
Base rules can be found in screen.scss. These rules apply to the project as a whole without the need for module classes. Additionally, variables that are used throughout the project can be found in _base.scss and are outlined in the Base Rules documentation.
Utilities are prefixed with u-, contain no states, and are typically mixed-n-matched to build the smallest portions of the user interface.
Modules have no prefix and build up the aesthetic portions of the user interface. States always indicate modules.
Layouts are prefixed with l-, contain states, and are used to organize modules within the user interface. Layouts have no appearance or aesthetics associated with them.
Overrides are prefixed with o- and are used to override other modules. Typically overrides are used for themes but can serve a variety of purposes within the user interface. Overrides are the only module allowed to directly style other modules (A .o-theme1 .button selector for example).
Demos represent how utilities, modules, layouts, and overrides come together to create views within the application.
Previews are the base templates which contain the repeated elements across multiple demos. They also represent the expected structure of the overall DOM.