CRAFTING UI

Frontend Design

Layout (del 2)

Responsive components

Agenda

Subgrid

Container Queries

Nesting

Subgrid

Container Queries

Agenda

  1. Forstå, hvordan                  hjælper med komplekse layouts

  2. Anvende                                       til responsive komponenter

  3. Øvelser for at opbygge praktisk erfaring

Container Queries

  1. Forstå, hvordan                  hjælper med komplekse layouts

  2. Anvende                                       til responsive komponenter

  3. Øvelser for at opbygge praktisk erfaring

Subgrid

Agenda

Agenda

Subgrid

Mål: Forstå komplekse layouts

Subgrid

Loading...

Alignment

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

🤷‍♂️

CSS Grid

Mis

💩

Alignment

CSS Grid

Mis

Alignment

Subgrid

Mis

Alignment

Subgrid

Mis

.cards {
  display: grid;
}

.card {
  display: grid;
  
  
}
grid-template-rows:
  auto auto auto;

Alignment

Subgrid

Mis

.cards {
  display: grid;
  
  
}

.card {
  display: grid;
  grid-template-rows: subgrid;
}
grid-template-rows:
  auto auto auto;

Alignment

Subgrid

Mis

.cards {
  display: grid;
  
  
}

.card {
  display: grid;
  grid-template-rows: subgrid;
}
grid-template-rows:
  auto auto auto;

Alignment

Subgrid

Mis

.cards {
  display: grid;
  grid-template-rows:
    auto auto auto;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}
grid-template-rows:
  auto auto auto;
.cards {
  display: grid;
  grid-template-rows:
    auto auto auto;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

1

2

3

Alignment

Subgrid

Mis

.cards {
  display: grid;
  grid-template-rows:
    auto auto auto;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}
grid-template-rows:
  auto auto auto;

Implicit grid

Alignment

Subgrid

Øvelse

Åbn øvelse

Fiks denne med Subgrid

Alignment

Page Layout

.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;
  }
}

Grid pattern

.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;
  }
}

Page Layout

Grid pattern

Børnebørn følger ikke indholdsbredden

Subgrid

Lav øvelsen, der ligger på git-branch'en "subgrid-caption" på GitHub

Subgrid Caption

Øvelse

Subgrid

https://web.dev/css-subgrid/

https://cssxs.dev/subgrid

Ressourcer

Subgrid

Container Queries

Agenda

Container Queries

Responsive komponenter

@media

Container Queries

Responsive komponenter

@container

Container Queries

Responsive komponenter

@container

  • size
  • name
  • style
  • scroll-state

Container queries on MDN

https://delightful-cuchufli-c67f7d.netlify.app/

https://delightful-cuchufli-c67f7d.netlify.app/

Container queries kan ikke lade sig gøre

Container Queries

?

Hvis containerens bredde er > 400px, så sæt containerens bredde til 300px

🤷‍♂️

Hvis containerens bredde er 300px, så sæt containerens bredde til 600px

Løsningen? Containment

I praksis betyder det: en ekstra <div>

Løsningen? Containment

I praksis betyder det: en ekstra <div>

Container Queries

"På små skærme"

"På store skærme"

Card component

"Når der er lidt plads"

"Når der er meget plads"

Card component

Container queries

vs media queries

Container queries

media queries

@media (width > 900px) {...}
@container card (width > 400px) {...}

@media

Container queries

media queries

@media (width > 900px) {...}
@container card (width > 400px) {...}

@container

Container queries

@container (width > 640px) {
  .card {
    flex-direction: column;
  }
}
.card-wrapper {
  container-type: inline-size;
}

@container (width > 640px) {
  .card {
    flex-direction: column;
  }
}

Den ekstra div

Container queries

Container queries

Eksempel

Container queries

Eksempel

Åbn øvelse 

Skift farve på baggrund af størrelse

Container queries

Øvelse

Container queries

Nesting

span {
  @container (width > 75px) {
    background: var(--color-2);
  }
  @container (width > 100px) {
    background: var(--color-3);
  }
  ...
}

@media -> @container

Øvelse

.card {
  container-type: inline-size;
}

article {
  @container (width > 400px) { ... }
  @container (width > 600px) { ... }
}

Container queries

:has()

> 300px

< 300px

  1. Kortet med billedet skal først tildeles et grid med to kolonner (2fr 3fr), når .card-wrapper er større end 600px
    • @container (width > 600px)
  2. .card-wrapper skal have containter-typen "inline-size"
    • container-type: inline-size; */

Container queries

:has()

> 300px

< 300px

Card komponent

Øvelse

Åbn øvelse 1

.card-wrapper {
  container-type: inline-size;
  container-name: main;
}

@container main (width > 640px) {
  .card {
    flex-direction: column;
  }
}

Container queries

Navngivning

.card-wrapper {
  /* container-type: inline-size;
  	 container-name: main; */
  container: main / inline-size;
}

@container main (width > 640px) {
  .card {
    flex-direction: column;
  }
}

Container queries

Navngivning

> 600px

< 400px

main

.card-wrapper

Øvelse 2

Flere containere

Øvelse

.card-wrapper {
  container: card / inline-size;
}

.card {
  font-size: clamp(1.45rem, 6cqw, 1.75rem);
}

6 % af bredden

Container queries units

cqw, cqh, cqi, cqb, cqmin, cqmax

Container query units

https://cdpn.io/pen/debug/qBxGGqv

h2 {
  font-size: clamp(1.25rem, 5cqw, 2.5rem);
}

Øvelse 3

Flere containere

Øvelse

Lav øvelsen, der ligger på git-branch'en "responsive-album" på GitHub

Responsive Album

Øvelse

Selvstændig aktivitet

Lav øvelsen, der ligger på git-branch'en "bento-grid" på GitHub

Bento Grid

Øvelse

Selvstændig aktivitet

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

Subgrid: Makro-layout

Øvelse

Slides

https://slides.com/dannievinther/crafting-ui-layout-del-2​

Kursusmateriale

https://demos.cssxs.dev/topic/crafting-ui/layout-del-2

Copy of Crafting UI: Layout (del 2)

By Dannie Vinther

Copy of Crafting UI: Layout (del 2)

Crafting UI w/ CSS

  • 17

More from Dannie Vinther