Crafting w/ CSS

Frontend Design

Agenda

Selectors

Nesting

Flex & Grid

Selectors

Nesting

Flex & Grid

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

Selectors

Øvelser

Nesting

Agenda

Målet for i dag

  1. Blive bedre til CSS                     og udvide kendskabet

  2. Forstå, hvordan                   hjælper med organisering

  3. Blive bedre til at bruge 

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

Flex & Grid

Selectors

  1. Oversæt selectoren (Fronter)

  2. Vi kigger på det i plenum

Øvelser - 30 min

Mål: Blive bedre og udvide kendskabet

li:nth-last-child(odd):first-child

Vælg det første liste-element i rækken, men kun hvis det samtidigt er ulige, hvis man tæller fra slutningen af listen.

:nth-child(2 of .featured)

Vælg det andet element, men kun hvis det er en af de elementer, der har 'featured'-klassen.

:has()

Selectors

Mål: Blive bedre og udvide kendskabet

artcle:has(> img) {}

p:not(article > *) { ... }

article > :is(.class, #id) { ... }

article > :where(.class, #id) { ... }

:is(), :where(), :not()

:has()

article:has(h2) { ... }

article:has(h2, h3) { ... }

article:has(h2):has(h3) { ... }

article:not(:has(h2)) img { ... }

article:has(> :last-child:nth-child(3)) { ... }

:has()

Hvad styler vi her?

:has()

body {
  display: grid;
}

body:has(main + aside) {
  grid-template-columns: 1fr 300px;
}

:has()

Øvelse 1

50ch

:has()

Øvelse 2

:has()

display: contents;

p:has(img) {
  display: contents;
}
<article>
  

    <img>

  
</article>
<p>
</p>

:has()

display: contents;

p:has(img) {
  display: contents;
}
<article>
  
  
    <img>
  
  
</article>
<p>
</p>

:has()

display: contents;

p:has(img) {
  display: contents;
}
<article>
  

    <img>

  
</article>
<p>
</p>

Opfører sig nu som barn af <article>

:has()

:has()

Øvelse 3

Øvelse 3

:has()

Løsning

ul:not(:has(> li:nth-child(5))) {
  display: flex;
  justify-content: center;
}

:has()

:has()

:has()

:has()

:has()

:root:has(dialog[open]) {
  overflow: hidden;
}

:has()

Loading...

Nesting

Mål: Forstå, hvordan det hjælper med organisering

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting

Nesting 

section {
  border: 2px solid red;
}
 
section 




  color: red;
}
h2 {

Nesting

section {
  border: 2px solid red;
  
  
    color: red;
  
}
h2 {

  color: red;
}

Nesting

section {
  border: 2px solid red;
  
  
    color: red;
  }
}
&
h2 {
<section>
  <h2></h2>
  <h3></h3>
  <p></p>
  <article>
    <h2></h2>
  </article>
</section>

Nesting

section {
  border: 2px solid red;
  
  
    color: red;
  }
}
>
h2 {
<section>
  <h2></h2>
  <h3></h3>
  <p></p>
  <article>
    <h2></h2>
  </article>
</section>

Nesting

section {
  border: 2px solid red;
  
  
    color: red;
  }
}
:is(  , h3)
h2      {
<section>
  <h2></h2>
  <h3></h3>
  <p></p>
  <article>
    <h2></h2>
  </article>
</section>

Nesting

:is()
:where()
:nth-child()
.
>
+
~
[data-*]
&

Symboler

Nesting

h1,
h2 {  
  & span {
    color: blue;
  }
}
& === :is(h1, h2)

Nesting

h1 {
  color: red;
  
  & {
    color: blue;
  }
}

Nesting

h1 {
  color: red;
  
  @media (width > 500px) {
    color: blue;
  }
}

Nesting

h1 {
  @media (width > 500px) {
    color: blue;
  }
  
  color: red;
}

https://codepen.io/dannievinther/pen/WNLZPVx/75f485a1f90d9c6b88d786658e68683f

Nesting

h1 {
  @media (width > 500px) {
    color: blue;
  }
  
  color: red;
}

https://codepen.io/dannievinther/pen/WNLZPVx/75f485a1f90d9c6b88d786658e68683f

h1 {
  color: red; /* hoisted */
  
  @media (width > 500px) {
    color: blue;
  }
}

1

2

Nesting

h1 {
  & {
    color: blue;
  }
  
  color: red;
}

Nesting

h1 {
  article & {
    color: red;
  }
}

Nesting

h1 {
  color: blue;
  
  article & {
    color: red;
  }
}

if / else

<h1>I'm blue</h1>

<div class="parent">
  <h1>I'm red</h1>
</div>

Nesting

h1 {
  color: blue;
  
  article & {
    color: red;
  }
}

if / else

<h1>I'm blue</h1>

<article>
  <h1>I'm red</h1>
</article>

Nesting

h1 {
  color: blue;
  
  section article & span {
    color: red;
  }
}

Nesting

a {
  background: red;
  
  &:hover {
    background: blue;
  }
}

Co-location

Nesting

a {
  background: red;
  
  &.btn {
    padding: .5rem;
    
    &:hover {
      background: blue;
    }
  }
}

Co-location

Nesting

a {
  background: red;
  
  &.btn {
    padding: .5rem;
    
    &:is(:hover, :focus-visible) {
      background: blue;
    }
  }
}

Co-location

Nesting

Øvelse

Omskriv til nesting

Nesting

Øvelse

Al logik skal være i .article {}

Flex & Grid

Mål: Blive bedre og få mere erfaring

Øvelser

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

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;
  }
}
.grid-pile {
  display: grid;
}

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

Grid Pattern

Layout

Loading...

ø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?

Slides

https://slides.com/dannievinther/crafting-with-css