Modules are flexible and reusable components that are used as the foundation for your application's UI.
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 MODULES active;
See the Pen Module Example by Jason Bellamy (@jasonbellamy) on CodePen.
How do they work?
Modules are built by creating classes under a chosen namespace and should be broken down in to the following sections:
.module- define the default classes and interface for a module. [?].module-m-*- define how a module will adapt relative to its placement. [?].module-s-*- define a condition at a specific time in a module. [?].module-t-*- define the look and feel of a module. [?].module-l-*- define the positioning and layout of a module children. [?]
Notes
- A modules namespace should always be in singular form. e.g.
.buttonnever.buttons.
How do I document them?
Module classes should be documented with a name, description, category, and fixture reference.
How do I test them?
Visual regression tests for modules can be created, setup, and run by following the documentation located here.
How do I structure their files & folders?
modules
└── module
├── partials
│ ├── _base.scss
│ ├── _layout.scss
│ ├── _modifier.scss
│ ├── _state.scss
│ └── _theme.scss
├── tests
│ ├── fixtures
│ │ └── module.hbs
│ └── module.js
└── _index.scss
Generator
You can automatically create and @import module files with the Plum Generator by running the following command:
yo plum:module <name>