Core files contain styles and resets that will be shared across your entire application.
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 CORE active;
How do they work?
Core styles are created with universal and type selectors and can directly affect any properties of an element.
How do I structure the files & folders?
core
└── _base.scss
Generator
You can automatically create and @import core files with the Plum Generator by running the following command:
yo plum:core <name>