Grids
PAM comes with 1ths to 5ths and 24ths based grid and to wield the grids power there are
some concepts to keep in mind. PAM Grid consist of two types of attribute selectors:
pam-Grid and pam-Unit. All child elements of a grid must be units. Child elements
contained within an grid element must be a grid unit. All content which is visible
needs to be contained inside a grid unit.
To control adaptive grids, use the default breakpoints with their
correspinding attribute selector pam-Unit="[breakpointKey]:[size]". For more
details on how to use, have a look at the adaptive grids section.
| Key | Attribute | Applies | Media Query |
|---|---|---|---|
| none | pam-Unit="[size]" | Always | None |
| small | pam-Unit="small:[size]" | ≥ 480px | @media screen and (min-width: 480px) |
| medium | pam-Unit="medium:[size]" | ≥ 768px | @media screen and (min-width: 768px) |
| large | pam-Unit="large:[size]" | ≥ 1024px | @media screen and (min-width: 960px) |
| xlarge | pam-Unit="xlarge:[size]" | ≥ 1280px | @media screen and (min-width: 1200px) |
Fractions
PAM grid supports 1th to 5th and 24th-based grid fractions. Use them
with pam-Unit="[1-X]-X".
Markup
<div pam-Grid>
<div pam-Unit="1-1">
<div pam-Unit-Test>1</div>
</div>
</div>
<div pam-Grid>
<div pam-Unit="1-2">
<div pam-Unit-Test>2</div>
</div>
<div pam-Unit="1-2">
<div pam-Unit-Test>2</div>
</div>
</div>
<div pam-Grid>
<div pam-Unit="1-3">
<div pam-Unit-Test>3</div>
</div>
<div pam-Unit="1-3">
<div pam-Unit-Test>3</div>
</div>
<div pam-Unit="1-3">
<div pam-Unit-Test>3</div>
</div>
</div>
<div pam-Grid>
<div pam-Unit="1-4">
<div pam-Unit-Test>4</div>
</div>
<div pam-Unit="1-4">
<div pam-Unit-Test>4</div>
</div>
<div pam-Unit="1-4">
<div pam-Unit-Test>4</div>
</div>
<div pam-Unit="1-4">
<div pam-Unit-Test>4</div>
</div>
</div>
<div pam-Grid>
<div pam-Unit="1-5">
<div pam-Unit-Test>5</div>
</div>
<div pam-Unit="1-5">
<div pam-Unit-Test>5</div>
</div>
<div pam-Unit="1-5">
<div pam-Unit-Test>5</div>
</div>
<div pam-Unit="1-5">
<div pam-Unit-Test>5</div>
</div>
<div pam-Unit="1-5">
<div pam-Unit-Test>5</div>
</div>
</div>
<div pam-Grid>
<div pam-Unit="4-24">
<div pam-Unit-Test>24</div>
</div>
<div pam-Unit="4-24">
<div pam-Unit-Test>24</div>
</div>
<div pam-Unit="4-24">
<div pam-Unit-Test>24</div>
</div>
<div pam-Unit="4-24">
<div pam-Unit-Test>24</div>
</div>
<div pam-Unit="4-24">
<div pam-Unit-Test>24</div>
</div>
<div pam-Unit="4-24">
<div pam-Unit-Test>24</div>
</div>
</div>Nested
Grids can be nested. This examples shows a two level nested grid...
Markup
<div pam-Grid>
<div pam-Unit="1-2">
<div pam-Unit-Test>
<div pam-Grid>
<div pam-Unit="1-2">
<div pam-Unit-Test>1-2</div>
</div>
<div pam-Unit="1-2">
<div pam-Unit-Test>1-2</div>
</div>
</div>
</div>
</div>
<div pam-Unit="1-2">
<div pam-Unit-Test>
<div pam-Grid>
<div pam-Unit="1-3">
<div pam-Unit-Test>1-3</div>
</div>
<div pam-Unit="1-3">
<div pam-Unit-Test>1-3</div>
</div>
<div pam-Unit="1-3">
<div pam-Unit-Test>1-3</div>
</div>
</div>
</div>
</div>
</div>Adaptive
pam-Unit="1-1 small:1-2 large:1-4" Creates a adaptive grid. On small devices it will
have width: 100%, then it will shrink to width: 50% on small-sized screens and
shrink to 25% on large-sized screens and above.
Markup
<div pam-Grid>
<div pam-Unit="1-1 small:1-2 medium:1-3 large:1-4" pam-hide="small">
<div pam-Unit-Test>1 ➝ 2 ➝ 3 ➝ 4</div>
</div>
<div pam-Unit="1-1 small:1-2 medium:1-3 large:1-4">
<div pam-Unit-Test>1 ➝ 2 ➝ 3 ➝ 4</div>
</div>
<div pam-Unit="1-1 small:1-2 medium:1-3 large:1-4">
<div pam-Unit-Test>1 ➝ 2 ➝ 3 ➝ 4</div>
</div>
<div pam-Unit="1-1 small:1-2 medium:1-3 large:1-4">
<div pam-Unit-Test>1 ➝ 2 ➝ 3 ➝ 4</div>
</div>
</div>Landscape
pam-Unit="1-1 small:1-2 small:landscape:1-3" Creates a adaptive grid which has the
additional landscape state. On a small device and in landscape the unit width will shrink to 33%.
Markup
<div pam-Grid>
<div pam-Unit="1-1 small:1-2 small:landscape:1-3">
<div pam-Unit-Test>1 ➝ 2 ➝ landscape 3</div>
</div>
<div pam-Unit="1-1 small:1-2 small:landscape:1-3">
<div pam-Unit-Test>1 ➝ 2 ➝ landscape 3</div>
</div>
<div pam-Unit="1-1 small:1-2 small:landscape:1-3">
<div pam-Unit-Test>1 ➝ 2 ➝ landscape 3</div>
</div>
</div>Nested
As with the regular grid the adaptive grid can be nested. This example shows
two units pam-Unit="1-1 medium:1-2" that each contain a adaptive grid.
Markup
<div pam-Grid>
<div pam-Unit="1-1 medium:1-2">
<div pam-Unit-Test>
<div pam-Grid>
<div pam-Unit="1-1 large:1-2">
<div pam-Unit-Test>1 ➝ 2</div>
</div>
<div pam-Unit="1-1 large:1-2">
<div pam-Unit-Test>1 ➝ 2</div>
</div>
</div>
</div>
</div>
<div pam-Unit="1-1 medium:1-2">
<div pam-Unit-Test>
<div pam-Grid>
<div pam-Unit="1-3 large:1-2">
<div pam-Unit-Test>3 ➝ 2</div>
</div>
<div pam-Unit="1-3 large:1-4">
<div pam-Unit-Test>3 ➝ 4</div>
</div>
<div pam-Unit="1-3 large:1-4">
<div pam-Unit-Test>3 ➝ 4</div>
</div>
</div>
</div>
</div>
</div>Media items
pam-Image elements can easily be used with the grid. This example shows a pam-Unit="1-1 small:1-2 large:1-4" grid with pam-Image elements.
Markup
<div pam-Grid>
<div pam-Unit="1-1 small:1-2 large:1-4">
<img pam-Image src="kss-assets/img/icon-60@3x.png">
</div>
<div pam-Unit="1-1 small:1-2 large:1-4">
<img pam-Image src="kss-assets/img/icon-60@3x.png">
</div>
<div pam-Unit="1-1 small:1-2 large:1-4">
<img pam-Image src="kss-assets/img/icon-60@3x.png">
</div>
<div pam-Unit="1-1 small:1-2 large:1-4">
<img pam-Image src="kss-assets/img/icon-60@3x.png">
</div>
</div>Controls
Sometimes the grid needs to be adjusted to it´s context. Use the
pam-Grid-Control attribute to adjust different
aspects of the grid such as alignment, order and direction. To better
understand how it all works visit
flexbox playground.
Spacing
Use pam-Grid-Control="space[-x|-y]:[large|small]" to control the spacing of the grid.
Modifier(s):
space: Add spacing to both x and y.space-x: Add spacing to x.space-y: Add spacing to y.
Variable(s):
@grid-spacing: Default grid spacing size (default: 8px).@grid-spacing-large: Large grid spacing (default: 16px).@grid-spacing-small: Small grid spacing (default: 4px).
Markup
<div pam-Grid>
<div pam-Unit="1-1">
<div pam-Unit-Test>
<div pam-Grid pam-Grid-Control="space">
<div pam-Unit="1-2">
<div pam-Unit-Test>Space</div>
</div>
<div pam-Unit="1-2">
<div pam-Unit-Test>Space</div>
</div>
<div pam-Unit="1-2">
<div pam-Unit-Test>Space</div>
</div>
<div pam-Unit="1-2">
<div pam-Unit-Test>Space</div>
</div>
</div>
</div>
</div>
<div pam-Unit="1-1">
<div pam-Unit-Test>
<div pam-Grid pam-Grid-Control="space-x">
<div pam-Unit="1-2">
<div pam-Unit-Test>Space X</div>
</div>
<div pam-Unit="1-2">
<div pam-Unit-Test>Space X</div>
</div>
</div>
</div>
</div>
<div pam-Unit="1-1">
<div pam-Unit-Test>
<div pam-Grid pam-Grid-Control="space-y">
<div pam-Unit="1-1">
<div pam-Unit-Test>Space Y</div>
</div>
<div pam-Unit="1-1">
<div pam-Unit-Test>Space Y</div>
</div>
</div>
</div>
</div>
</div>Direction
Use pam-Grid-Control="direction:[row|row-reverse|column|column-reverse]"
to control the direction of the grid.
Markup
<div pam-Grid pam-Grid-Control="direction:column">
<div pam-Unit="1-3">
<div pam-Unit-Test>Column 1</div>
</div>
<div pam-Unit="1-3">
<div pam-Unit-Test>Column 1</div>
</div>
<div pam-Unit="1-3">
<div pam-Unit-Test>Column 1</div>
</div>
</div>Wrap
Use pam-Grid-Control="wrap:[wrap|wrap-reverse|nowrap]"
to control the wrapping of the grid.
Markup
<div pam-Grid pam-Grid-Control="wrap:nowrap">
<div pam-Unit="1-3">
<div pam-Unit-Test>Nowrap</div>
</div>
<div pam-Unit="1-3">
<div pam-Unit-Test>Nowrap</div>
</div>
<div pam-Unit="1-3">
<div pam-Unit-Test>Nowrap</div>
</div>
</div>Justify content
Use pam-Grid-Control="justify:[start|center|end|between|around|evenly]"
to justify content of a grid.
Markup
<div pam-Grid pam-Grid-Control="justify:start" pam-skin="lighter">
<div pam-Unit="1-3">
<div pam-Unit-Test>Start</div>
</div>
</div>
<div pam-Grid pam-Grid-Control="justify:center" pam-skin="light">
<div pam-Unit="1-3">
<div pam-Unit-Test>Center</div>
</div>
</div>
<div pam-Grid pam-Grid-Control="justify:end" pam-skin="hint">
<div pam-Unit="1-3">
<div pam-Unit-Test>End</div>
</div>
</div>Align items
Use pam-Grid-Control="align:[start|center|end|basline|stretch]"
to align grid items along the cross axis on the current line.
Markup
<div pam-Grid>
<div pam-Unit="1-4" pam-skin="lighter">
<div pam-Grid pam-Grid-Control="align:start" sg-Height="150">
<div pam-Unit="1-1">
<div pam-Unit-Test="stretch">Top</div>
</div>
</div>
</div>
<div pam-Unit="1-4" pam-skin="light">
<div pam-Grid pam-Grid-Control="align:center" sg-Height="150">
<div pam-Unit="1-1">
<div pam-Unit-Test="stretch">Center</div>
</div>
</div>
</div>
<div pam-Unit="1-4" pam-skin="lighter">
<div pam-Grid pam-Grid-Control="align:end" sg-Height="150">
<div pam-Unit="1-1">
<div pam-Unit-Test="stretch">End</div>
</div>
</div>
</div>
<div pam-Unit="1-4">
<div pam-Grid pam-Grid-Control="align:stretch" sg-Height="150">
<div pam-Unit="1-1">
<div pam-Unit-Test="stretch">Stretch</div>
</div>
</div>
</div>
</div>Align content
Use pam-Grid-Control="align-content:[start|center|end|space-between|space-around|stretch]"
to align flex containers lines within.
Markup
<div pam-Grid pam-Grid-Control="align-content:space-between" pam-skin="lighter" sg-Height="150">
<div pam-Unit="1-3">
<div pam-Unit-Test>Column 1</div>
</div>
<div pam-Unit="1-3">
<div pam-Unit-Test>Column 1</div>
</div>
<div pam-Unit="1-3">
<div pam-Unit-Test>Column 1</div>
</div>
<div pam-Unit="1-3">
<div pam-Unit-Test>Column 1</div>
</div>
<div pam-Unit="1-3">
<div pam-Unit-Test>Column 1</div>
</div>
<div pam-Unit="1-3">
<div pam-Unit-Test>Column 1</div>
</div>
</div>Hooks
.hook-grid
.hook-unit