CRAFTING UI
Frontend Design
Patterns of UI
Typografi, spacing of tekstindhold
Components
Design Patterns
Grid System
Design Tokens
Hierarki
Components
Design Patterns
Hierarki
Grid System
Design Tokens
Hvad er forskellen?
"17 individual fixes"
?
Color tokens
#495dc5
100
200
300
400
500
600
700
800
Color tokens
100
200
300
400
500
600
700
800
Color tokens
200
500
800
Color tokens
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
Line-height
Prose
UI
Line-height defaults
html {
line-height: 1.6;
}
h1,
h2 {
line-height: 1.1;
}
h3 {
line-height: 1.25;
}
😩
.element {
display: flex;
gap: 1.25ch;
align-items: center;
}Font metrics
😩
Overskrift
Morbi tortor mi, semper id magna quis, auctor auctor purus. Nam pellentesque vulputate lectus, et euismod est tincidunt sed.
Overskrift
Overskrift
line box
Overskrift
half leading
giraf
text-box-trim
h1 {
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}h1 {
/*text-box-trim: trim-both;
text-box-edge: cap alphabetic;*/
text-box: cap alphabetic;
}text-box-trim
text-box-trim
text-box-trim
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
Lav øvelsen, der ligger på git-branch'en "flow-space" på GitHub
Flow-space
Øvelse
.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
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 */--min-size
--max-size
--min-range
--max-range
Ingredienser
Ingredienser
1rem
3rem
400px
1000px
--min-size:
--max-size:
--min-range:
--max-range:
containerbredden
--min-size
--max-size
--min-range
--max-range
var(
)
var(
)
,
,
100cqw
containerbredden
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:
Ingredienser
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));
}
}Styling af tekstindhold
Øvelse
Lav øvelsen, der ligger på git-branch'en "text-styling" på GitHub
Card UI
Øvelse
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
h1,
h2,
h3 {
text-wrap: balance;
}
p {
text-wrap: pretty;
}Øvrige
p:first-letter {
initial-letter: 3;
}Øvrige
Øvrige
Øvrige
Crafting UI: Typography & Spacing
By Dannie Vinther
Crafting UI: Typography & Spacing
Crafting UI w/ CSS
