P L U M

A highly opinionated, battle-tested design pattern for developing maintainable CSS in a multi-team environment.

graph LR; classDef default fill:#eaeaea,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;

graph TD; classDef default fill:#eaeaea,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;

Tools