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) |