Configs are all of your applications configuration variables.
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 CONFIG active;
How do they work?
Your configs should consist of and be broken down into the following sections:
$color- configuration variables specific to color values. [?]$icon- configuration variables specific to icons. [?]$image- configuration variables specific to images. [?]$layout- configuration variables specific to layouts and grids. [?]$typography- configuration variables specific to typography. [?]
How do I structure their files and folders?
configs
├── config-one
│ ├── partials
│ │ ├── _colors.scss
│ │ ├── _icons.scss
│ │ ├── _images.scss
│ │ ├── _layouts.scss
│ │ └── _typography.scss
│ └── _index.scss
└── config-two
├── partials
│ ├── _colors.scss
│ ├── _icons.scss
│ ├── _images.scss
│ ├── _layouts.scss
│ └── _typography.scss
└── _index.scss
Note
- You can have multiple configs if you need to quickly change the overall "look and feel" of your application.
Generator
You can automatically create and @import config files with the Plum Generator by running the following command:
yo plum:config <name>