Traits
Traits provide a collection of utility helper rule sets.
Display
Control display by using the display trait attribute.
Default styling
Display 1
Display 2
Display 3
block
display block.
Display 1
Display 2
Display 3
inline-block
display inline-block.
Display 1
Display 2
Display 3
inline
display inline.
Display 1
Display 2
Display 3
flex
display flex.
Display 1
Display 2
Display 3
inline-flex
display inline-flex.
Display 1
Display 2
Display 3
Markup
<div pam-space="p:2" pam-skin="bg:gray:100" pam-size="w:1-2">
<div pam-display="[modifier]" pam-skin="bg:gray:300" pam-space="p:4 mb:px">Display 1</div>
<div pam-display="[modifier]" pam-skin="bg:gray:300" pam-space="p:4 mb:px">Display 2</div>
<div pam-display="[modifier]" pam-skin="bg:gray:300" pam-space="p:4 mb:px">Display 3</div>
</div>Hooks
.hook-display
Border
Trait to control border properties width, style, color and radius
with the pam-border attribute.
Width
Control border width. Format pam-border="w:{size}".
Default styling
w
Set border to default width
w%3A0
Set border width to 0.
w%3Apx
Set border width to 1px.
w%3A2
Set border width to 2px.
w%3A4
Set border width to 4px.
Markup
<div pam-border="[modifier]" pam-skin="bg:gray:100" pam-size="w:10 h:3">
</div>Width sides
Control border width for individual sides. Format pam-border="{side}w:{size}".
Default styling
tw%3Apx
Set border to default width
rw%3Apx
Set border to second width
bw%3Apx
Set border to second width
lw%3Apx
Set border to second width
Markup
<div pam-border="[modifier]" pam-skin="bg:gray:100" pam-size="w:10 h:3">
</div>Border style
Control border style. Format pam-border="{style}".
Default styling
no%3Astyle
Set border style to none.
dashed
Set border style to dashed.
dotted
Set border style to dotted.
double
Set border style to double.
solid
Set border style to solid.
Markup
<div pam-border="w:4 [modifier]" pam-skin="bg:gray:100" pam-size="w:10 h:3">
</div>Border color
Control the border color with pam-border={skin-colors}.
Note You always need to declare a border width.
Default styling
primary
Set border color to primary.
primary%3Alight
Set border color to primary light.
primary%3Adark
Set border color to primary dark.
secondary
Set border color to secondary.
secondary%3Alight
Set border color to secondary light.
secondary%3Adark
Set border color to secondary dark.
background
Set border color to backround.
surface
Set border color to surface.
error
Set border color to error.
info
Set border color to info.
success
Set border color to success.
warning
Set border color to warning.
Markup
<div pam-border="w:2 [modifier]" pam-size="w:10 h:3">
</div>Border radius
Control border radius with pam-border="radius:{type}" trait.
Default styling
radius%3Asm
Set border style to none.
radius
Set border style to dashed.
radius%3Alg
Set border style to dotted.
radius%3Arounded
Set border style to double.
Markup
<div pam-border="w:2 [modifier]" pam-size="w:10 h:3">
</div>Hooks
.hook-border
Flex
The flex trait helps with building layouts by utilizing
the css flexbox and the flex specs. It's also used to
control component layouts such as Grid, Lists and Menus.
By default the flex trait is set to display: flex;. To lay out
inline items and their children as flexboxes use the inline modifier.
Default styling
Item 1
Item 2
Item 3
inline
Set display value to inline-flex to lay out inline items as flexboxes.
Item 1
Item 2
Item 3
Markup
<div pam-flex="[modifier]" pam-space="p:2" pam-skin="bg:gray:100">
<div pam-skin="bg:gray:300" pam-space="p:4 mr:2">Item 1</div>
<div pam-skin="bg:gray:300" pam-space="p:4 mr:2">Item 2</div>
<div pam-skin="bg:gray:300" pam-space="p:4">Item 3</div>
</div>Main axis
Control the main axis space and alignment of flex items by using
{ left | right | between | around } modifiers. Default
behaviour is the sames as left.
Default styling
Item 1
Item 2
Item 3
around
Spread items evenly both by position and space.
Item 1
Item 2
Item 3
between
Spread items evenly by position across the axis.
Item 1
Item 2
Item 3
center
Align items at the center.
Item 1
Item 2
Item 3
left
Align items at the start.
Item 1
Item 2
Item 3
right
Align items at the end.
Item 1
Item 2
Item 3
Markup
<div pam-flex="[modifier]" pam-space="p:2" pam-skin="bg:gray:100">
<div pam-skin="bg:gray:300" pam-space="p:4 mr:2">Item 1</div>
<div pam-skin="bg:gray:300" pam-space="p:4 mr:2">Item 2</div>
<div pam-skin="bg:gray:300" pam-space="p:4">Item 3</div>
</div>Cross axis
Control the cross axis placement of flex items by using
{ bottom | middle | stretch | top } modifiers.
Default behaviour is the same as stretch.
Default styling
Item 1
More height
than the others.
Item 2
Item 3
bottom
Align items to the bottom.
Item 1
More height
than the others.
Item 2
Item 3
middle
Center items along the cross axis. stretch -Items fill the height of their parent.
Item 1
More height
than the others.
Item 2
Item 3
top
Align items to the top.
Item 1
More height
than the others.
Item 2
Item 3
Markup
<div pam-flex="[modifier]" pam-space="p:2" pam-skin="bg:gray:100">
<div pam-skin="bg:gray:300" pam-space="p:4 mr:2">
<div pam-typography="body-1">Item 1</div>
<div pam-typography="body-2">More height</div>
<div pam-typography="body-2">than the others.</div>
</div>
<div pam-skin="bg:gray:300" pam-space="p:4 mr:2"> Item 2</div>
<div pam-skin="bg:gray:300" pam-space="p:4 mr:2">Item 3</div>
</div>Direction
Control the direction the main axis runs in with the
{ row | column } direction modifiers. By default it's set to row.
Default styling
Item 1
Item 2
Item 3
column
Lay out items in a column.
Item 1
Item 2
Item 3
column%3Areverse
lay out items in a column from right to left.
Item 1
Item 2
Item 3
row
Lay out items in a row.
Item 1
Item 2
Item 3
row%3Areverse
lay out items in a row from right to left.
Item 1
Item 2
Item 3
Markup
<div pam-flex="[modifier]" pam-space="p:2" pam-skin="bg:gray:100">
<div pam-skin="bg:gray:300" pam-space="p:4 mr:2 mb:2">Item 1</div>
<div pam-skin="bg:gray:300" pam-space="p:4 mr:2 mb:2">Item 2</div>
<div pam-skin="bg:gray:300" pam-space="p:4 mr:2 mb:2">Item 3</div>
</div>Wrap
To control if flex items should be forced onto one line or can wrap onto multiple lines. Flex items are fit into one line by default.
Default styling
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
nowrap
Force items into one line. This is the default behavior.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
wrap
Items wrap into another line when they no longer fit their container.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
wrap%3Areverse
Change direction of wraped so that they run from right to left.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Markup
<div pam-flex="[modifier]" pam-space="p:2" pam-skin="bg:gray:100">
<div pam-size="w:1-3" pam-skin="bg:gray:300" pam-space="p:4 mr:2 mb:2">Item 1</div>
<div pam-size="w:1-3" pam-skin="bg:gray:300" pam-space="p:4 mr:2 mb:2">Item 2</div>
<div pam-size="w:1-3" pam-skin="bg:gray:300" pam-space="p:4 mr:2 mb:2">Item 3</div>
<div pam-size="w:1-3" pam-skin="bg:gray:300" pam-space="p:4 mr:2 mb:2">Item 4</div>
<div pam-size="w:1-3" pam-skin="bg:gray:300" pam-space="p:4 mr:2 mb:2">Item 5</div>
<div pam-size="w:1-3" pam-skin="bg:gray:300" pam-space="p:4 mr:2 mb:2">Item 6</div>
</div>Align content
It aligns multilined flexboxes when there is extra space in the cross-axis, similar to how justify-content aligns items within the main-axis.
Note This property has no effect when the flexbox has only a single line
Default styling
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
wrap%3Aaround
Spread wrapped axis at the top and bottom.
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
wrap%3Abetween
Spread wrapped axis where the first row is at the top and last at the bottom.
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
wrap%3Abottom
Align items to the bottom.
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
wrap%3Amiddle
Cross axis center items.
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
wrap%3Astretch
Stretch items to take up the remaining space of the main axis.
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
wrap%3Atop
Align items to the main axis top.
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Markup
<div pam-flex="wrap [modifier]" pam-space="p:2" pam-skin="bg:gray:100" pam-size="h:10">
<div pam-skin="bg:gray:300" pam-space="p:4 mr:2">Item 1</div>
<div pam-skin="bg:gray:300" pam-space="p:4 mr:2">Item 2</div>
<div pam-skin="bg:gray:300" pam-space="p:4 mr:2">Item 3</div>
<div pam-skin="bg:gray:300" pam-space="p:4 mr:2">Item 1</div>
<div pam-skin="bg:gray:300" pam-space="p:4 mr:2">Item 2</div>
<div pam-skin="bg:gray:300" pam-space="p:4 mr:2">Item 3</div>
</div>Order
Sets the order to lay out an item in a flex or grid container. Items are sorted by ascending order then by their source order.
Default styling
Item 1
Item 2
Item 3
first
Lay out the item as the first.
Item 1
Item 2
Item 3
last
Lay out the item as last in line.
Item 1
Item 2
Item 3
Markup
<div pam-flex="" pam-space="p:2" pam-skin="bg:gray:100">
<div pam-skin="bg:gray:300" pam-space="p:4 mr:2">Item 1</div>
<div pam-flex-order="[modifier]" pam-skin="bg:gray:300" pam-space="p:4 mr:2">Item 2</div>
<div pam-skin="bg:gray:300" pam-space="p:4 mr:2">Item 3</div>
</div>Dimension
Control how a flex item grows or shrinks to fit the space available.
By default flex items don't shrink below their minimum content size.
Set a min-width or min-height to change this behaviour.
Default styling
Item 1
Item 2
Item 3
1
flex item will grow and shrink, ignoring initial size.
Item 1
Item 2
Item 3
auto
flex item will grow and shrink realtive to initial size.
Item 1
Item 2
Item 3
initial
flex item will shrink but not grow.
Item 1
Item 2
Item 3
none
flex item will not grow or shrink.
Item 1
Item 2
Item 3
Markup
<div pam-flex="" pam-space="p:2" pam-skin="bg:gray:100">
<div pam-skin="bg:gray:300" pam-space="p:4 mr:2">Item 1</div>
<div pam-flex-dimension="[modifier]" pam-skin="bg:gray:300" pam-space="p:4 mr:2">Item 2</div>
<div pam-skin="bg:gray:300" pam-space="p:4 mr:2">Item 3</div>
</div>Hooks
.hook-flex
Float
Control floats by using the float trait attribute.
Default styling
Floating element
left
Float left.
Floating element
right
Float right.
Floating element
none
Clear float.
Floating element
group
Clear float for group.
Floating element
Markup
<div pam-border="w:px" pam-space="p:2" pam-float="group">
<div pam-float="[modifier]">Floating element</div>
</div>Hooks
.hook-float
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">Opacity
Trait for controlling element opacity.
Default styling
Opacity
100
Set opacity to
1. In other words it's solid.
Opacity 100
80
Set opacity to 0.8
Opacity 80
60
Set opacity to 0.6.
Opacity 60
40
Set opacity to 0.4
Opacity 40
20
Set opacity to 0.2
Opacity 20
0
Set opacity to 0. In other words it's transparent.
Opacity 0
Markup
<div pam-opacity="[modifier]" pam-skin="primary" pam-space="p:4" pam-size="w:1-2">
<span pam-skin="on:primary">Opacity [modifier]</span>
</div>Hooks
.hook-opacity
Overflow
Control how an element handles overflow content with the overflow trait.
Format {axis}:{type}.
- axis:
{"" | x | y} - type:
{auto | hidden | scroll | visible}
Default styling
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lorem ante, elementum eget tortor id, pellentesque lacinia dolor. Nunc in metus facilisis, scelerisque ante eget, lacinia purus. Nam tincidunt arcu sed libero egestas, sit amet pretium felis laoreet. Aenean quis purus suscipit, venenatis nunc vel, fermentum nisi. Nam a metus dictum, sollicitudin ligula a, mollis est. Phasellus consectetur est nec velit interdum dignissim. Nunc enim felis, porta at nisl ultricies, porta molestie nibh. Nam tincidunt arcu sed libero egestas, sit amet pretium felis laoreet. Aenean quis purus suscipit, venenatis nunc vel, fermentum nisi.
auto
Auto scroll for x and y axis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lorem ante, elementum eget tortor id, pellentesque lacinia dolor. Nunc in metus facilisis, scelerisque ante eget, lacinia purus. Nam tincidunt arcu sed libero egestas, sit amet pretium felis laoreet. Aenean quis purus suscipit, venenatis nunc vel, fermentum nisi. Nam a metus dictum, sollicitudin ligula a, mollis est. Phasellus consectetur est nec velit interdum dignissim. Nunc enim felis, porta at nisl ultricies, porta molestie nibh. Nam tincidunt arcu sed libero egestas, sit amet pretium felis laoreet. Aenean quis purus suscipit, venenatis nunc vel, fermentum nisi.
hidden
Hidden scrolls for x and y axis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lorem ante, elementum eget tortor id, pellentesque lacinia dolor. Nunc in metus facilisis, scelerisque ante eget, lacinia purus. Nam tincidunt arcu sed libero egestas, sit amet pretium felis laoreet. Aenean quis purus suscipit, venenatis nunc vel, fermentum nisi. Nam a metus dictum, sollicitudin ligula a, mollis est. Phasellus consectetur est nec velit interdum dignissim. Nunc enim felis, porta at nisl ultricies, porta molestie nibh. Nam tincidunt arcu sed libero egestas, sit amet pretium felis laoreet. Aenean quis purus suscipit, venenatis nunc vel, fermentum nisi.
scroll
Always show scrolls for x and y axis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lorem ante, elementum eget tortor id, pellentesque lacinia dolor. Nunc in metus facilisis, scelerisque ante eget, lacinia purus. Nam tincidunt arcu sed libero egestas, sit amet pretium felis laoreet. Aenean quis purus suscipit, venenatis nunc vel, fermentum nisi. Nam a metus dictum, sollicitudin ligula a, mollis est. Phasellus consectetur est nec velit interdum dignissim. Nunc enim felis, porta at nisl ultricies, porta molestie nibh. Nam tincidunt arcu sed libero egestas, sit amet pretium felis laoreet. Aenean quis purus suscipit, venenatis nunc vel, fermentum nisi.
Markup
<div pam-overflow="[modifier]" pam-size="h:5" pam-space="p:2" pam-shadow="z2">
<div pam-size="h:10" pam-space="p:2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lorem ante, elementum eget tortor id, pellentesque lacinia dolor. Nunc in metus facilisis, scelerisque ante eget, lacinia purus. Nam tincidunt arcu sed libero egestas, sit amet pretium felis laoreet. Aenean quis purus suscipit, venenatis nunc vel, fermentum nisi. Nam a metus dictum, sollicitudin ligula a, mollis est. Phasellus consectetur est nec velit interdum dignissim. Nunc enim felis, porta at nisl ultricies, porta molestie nibh. Nam tincidunt arcu sed libero egestas, sit amet pretium felis laoreet. Aenean quis purus suscipit, venenatis nunc vel, fermentum nisi.</div>
</div>Hooks
.hook-overflow
Position
The position trait sets how an element is positioned in a document.
Combine position type and location properties to position the element. The space trait
follows the format {type} {location }.
- type -
{static | relative | absolute | fixed | sticky} - location -
{top | right | bottom | left | center | cover}
Note To use absolute positioning correctly you need to apply a relative position to the parent element.
Location
The top, right, bottom and left placement properties sets
the location of positioned elements.
Top
Right
Bottom
Left
Markup
<div pam-Grid>
<div pam-Unit="2-3">
<img pam-image src="kss-assets/img/photo-position.jpg" alt="Joanna Kosinska">
<div pam-position="absolute top" pam-overlay="light" pam-flex="center">Top</div>
<div pam-position="absolute right" pam-overlay="light" pam-flex="middle">Right</div>
<div pam-position="absolute bottom" pam-overlay="light" pam-flex="center">Bottom</div>
<div pam-position="absolute left" pam-overlay="light" pam-flex="middle">Left</div>
</div>
</div>Explicit locations
Control location of a element in more detail by using combination
of the format {x}:{y} that won't spread across the element.
- x -
{left | center | right} - y -
{top | center | bottom}
Top left
Top center
Top right
Center left
Center
Center right
Bottom left
Bottom center
Bottom right
Markup
<div pam-Grid>
<div pam-Unit="2-3">
<img pam-image src="kss-assets/img/photo-position.jpg" alt="Joanna Kosinska">
<div pam-position="absolute top:left" pam-overlay="light" pam-flex="center">Top left</div>
<div pam-position="absolute top:center" pam-overlay="light" pam-flex="middle">Top center</div>
<div pam-position="absolute top:right" pam-overlay="light" pam-flex="middle">Top right</div>
<div pam-position="absolute center:left" pam-overlay="light" pam-flex="middle">Center left</div>
<div pam-position="absolute center" pam-overlay="light" pam-flex="middle">Center</div>
<div pam-position="absolute center:right" pam-overlay="light" pam-flex="center">Center right</div>
<div pam-position="absolute bottom:left" pam-overlay="light" pam-flex="middle">Bottom left</div>
<div pam-position="absolute bottom:center" pam-overlay="light" pam-flex="middle">Bottom center</div>
<div pam-position="absolute bottom:right" pam-overlay="light" pam-flex="middle">Bottom right</div>
</div>
</div>Outside
Position elements outside of the parent element element by using the out modifier.
Center left
Center right
Markup
<div pam-Flex="center">
<div pam-size="w:1-2" pam-position="relative">
<img pam-image src="kss-assets/img/photo-position.jpg" alt="Joanna Kosinska">
<div pam-position="absolute center:left out" pam-overlay="dark" pam-flex="middle">Center left</div>
<div pam-position="absolute center:right out" pam-overlay="dark" pam-flex="center">Center right</div>
</div>
</div>Cover
To make a position element cover its parent element use the cover
location poperty.
Cover
Markup
<div pam-Grid>
<div pam-Unit="2-3">
<img pam-image src="kss-assets/img/photo-position.jpg" alt="Joanna Kosinska">
<div pam-position="absolute cover" pam-overlay="light" pam-flex="center middle">Cover</div>
</div>
</div>Shadow
Add shadow elevation to an element with the shadow trait. Format z{number},
where numbers is 0-24.
Default styling
z1
Shadow elevation 1.
z5
Shadow elevation 5.
z10
Shadow elevation 10.
z15
Shadow elevation 15.
z20
Shadow elevation 20.
z24
Shadow elevation 24.
Markup
<div pam-shadow="[modifier]" pam-space="p:4" pam-size="w:1-3 h:3"></div>Hooks
.hook-shadow
Size
Control element dimensions width, min-width, max-width, height, min-height, max-height which follows the format pam-size="{type}:{size | fractions}".
- selector:
pam-size, - type:
w = width|h = height - size:
0-20|full|auto|viewport - fractions:
@fractions = 1, 2, 3, 4, 5, 6
Auto Width
Set width to auto with w:auto.
Width auto
Markup
<div pam-size="w:auto" pam-space="p:2" pam-skin="bg:gray:200">Width auto</div>Viewport Width
Set width to cover the enitre width of the viewport with w:viewport.
Markup
<div pam-space="pb:4" pam-overflow="auto">
<div pam-size="w:viewport h:1" pam-skin="bg:gray:200"></div>
</div>Fixed Width
Set a fixed width with w:{ number }px. These are exact pixel widths
which covers multiples of four up to 12px.
Default styling
w%3Apx
Set width to 1px.
w%3A2px
Set width to 2px.
w%3A4px
Set width to 4px.
w%3A8px
Set width to 8px.
w%3A12px
Set width to 12px.
Markup
<div pam-size="[modifier] h:1" pam-skin="bg:gray:200"></div>Fixed multiplier width
Set a fixed width with w:{ number }. With the range 0-20
and the multiplier for number is 16.
Default styling
w%3A0
Set width to 0.
w%3A1
Set width to 1 * multiplier.
w%3A5
Set width to 5.* multiplier
w%3A10
Set width to 10 * multiplier.
w%3A15
Set width to 15 * multiplier.
w%3A20
Set width to 20 * multiplier.
Markup
<div pam-size="[modifier] h:1" pam-skin="bg:gray:200"></div>Fraction Width
To set percentage based width use w:{ fraction } or w:full.
By default supported fractions are 1, 2, 3, 4, 5, 6.
Default styling
w%3A1-6
Set width to 1/6.
w%3A1-5
Set width to 1/5.
w%3A1-4
Set width to 1/4.
w%3A1-3
Set width to 1/3.
w%3A1-2
Set width to 1/2.
w%3Afull
Set width to full.
Markup
<div pam-flex pam-skin="primary:light">
<div pam-size="[modifier] h:2" pam-text="center" pam-skin="primary on:primary">
</div>
</div>Responsive Width
To set percentage based width use w:{ fraction } or w:full.
By default supported fractions are 1, 2, 3, 4, 5, 6.
Tip Adjust the window width to see the widths change.
Default styling
sm%3Aw%3A1-6
Set width to 1/6 from small screen and up.
md%3Aw%3A1-5
Set width to 1/5 from medium screen and up.
lg%3Aw%3A1-4
Set width to 1/4 from large screen and up.
xl%3Aw%3A1-3
Set width to 1/3 from xlarge screen and up.
Markup
<div pam-flex pam-skin="primary:light">
<div pam-size="w:full [modifier] h:2" pam-text="center" pam-skin="primary on:primary">
</div>
</div>Min-Width
Control minimum width with min-w:0 or min-w:full.
Min width full
Markup
<div pam-space="p:4" pam-skin="bg:gray:100">
<div pam-size="min-w:full" pam-skin="bg:gray:300" pam-space="p:4">
Min width full
</div>
</div>Max-Width
To set max-width of an element use max-w:{ size }. Default supported max
width sizes are the screen width sizes.
Default styling
max-w%3Asm
Set maxium width to small.
max-w%3Amd
Set maxium width to medium.
max-w%3Alg
Set maxium width to large.
max-w%3Axl
Set maxium width to xlarge.
Markup
<div pam-size="[modifier] h:1" pam-skin="bg:gray:200"></div>Auto Height
Set height to auto with w:auto.
Height auto
Markup
<div pam-size="h:auto w:10" pam-space="p:4" pam-skin="bg:gray:200">Height auto</div>Viewport Height
Set height to viewport height with w:viewport.
Markup
<div pam-size="h:viewport" pam-skin="bg:gray:200"></div>Fixed height
Set a fixed height with h:{ number }px. These are exact pixel heights
which covers multiples of four up to 12px.
Default styling
h%3Apx
Set height to 1px.
h%3A2px
Set height to 2px.
h%3A4px
Set height to 4px.
h%3A8px
Set height to 8px.
h%3A12px
Set height to 12px.
Markup
<div pam-size="[modifier] w:2" pam-skin="bg:gray:200"></div>Fixed multiplier height
Set a fixed height with h:{ number | px }. Multiplier for number is 16.
Default styling
h%3A0
Set height to 0.
h%3A1
Set height to 1 * multiplier.
h%3A2
Set height to 2.* multiplier
h%3A3
Set height to 3 * multiplier.
h%3A4
Set height to 4 * multiplier.
h%3A5
Set height to 5 * multiplier.
Markup
<div pam-size="[modifier] w:2" pam-skin="bg:gray:200"></div>Full Height
Set height to 100% of parent element with w:full.
Markup
<div pam-size="h:15">
<div pam-size="h:full w:5" pam-skin="bg:gray:200"></div>
</div>Min-Height
Control minimum height with min-h:0, min-h:full and min-h:viewport.
Min height full
Markup
<div pam-size="h:10" pam-space="p:4" pam-skin="bg:gray:100">
<div pam-size="min-h:full" pam-flex="center middle" pam-skin="bg:gray:300" pam-space="p:4">
Min height full
</div>
</div>Max-Height
Control maximum height with max-h:full or max-h:viewport.
Max height full
Markup
<div pam-size="h:4" pam-space="p:4" pam-skin="bg:gray:100">
<div pam-size="max-h:full" pam-flex="center middle" pam-skin="bg:gray:300" pam-space="p:4">
Max height full
</div>
</div>Hooks
.hook-size
Space
Control margin and padding with the space trait which
follows the format {type}{side}:{size}
- type -
{p = padding | m = margin}, - side -
{t = top | r = right | b = bottom | l = left} - size -
{0-8, multiplier is 4}
Special cases:
- side -
{x = left and right | y = top and bottom} - size -
{ auto = set margin to auto }
<!-- SPACING ON ALL SIDES (p = padding, m = margin) -->
<div pam-space="p">Padding on all sides</div>
<!-- SPACING ON TWO SIDES (x = lef and right, y = top and bottom) -->
<div pam-space="px">Padding on left and right side</div>
<!-- SPACING ON ONE SIDE (t = top, r = right, b = bottom, l = left) -->
<div pam-space="pt">Padding on the top side</div>
<!-- SPACING SIZE ({0-8}, multiplier of 4) -->
<div pam-space="p:0">Padding 0 on all sides</div>
<div pam-space="p:2">Size 2 padding on all sides</div>
<div pam-space="pl:2">Size 2 padding on left side</div>
<!-- AUTO -->
<div pam-space="m:auto">Margin auto on left and right side</div>
<!-- NONE -->
<div pam-space="none">Margin 0 and Padding 0 on all sides</div>
<div pam-space="m:0">Margin 0 on left and right side</div>
Hooks
.hook-space
Text
Trait for controlling element text properties. such as alignment,
decoration and transform.
Align
Trait for controlling element text alignment.
Default styling
Text
left
Align text to the left.
Text
center
Center align.
Text
right
Align text to the right.
Text
justify
Justify text.
Text
Markup
<p pam-text="[modifier]">Text</p>Decoration
Controls for text decoration.
Default styling
Some interesting text.
underline
Set element text to underline.
Some interesting text.
line-through
Set element text to line-through.
Some interesting text.
decoration%3Anone
Remove decoration.
Some interesting text.
Markup
<p pam-text="[modifier]">Some interesting text.</p>Transform
Controls for element text transform.
Default styling
some cool text.
uppercase
Transform element text to uppercase.
some cool text.
lowercase
Transform element text to lowercase.
some cool text.
capitalize
Transform element text to capitalization.
some cool text.
transform%3Anone
Remove transform.
some cool text.
Markup
<p pam-text="[modifier]">some cool text.</p>Hooks
.hook-text
Visibility
To control the visibility of an element. Use pam-{visible | invisible} for
visibility and pam-hidden to hide an element that takes up no space.
You can also use the shorthand for these properties which are
visible| invisibleand hidden.
Visible
Invisible
Not Invisible
Hidden
Not Hidden
Markup
<div pam-Grid pam-Grid-Control="space-x">
<div pam-Unit="1-2 medium:1-3">
<div pam-visibile pam-Alert="simple">
Visible
</div>
</div>
<div pam-Unit="1-2 medium:1-3">
<div pam-Alert="simple success">Invisible</div>
<div pam-invisible pam-Alert="simple" pam-position="absolute cover" pam-space="m:0">
Not Invisible
</div>
</div>
<div pam-Unit="1-2 medium:1-3">
<div pam-Alert="simple success">Hidden</div>
<div pam-hidden pam-Alert="simple" pam-position="absolute cover" pam-space="m:0">
Not Hidden
</div>
</div>
</div>Hide
To hide a element at a specific screen size use
the hide trait. It uses the format {size}:{direction}.
- size -
{ sm | md | lg | xl } - direction -
{ "" | up | down }
<div pam-hide="{size}">Affects device widths that's in the size range</div>
<div pam-hide="{size}:{direction}">Affects device widths below or over the declared size</div>
Tip Adjust the window width to see the hiding in action.
Default styling
Small
sm%3Adown
Hides elements for device widths under the small breakpoint.
Small
sm
Hides elements for device widths that're in the small range.
Small
sm%3Aup
Hides elements for device widths from the small breakpoint and up.
Small
Markup
<div pam-flex="wrap">
<div pam-hide="[modifier]" pam-size="w:full md:w:1-5">
<div pam-skin="bg:gray:200" pam-space="p:4">
<span>Small</span>
</div>
</div>
</div>Touch
Use the pam-hide="touch" and pam-hide="no:touch" to hide a element
on a touch device or a none touch device.
Hidden Touch
Hidden Touch
Hidden No Touch
Hidden No Touch
Markup
<div pam-Grid pam-Grid-Control="space-x">
<div pam-Unit="1-2 medium:1-3">
<div pam-Alert="simple success">Hidden Touch</div>
<div pam-hide="touch" pam-Alert="simple" pam-position="absolute cover" pam-space="m:0">Hidden Touch</div>
</div>
<div pam-Unit="1-2 medium:1-3">
<div pam-Alert="simple success">Hidden No Touch</div>
<div pam-hide="no:touch" pam-Alert="simple" pam-position="absolute cover" pam-space="m:0">Hidden No Touch</div>
</div>
</div>Z-Index
Trait for controlling element z-index.
Format: pam-z="{number}", supported numbers are 0-24.
Markup
<div pam-position="relative">
<div pam-z="0" pam-size="w:7 h:7" pam-space="mb:6" pam-skin="bg:gray:200"></div>
<div pam-z="1" pam-position="absolute top" pam-size="w:7 h:7" pam-space="ml:2 mt:2" pam-skin="bg:gray:400"></div>
<div pam-z="2" pam-position="absolute top" pam-size="w:7 h:7" pam-space="ml:4 mt:4" pam-skin="bg:gray:600"></div>
<div pam-z="3" pam-position="absolute top" pam-size="w:7 h:7" pam-space="ml:6 mt:6" pam-skin="bg:gray:800"></div>
</div>Hooks
.hook-z