Traits
Traits provide a collection of helper rule sets.
Skin
A set of colors that is used as base in all PAM components. They all have their specific contextual intention and usage.
Primary
Colors used to represent primary and complementary interface elements.
@skin-primary-light
@skin-primary
@skin-primary-dark
@skin-accent
@skin-feature
@skin-divider
Markup
<div pam-Grid>
<div pam-Unit="1-1 medium:1-3">
<div pam-Skin-Test pam-skin="primary:light">@skin-primary-light</div>
</div>
<div pam-Unit="1-1 medium:1-3">
<div pam-Skin-Test pam-skin="primary">@skin-primary</div>
</div>
<div pam-Unit="1-1 medium:1-3">
<div pam-Skin-Test pam-skin="primary:dark">@skin-primary-dark</div>
</div>
<div pam-Unit="1-1 medium:1-3">
<div pam-Skin-Test pam-skin="accent">@skin-accent</div>
</div>
<div pam-Unit="1-1 medium:1-3">
<div pam-Skin-Test pam-skin="feature">@skin-feature</div>
</div>
<div pam-Unit="1-1 medium:1-3">
<div pam-Skin-Test pam-skin="divider">@skin-divider</div>
</div>
</div>Information
Colors used to represent information interface elements.
@skin-info
@skin-success
@skin-warn
@skin-danger
Markup
<div pam-Grid>
<div pam-Unit="1-1 medium:1-4">
<div pam-Skin-Test pam-skin="info">@skin-info</div>
</div>
<div pam-Unit="1-1 medium:1-4">
<div pam-Skin-Test pam-skin="success">@skin-success</div>
</div>
<div pam-Unit="1-1 medium:1-4">
<div pam-Skin-Test pam-skin="warn">@skin-warn</div>
</div>
<div pam-Unit="1-1 medium:1-4">
<div pam-Skin-Test pam-skin="danger">@skin-danger</div>
</div>
</div>Greyscales
Base greyscales colors.
@skin-lighter
@skin-light
@skin-hint
@skin-dark
@skin-darker
Markup
<div pam-Grid>
<div pam-Unit="1-1 medium:1-5">
<div pam-Skin-Test pam-skin="lighter">@skin-lighter</div>
</div>
<div pam-Unit="1-1 medium:1-5">
<div pam-Skin-Test pam-skin="light">@skin-light</div>
</div>
<div pam-Unit="1-1 medium:1-5">
<div pam-Skin-Test pam-skin="hint">@skin-hint</div>
</div>
<div pam-Unit="1-1 medium:1-5">
<div pam-Skin-Test pam-skin="dark">@skin-dark</div>
</div>
<div pam-Unit="1-1 medium:1-5">
<div pam-Skin-Test pam-skin="darker text">@skin-darker</div>
</div>
</div>Text
Colors used to represent text interface elements
@skin-text
@skin-text-hint
@skin-text-light
@skin-text-lighter
@skin-text-primary
@skin-text-secondary
@skin-text-darker
@skin-dark
Markup
<div pam-Grid>
<div pam-Unit="1-1 medium:1-4">
<div pam-Skin-Test="text:light" pam-skin="text">@skin-text</div>
</div>
<div pam-Unit="1-1 medium:1-4">
<div pam-Skin-Test="text:light" pam-skin="text text:hint">@skin-text-hint</div>
</div>
<div pam-Unit="1-1 medium:1-4">
<div pam-Skin-Test="text:light" pam-skin="text text:light">@skin-text-light</div>
</div>
<div pam-Unit="1-1 medium:1-4">
<div pam-Skin-Test="text:light" pam-skin="text text:lighter">@skin-text-lighter</div>
</div>
</div>
<div pam-Grid>
<div pam-Unit="1-1 medium:1-4">
<div pam-Skin-Test="text" pam-skin="text:primary">@skin-text-primary</div>
</div>
<div pam-Unit="1-1 medium:1-4">
<div pam-Skin-Test="text" pam-skin="text:secondary">@skin-text-secondary</div>
</div>
<div pam-Unit="1-1 medium:1-4">
<div pam-Skin-Test="text" pam-skin="text:darker">@skin-text-darker</div>
</div>
<div pam-Unit="1-1 medium:1-4">
<div pam-Skin-Test="text" pam-skin="text:dark">@skin-dark</div>
</div>
</div>Group
To easily clear floats use the pam-group attribute to clear the parent element.
Floting element
Markup
<div pam-group>
<div style="float:left;">Floting element</div>
</div>Image
Use the pam-image attribute with a img element to nomalize the image size.
Markup
<img pam-Image src="kss-assets/img/icon-60@3x.png">Space
For control of margin and padding spacing use the pam-space trait.
Button
Markup
<div pam-Button pam-space="margin:none">Button</div>Visibility
Hide or make an element invisible with pam-visibility="hidden" / hidden
or pam-visibility="invisible" / invisible. These attributes is a exception for
the use of !important to make sure they do not get overriden.
Default styling
Now u see me!
hidden
Element is hidden and does not take up any space.
Now u see me!
invisible
Element is hidden and still takes up it's space.
Now u see me!
Markup
<div pam-visibility="[modifier attribute]">Now u see me!</div>