Layouts provide a top-level structure and/or grid for your applications modules and units.
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 LAYOUTS active;
See the Pen Module Example by Jason Bellamy (@jasonbellamy) on CodePen.
How do they work?
Layouts should only contain properties that affect the positioning and structure of an element and its direct children and are built by creating parent/child/modifier classes under a chosen namespace.
.l-layout- define the base class of a layout..l-layout-child- define the child classes of a layout..l-layout-m-*- define the modifier classes of a layout.
Notes
- Layouts should only affect the position of the base layout class and its direct children, never the content inside of them.
How do I document them?
Layouts should be documented with a name, description, fixture reference, and category.
How do I test them?
Visual regression tests for layouts can be created, setup, and run by following the documentation located here.
How do I structure their files & folders?
layouts
└── layout
├── _index.scss
└── tests
├── baselines
│ └── layout.png
├── fixtures
│ └── layout.hbs
└── layout.js
Generator
You can automatically create and @import a layout file with the Plum Generator by running the following command:
yo plum:layout <name>