CRAFTING UI
Frontend Design
Layout (del 1)
General patterns
Agenda
The Cascade
Selectors
Nesting
Grid vs. Flex
Defensive CSS
Agenda
-
Blive bedre til CSS
-
Forstå, hvordan Nesting hjælper med organisering
-
Blive bedre til at bruge
-
Øvelser, øvelser og flere øvelser for at opbygge praktisk erfaring
Nesting
Defensive CSS
Nesting
-
Forstå bedre
-
Forstå, hvordan man opbygger robuste layouts med
-
Forstå, hvordan hjælper med organisering
-
Øvelser for at opbygge praktisk erfaring
Grid vs. Flex
Agenda
Agenda
Grid vs. Flex
Mål: Hvornår vælger man hvad?
Måske er det ikke det rigtige spørgsmål?
Hvordan gør jeg det nemmest for mig selv?
Erfaring
Flexbox
Grid
Flexbox
Grid
Normalt flow
Lav en klassisk navigationsmenu.
Flex eller Grid
Øvelse
Lav en enkelt række med både Flexbox og Grid.
Flex eller Grid
Øvelse
repeat(auto-fit,..),
flex-wrap,
auto-margin,
subgrid
Lav en række med kort med både Flexbox og Grid.
Flex eller Grid
Øvelse
Lav et responsivt layout, hvor rækkefølgen på billede og tekst skifter plads.
Flex eller Grid
Øvelse
Generelle mønstre
Flex Pattern
.task {
flex: 1;
}Lad elementerne definere pladsen
.stack {
display: grid;
}
.stack > * {
grid-area: 1 / 1;
}Stack pattern
Generelle mønstre
Stack pattern
Generelle mønstre
Bento layout pattern
Generelle mønstre
Bento layout pattern
Generelle mønstre
titletitlecupcuptaglistlistmanman.bento {
grid-template-areas:
" "
" "
" ";
}Site layout pattern
Generelle mønstre
titletitlecupcuptaglistlistmanman
.bento {
grid-template-areas:
"title title cup"
"man list cup"
"man list tag";
@media (width < 650px) {
grid-template-areas:
"title title"
"cup man"
"list tag";
}
}Site layout pattern
Generelle mønstre
titletitlecupcuptaglistlistmanman.container {
display: grid;
grid-template-columns: 1fr minmax(0, 1200px) 1fr;
column-gap: 1rem;
> * {
grid-column: 2;
}
.full-bleed {
grid-column: 1 / -1;
}
}Site layout pattern
Generelle mønstre
Site layout pattern
Generelle mønstre
.container {
display: grid;
grid-template-columns: 1fr minmax(0, 1200px) 1fr;
column-gap: 1rem;
> * {
grid-column: 2;
}
.full-bleed {
grid-column: 1 / -1;
}
}.container {
display: grid;
grid-template-columns:
[full-start] 1fr [content] minmax(0, 1200px) 1fr [full-end];
column-gap: 1rem;
> * {
grid-column: content;
}
.full-bleed {
grid-column: full;
}
}Site layout pattern
Generelle mønstre
.element {
width: min-content | max-content | fit-content;
}Intrinsic sizing
Generelle mønstre
.grid {
grid-template-columns:
min-content | max-content | fit-content() | auto;
}Intrinsic sizing
Generelle mønstre
.grid {
grid-template-columns:
min-content | max-content | fit-content() | auto;
}.element {
width: min-content | max-content | fit-content;
}Intrinsic sizing
Generelle mønstre
section {
display: grid;
grid-template-columns:
repeat(auto-fill, minmax(150px, 1fr));
gap: 1rlh;
}Auto-fill/-fit
Generelle mønstre
Auto-fill/-fit
Generelle mønstre
Lav øvelsen, der ligger på git-branch'en "citd-1" på GitHub
Code in the dark:
Roles Section
Øvelse
Code in the dark:
Roles Section
Øvelse
Kan du løse den?
Code-golfing-challenge
Kan du løse den?
Code in the Dark: Profile Card
Øvelse
.container {
display: grid;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap: 20px;
}.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 20px;
}.container
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 20px;
}.container
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 20px;
}.container
The Gotchas* of Layout
* works as documented but is counter-intuitive
😭
Layout er svært
Kan du løse denne?
.container {
display: grid;
grid-template-columns:
[full-start] 1fr [content] minmax(0, 1200px) 1fr [full-end];
column-gap: 1rem;
> * {
grid-column: content;
}
.full-bleed {
grid-column: full;
}
}Lav øvelsen, der ligger på git-branch'en "breakout" på GitHub
Breakout Grid
Øvelse
calc()
Math og layout
Kan math-funktioner hjælpe med layout?
min()
max()
clamp()
calc(
)
100px * 2
calc(
)
100px * 2
calc(
)
100% - 1rem
.card {
padding: 1rem;
border-radius: 2.75rem;
.inner {
border-radius: calc(2.75rem - 1rem);
}
}
min(
)
100px, 200px
min(
)
Brug den mindste værdi
100px, 200px
🤷♂️
min(
)
100px, 200px
🤔
100%, 200px
Brug den mindste værdi
Browseren omregner altid til px
.container {
width: min(100%, 200px);
/*
width: 100%;
max-width: 200px;
*/
}min()
.container {
width: min(100% - 2rem, 200px);
/*
width: calc(100% - 2rem);
max-width: 200px;
*/
}min()
65ch
3rem
.container {
max-width: 65ch;
margin-inline: 1rem;
padding: .5rem;
@media (width > 600px) {
padding: 3rem;
margin-inline: auto;
}
}
auto
auto
.container {
max-width: 65ch;
margin-inline: 1rem;
padding: .5rem;
@media (width > 600px) {
padding: 3rem;
margin-inline: auto;
}
}< 100%
.container {
padding: min(3rem, 5%);
width: min(65ch, 100% - 2rem);
margin-inline: auto;
}pattern
Kan typisk bruges til padding, margin og gap
min()
min()
.grid {
display: grid;
grid-template-columns:
repeat(auto-fill, minmax(275px, 1fr));
}pattern
min()
min()
pattern
275px
275px
275px
min()
pattern
275px
275px
275px
Overflow
min()
pattern
100%
100%
100%
.grid {
display: grid;
grid-template-columns:
repeat(auto-fill, minmax(min(275px, 100%), 1fr));
}min()
max(
)
100px, 200px
50%, 200px
Kan du regne det ud?
pattern
max()
Fra Tema-opgaven
main {
display: grid;
grid-template-columns:
1fr minmax(0, 1200px) 1fr;
> * {
grid-column: 2;
}
.full {
grid-column: 1 / -1;
}
}1fr
1fr
minmax(0, 1200px)
pattern
max()
main {
display: grid;
grid-template-columns:
1fr minmax(0, 1200px) 1fr;
...
}
.scroller {
padding-inline:
max(1rem, 50% - 1200px / 2);
}pattern
max()
:root {
--content-width: 75rem;
}
main {
grid-template-columns:
1fr minmax(0, var(--content-width)) 1fr;
}
.scroller {
padding-inline:
max(1rem, 50% - var(--content-width) / 2);
}pattern
max()
pattern
max()
Få bannerets tekst til flugte med de øvrige sektioners tekst ved at bruge max().
Fælles indholdskant
Øvelse
Lav øvelsen, der ligger på git-branch'en "scrolling-container" på GitHub
Scrolling Container
Øvelse