Open Props

Gårdsdagens øvelse

  • Hvordan var det?
  • Hvilke spørgsmål havde I?
  • Hvilke værdier brugte i til spacing?

I dag

  • Opsætning af framework

  • Open Props

  • Astro plugins

  • Øvelser

Frameworks

Hvad er et framework?

Kode-bibliotek?

  • Noget, der gør ens arbejde lettere og hurtigere
  • Noget, der gør ens arbejde sværere og langsommere 😅
  • Typisk "rammer" med (stærke) holdninger
  • Begrænset men ensartet
  • Abstraktioner

En analogi

Open Props

Supercharged CSS variables

  • Expertly crafted web *design tokens
  • Create consistent components
  • Useful in any framework

IRL

open-props.style

Øvelse (Task 0)

Genskab følgende design med Open Props

Det skal ikke være 100 % én til én, men så tæt på, som muligt.

blue-7

blue-1

gray-12

Spacing

Erstat dine rå værdier med Open Props

Det skal ikke være 100 % én til én, men så tæt på, som muligt.

@import "https://unpkg.com/open-props";

Open Props + VS Code

Hjælpeværktøjer

Lav template (Task 1-4)

Astro + Open Props

By Dannie Vinther

Astro + Open Props

Open Props introduktion

  • 72

More from Dannie Vinther