We use fluid scaling for typography, meaning we don’t need to specify exact breakpoints. Instead, we define
sizes for desktop & mobile and use relative units for the other values to allow the styles to scale seamlessly
without much work. With this in mind, it’s important to ensure line-height and letter-spacing are set in
percentage (%) values, not pixels.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Body
Caption
Utility
Fluid Utility
We use fluid scaling for utility classes, meaning we don’t need to specify exact breakpoints. Instead, we
define sizes for desktop & mobile and use relative units for the other values to allow the styles to scale
seamlessly without much work.
Following are the utilities are available available:
fluid-text-[mobile|desktop]
fluid-line-height-[mobile|desktop]
fluid-gap-[mobile|desktop]
fluid-pl-[mobile|desktop]
fluid-pr-[mobile|desktop]
fluid-pb-[mobile|desktop]
fluid-pt-[mobile|desktop]
fluid-ml-[mobile|desktop]
fluid-mr-[mobile|desktop]
fluid-mb-[mobile|desktop]
fluid-mt-[mobile|desktop]
fluid-inset-[mobile|desktop]
fluid-top-[mobile|desktop]
fluid-right-[mobile|desktop]
fluid-bottom-[mobile|desktop]
fluid-left-[mobile|desktop]
fluid-size-[mobile|desktop]
Note: Replace mobile with Mobile Pixel Size Base and desktop with Desktop Size base
Typically, this component would be rendered dynamically as part of section blocks, or something similiar, and the
attributes could all be controlled dynamically. For the sake of the styleguide, I've hardcoded three tabs.
