Create a skin
When you have created and setup a skins file it's time to skin PAM the way you want. First of make sure you are familiar with Less. To customize and extend PAM in a efficent way there is a best practice to follow.
Variables
First resort of customization is by overwriting default variables. Global variables can be found in the /src/less/variables.less
file. For components the variables resides in respective Less file which also can be overriden.
Find a Less variable you want to change. For example, the primary skin color which is defined in /src/less/variables.less
.
// default value
@skin-primary: #008ed5;
Now, override the default value by setting a new value inside /skins/my-skin.less
.
// new value
@skin-primary: #666;
Compile the build and the CSS will have the new value. Since a global variable have been changed many components and other global varibales use this variable and will be updated accordingly. So changing some global variables will result in a totally diffrent skin. This also gives the control to change the skin on a global or component level depending on what type of variable have been modified.
Hooks
To prevent creation of overhead selectors, Less mixins hooks are declared in all components which hook into predefined selectors. Available hooks are documented in the style guide for every component. This way it's easy to change or apply additional properties.
Look trough the style guide and find a rule to extend. Lets take the divider component as an example /src/less/divider.less
.
[pam-Divider] {
border: 0;
border-top: @divider-size solid @divider-color;
box-sizing: content-box;
display: block;
height: 0;
margin: 0;
// Mixin hook
.hook-divider;
}
Now inject an additional CSS property by using the hook inside the new and shiny skin file (/skins/my-skin.less
). Lets be bold and reuse a global and local variable to set the value for the new declaration.
// Divider
.hook-divider() { border-bottom: @divider-size solid @skin-dark; }