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"
Typografi og spacing
Typografi og spacing
Line-height
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 defaults
html {
line-height: 1.6;
}
h1,
h2 {
line-height: 1.1;
}
h3 {
line-height: 1.25;
}Spacing
Spacing
Tilføj spacing til kortet
Spacing
Spacing
Tilføj spacing til kortet
Spacing
.flow {
> * + * {
margin-block-start: var(--flow-space, 1rlh); /* margin-top */
}
h2 {
--flow-space: 2rlh;
}
}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
Fluid type
Spacing
Fluid spacing
Spacing
Lad os lave vores egen
--min-size
--max-size
--min-range
--max-range
Ingredienser
1rem
3rem
400px
1000px
--min-size:
--max-size:
--min-range:
--max-range:
ift. container-bredden
Ingredienser
--min-size
--max-size
--min-range
--max-range
var(
)
var(
)
,
,
100cqw
container-bredden
Ingredienser
returnerer 0-1 i intervallet 400px til 1000px
--min-range
--max-range
var(
)
var(
)
,
,
100cqw
progress(
)
Ingredienser
returnerer 0-1 i intervallet 400px til 1000px
--min-range
--max-range
var(
)
var(
)
,
,
100cqw
progress(
)
Ingredienser
--min-range
--max-range
var(
)
var(
)
,
,
100cqw
progress(
)
--p:
1rem
3rem
Ingredienser
3rem
--min-range
--max-range
var(
)
var(
)
,
,
100cqw
progress(
)
--p:
1rem
Ingredienser
--min-range
--max-range
var(
)
var(
)
,
,
100cqw
progress(
)
--p:
3rem
var(--p) *
calc(
)
= 0rem-3rem
1rem
Ingredienser
--min-range
--max-range
var(
)
var(
)
,
,
100cqw
progress(
)
--p:
2rem
var(--p) *
calc(
)
+
1rem
= 1rem-3rem
(
Ingredienser
--min-range
--max-range
var(
)
var(
)
,
,
100cqw
progress(
)
--p:
3rem
var(--p) *
calc(
)
1rem
)
(
-
+
1rem
Ingredienser
--min-range
--max-range
var(
)
var(
)
,
,
100cqw
progress(
)
--p:
var(--max-size)
var(--p) *
calc(
)
var(--min-size)
)
(
-
+
var(--min-size)
font-size:
Flydende størrelser
article {
--p: progress(100vw, 400px, 1000px);
h2 {
--min-size: 1rem;
--max-size: 3rem;
font-size: calc(var(--p) * (var(--max-size) - var(--min-size)) + var(--min-size));
}
}progress()
Flydende størrelser med progress()
progress()
... returnerer et tal mellem 0 og 1, der repræsenterer en værdis progression fra en startværdi til en slutværdi.
progress(5, 0, 10) /* 0.5 */ø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;
}