search

kids-first / kf-uikit

🎨 Design System for Kids First
https://kf-uikit.netlify.com
Apache License 2.0
1 stars 1 forks source link

📝 typographic molten leading updates #88

Closed bdolly closed 5 years ago

bdolly commented 5 years ago

Motivation

Updates the css and docs for the molten leading technique used to fluidly scale rem sizing. This technique forms the backbone of all spacing values in the design system. The previous implementation did not properly scale headings and spacing values as the calculation was made on the body element and not the html element. Rem values are based on the font-size property fo the html element.

This also adds the Font Sizing story that outlines the methodology and calculations used.

Use Cases

  1. type heading sizes

  2. rem based margin and padding values spacing

  3. rem based grid gap and column width

  4. all rem based values

API changes

This changes the rem value calculations for font-size, margin, and padding. Thus these values will scale according to the table values in the Font Sizing story.

Implementation Notes

in src/styles/typography.css the value 1.1428571429 is calcualted by 

1em = 1rem = 14px min font-size

    thus

 16px max font-size = 16/1em = 1.1428571429
dankolbman commented 5 years ago

UIKit Storybook for Review

Built with commit c87bd6f5b34c50fec954caf8354bfc1a293c8dd0

https://deploy-preview-88--kf-uikit.netlify.com

bdolly commented 5 years ago

Can you put an emoji in the PR title?

for some reason my emojis don't always work in the title