Crafting UI

Patterns of UI: Typografi, spacing of tekstindhold

design-briller

Components

Design Patterns

Grid System

Design Tokens

Hierarki

Components

Design Patterns

Hierarki

Grid System

Design Tokens

Hvad er forskellen?

"17 individual fixes"

https://tonsky.me/blog/form-cleanup/

https://tokenzengarden.design/

Typografi og spacing

Typografi og spacing

Line-height

https://www.30secondsofcode.org/css/s/unitless-line-height/

https://css-typography-line-height.netlify.app/

Du vil typisk bruge unitless.

use this number multiplied by the element's font size

~ 1.5-1.6 til brødtekst

~ 1.1 til store overskrifter

~ 1.25-1.3 til mindre overskrifter

Prose

UI

Line-height

html {
  line-height: 1.6;
}

h1,
h2 {
  line-height: 1.1;
}

h3 {
  line-height: 1.25;
}

Spacing

https://clagnut.com/blog/2428/

Spacing

Tilføj spacing til kortet

Spacing

https://designforducks.com/ui-spacing-cheat-sheet-a-complete-guide-2/

Spacing

Tilføj spacing til kortet

Spacing

.flow {
  > * + * {
    margin-block-start: var(--flow-space, 1rlh); /* margin-top */
  }
  
  h2 {
    --flow-space: 2rlh;
  }
}

https://piccalil.li/blog/my-favourite-3-lines-of-css/

Flow-space:
spacing som system

øvelse

Flow-space

Lav øvelsen, der ligger på git-branch'en
"flow-space" på GitHub

.flow {
  > * + * {
    margin-top: var(--flow-space, 1rlh);
  }
  
  h2 {
    --flow-space: 2rlh;
  }
}

Toneværdi

Neutrals

Toneværdi

Neutrals

  • Overskrifter: mørkest (næsten sort) for tydeligt fokus.
  • Brødtekst: lidt lysere for roligere tekstflade.
  • Meta/hjælpetekst: endnu lysere, men stadig læsbar.
  • Brug få neutrals og navngiv dem systematisk.
  • Tjek kontrast især på small/meta og på lyse baggrunde.

Toneværdi

Neutrals

:root {
  --color-text-strong: oklch(0.18 0 0);
  --color-text: oklch(0.26 0 0);
  --color-text-muted: oklch(0.48 0 0);
  --color-text-accent: oklch(0.54 0.22 143.88);

  --color-bg: oklch(0.99 0 0);
  --color-bg-surface1: oklch(0.97 0 0);
  --color-bg-surface2: oklch(0.94 0 0);

  --color-border: oklch(0.3 0 0 / 12%);
}

rlh?

Units

lh & rlh

Vertical rythm

article {
  padding: 2rlh;
  gap: 1rlh;
}

lh & rlh

Rytme

cap & rcap

Typografi

https://utopia.fyi/clamp/calculator

Fluid type

https://utopia.fyi/type/calculator

Spacing

https://utopia.fyi/space/calculator​

Fluid spacing

https://utopia.fyi/clamp/calculator

Spacing

https://www.youtube.com/watch?v=X9uEszeeSOk

https://georgefrancis.dev/writing/fluid-design-with-css-round/

https://uxdesign.cc/the-4px-baseline-grid-89485012dea6​

øvelse

Styling af tekstindhold

Lav øvelsen, der ligger på git-branch'en
"text-styling" på GitHub

øvelse

Card UI

Diskuter og identificer mulige forbedringer til dette card UI sammen med din sidemakker.

Lav derefter øvelsen, der ligger på git-branch'en "card-ui" på GitHub

Øvrige

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

Øvrige

p:first-letter {
  initial-letter: 3;
}

Øvrige

Øvrige

Øvrige

Crafting UI: The patterns of UI

By Dannie Vinther

Crafting UI: The patterns of UI

Crafting UI w/ CSS

  • 409

More from Dannie Vinther