Crafting UI

Layout: General patterns

Agenda

Grid vs. Flex

Defensive CSS

Øvelser

Agenda

Målet for i dag

  1. Blive bedre til CSS

  2. Forstå, hvordan Nesting hjælper med organisering

  3. Blive bedre til at bruge 

  4. Øvelser, øvelser og flere øvelser for at opbygge praktisk erfaring

Grid vs. Flex

Defensive CSS

Øvelser

Grid vs. Flex

Defensive CSS

Agenda

Målet for i dag

  1.                          patterns

  2. Forstå, hvordan man opbygger robuste layouts med

  3.                  , øvelser og flere øvelser for at opbygge praktisk erfaring

Øvelser

Flex & Grid

Mål: Blive bedre og få mere erfaring

Grid eller Flex?

Hvad skal jeg vælge?

Måske er det ikke det rigtige spørgsmål?

Hvordan gør jeg det nemmest for mig selv?

Erfaring

Flexbox

Grid

Flexbox

Grid

Flow

Layout

Flex Pattern

.task {
  flex: 1;
}
.grid-pile {
  display: grid;
}

.grid-pile > * {
  grid-area: 1 / 1;
}

Grid Pattern

Layout

Loading...

Layout

.container {
  display: grid;
  grid-template-columns: 1fr minmax(0, 1200px) 1fr;
  column-gap: 1rem;
  
  > * {
    grid-column: 2;
  }
  
  .full-bleed {
    grid-column: 1 / -1;
  }
}

Grid Pattern

.container {
  display: grid;
  grid-template-columns: 1fr minmax(0, 1200px) 1fr;
  column-gap: 1rem;
  
  > * {
    grid-column: 2;
  }
  
  .full-bleed {
    grid-column: 1 / -1;
  }
}

Layout

Grid Pattern

Layout

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

øvelse

Code in the dark 1

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

.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

😭

https://defensivecss.dev/tips

Layout er svært

Kan du løse denne?

øvelse

Breakout Grid

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

øvelse

Code in the dark 2

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

Slides

https://slides.com/dannievinther/crafting-ui-layout

Crafting UI: Layout

By Dannie Vinther

Crafting UI: Layout

Crafting UI with css

  • 62

More from Dannie Vinther