Units are finalized pieces of your applications UI that are built out of custom styles and on top of modules.
graph LR;
classDef default fill:#eaeaea,stroke:#666,stroke-width:2px;
classDef active fill:#fff,stroke:#666,stroke-width:2px;
CONFIG(Configs);
CORE(Core);
VENDORS(Vendors);
MODULES(Modules);
LAYOUTS(Layouts);
UNITS(Units);
PAGES(Pages);
HELPERS(Helpers);
HOTFIXES(Hotfixes);
EXPORTS(Exports);
CONFIG-->CORE;
HELPERS-->CORE;
CORE-->VENDORS;
VENDORS---LAYOUTS;
VENDORS---MODULES;
MODULES---UNITS;
LAYOUTS---UNITS;
UNITS-->PAGES;
PAGES-->HOTFIXES;
HOTFIXES-->EXPORTS;
class UNITS active;
See the Pen Footer Unit example (Step 2) by Jason Bellamy (@jasonbellamy) on CodePen.
How do they work?
Units can directly affect all the properties of an element and are built by creating classes under a chosen namespace and by extending and subclassing existing modules.
.unit- chosen define the default classes and interface for a unit..unit-child- define the child classes of a unit..unit-module- extend and subclass an existing module for use in a unit.
How do I document them?
Units should be documented with a name, description, fixture reference, and category.
How do I test them?
Visual regression tests for units can be created, setup, and run by following the documentation located here.
How do I structure their files & folders?
units
└── unit
├── _index.scss
└── tests
├── baselines
│ └── unit.png
├── fixtures
│ └── unit.hbs
└── unit.js
Generator
You can automatically create and @import a unit file with the Plum Generator by running the following command:
yo plum:unit <name>