Skin folder structure
In the examples so far all custom changes have been made in one file /skins/my-skin.less
. This is fine as long as there only a few variables and hooks calls. But if your skin requires larger modification it's recommended to use a complete folder structure for the skin and use /skins/my-skin.less
as an entry point. All variables and hooks should be put into single files per component.
Following example shows how to stucture the skins folder if it's used in the PAM build and is placed in the root directory. If you have the skins folder in your own project adapt the paths to that.
skins/
<!-- entry file -->
my-skin.less
<!-- skin source folder -->
my-skin/
<!-- imports all custom stuff -->
_custom.less
<!-- one file -> one component -->
accordion.less
alert.less
...
Skin entry point, /skins/my-skin.less
:
// PAM
@import "../src/less/pam.less";
// Skin
@import "my-skin/_custom.less";
The skins/my-skin/_custom.less
file imports all customized components.
@import "alert.less";
@import "buttons.less";
@import ...
// ...
success That's it, your own scalable skin is all setup. Good luck and godspeed!