⚡️

Level-Up With Modern CSS

Day Three

Presented by Stephanie Eckles • @5t3ph

🤔 ➡️ 🤩

What are some new things you learned about CSS Grid?

Day 3:

• Fluid and site typography
• Navbar component

Typography and Navigation

🚨

Reminder:
A Zip file of the days progress will be added to the collab doc

You will likely not keep up to code along, and may miss information if you try!

Typography

• Recommended units for font-size
• Viewport-aware fluid typography
• Base content styles

Recommended Units for Font Sizing

• rem = primary font-size unit for headlines, body copy
• em = relative font sizing within components
  • generally related to spacing more than additional font sizing

rem vs px

• rem is able to resize based on the user's system preference
  • critical for accessibility
  • Default: 1rem = 16px
• px will resize with browser zoom only

why not em?

• em compounds it's value through inheritance

why not %?

• % will be inconsistent as it's value changes based on inheritance
• % is also not font-relative
• Use em when your goal is font-relative sizing

Defining a Type Scale

• Includes properties like font-family, font-size, font-weight, line-height
• Set up a baseline
  • Already in our reset
• Create rules to scale headings
• Create spacing rules for other content elements

✨ 🔠 ✨

Let's go generate a type scale!

Navigation and Navbar Component

✨Browser Support✨