Øvelse (Task 0)

Genskab følgende design med HTML og CSS

Det skal ikke være 100 % én til én, men så tæt på, som muligt.

The Cascade

<button id="send" class="action" type="submit">
  Buy now
</button>

Overskrift

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

I browseren

Hvilken regel gælder?

🤔

Quiz

Overskrift

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

I browseren

Hvilken regel gælder?

Vinder, fordi den bliver læst sidst

Quiz

Heading 2

 #my-heading {
  color: blue;
}
 
.heading {
  color: red;
}

I browseren

Hvilken regel gælder?

🤔

 <h2 class="heading" id="my-heading">Heading 2</h2>

Quiz

 #my-heading {
  color: blue;
}
 
.heading {
  color: red;
}

I browseren

Hvilken regel gælder?

Vinder, fordi ID er mere specifik end CLASS

Heading 2

Specificity calculator

Quiz

Paragraf

 .paragraph:first-of-type {
  color: blue;
}
 
p.paragraph {
  color: red;
}

I browseren

Hvilken regel gælder?

🤔

 <p class="paragraph">Paragraf</p>

Quiz

 .paragraph:first-of-type {
  color: blue;
}
 
p.paragraph {
  color: red;
}

I browseren

Hvilken regel gælder?

 <p class="paragraph">Paragraf</p>

Vinder, fordi den har to klasser

Paragraf

Quiz

 p {
  color: blue;
}
 
#context {
  color: red;
}

I browseren

Hvilken regel gælder?

Paragraf

 <div id="context">
  <p>Paragraf</p>
</div>

Quiz

 p {
  color: blue;
}
 
#context {
  color: red;
}

I browseren

Hvilken regel gælder?

Vinder, fordi den er mere specifik

Paragraf

 <div id="context">
  <p>Paragraf</p>
</div>

Quiz

 .red {
  color: red;
}
 
.blue {
  color: blue;
}

I browseren

Paragraf 1

 <!DOCTYPE html>
<html lang="da">
 
  <head>...</head>
 
  <body>
 
    <p class="blue red">Paragraf 1</p>
    <p class="red blue">Paragraf 2</p>
 
  </body>
 
</html>

Paragraf 2

Hvad er resultatet?

<p class="blue red">Paragraf 1</p>
<p class="red blue">Paragraf 2</p>

Quiz

 .red {
  color: red;
}
 
.blue {
  color: blue;
}

I browseren

 <!DOCTYPE html>
<html lang="da">
 
  <head>...</head>
 
  <body>
 
    <p class="blue red">Paragraf 1</p>
    <p class="red blue">Paragraf 2</p>
 
  </body>
 
</html>

<p class="blue red">Paragraf 1</p>
<p class="red blue">Paragraf 2</p>

Paragraf 1

Paragraf 2

Hvad er resultatet?

Quiz

 .red {
  color: red;
}
 
.blue {
  color: blue;
}

I browseren

 <!DOCTYPE html>
<html lang="da">
 
  <head>...</head>
 
  <body>
 
    <p class="blue red">Paragraf 1</p>
    <p class="red blue">Paragraf 2</p>
 
  </body>
 
</html>

<p class="blue red">Paragraf 1</p>
<p class="red blue">Paragraf 2</p>

Paragraf 1

Paragraf 2

Hvad er resultatet?

Quiz

Hvad er et framework?

Kode-bibliotek?

Noget, der gør ens arbejde lettere og hurtigere
Noget, der gør ens arbejde sværere og langsommere 😅
Typisk rammer med (stærke) holdninger
Begrænset men ensartet
Abstraktioner

Tailwind CSS

Utility-framework

Ét stort stylesheet, som andre har skrevet
Mobile- og utility-first (hjælpeklassser)
Selv-dokumenterende
Designsystem, som kan skræddersyes

Tailwind CSS

Tailwind's klasser

tailwindcss.com/docs

Øvelse (Task 1)

Genskab følgende design med TailwindCSS

Det skal ikke være 100 % én til én, men så tæt på, som muligt.

bg-blue-500

text-blue-200

bg-slate-900

Øvelse (Task 2)

Genskab følgende design med TailwindCSS

Det skal ikke være 100 % én til én, men så tæt på, som muligt.

Hvorfor Tailwind?

Er det ikke bare inline-style?

🤪

Bliver min HTML ikke uoverskuelig?

🤪

Flytter jeg ikke bare mængden af kode fra et stylesheet til HTML?

🤪

Flytter jeg ikke bare mængden af kode fra et stylesheet til HTML?

🤪

Constraints & consistency

👏🏻

Performance

👏🏻

The hardest thing about programming is naming stuff!

Bedste argument

👏🏻

 <body class="forside">

 <body class="underside">

 .forside {
  background-color: #bada55;
  color: #000;
}

 .underside {
  background-color: #5000ca;
  color: #fff;
}

 <body class="underside-2">

 .underside-2 {
  background-color: #bada55;
  color: #000;
}

 <body class="forside">

 <body class="underside">

 .forside {
  background-color: #bada55;
  color: #000;
}

 .underside {
  background-color: #5000ca;
  color: #fff;
}

 <body class="underside-2">

 .underside-2 {
  background-color: #bada55;
  color: #000;
}

Samme styles

Tailwind CSS

 <section>
  <svg>...</svg>
  
  <h2>Constraint-based</h2>
  
  <p>An API for your design system.</p>
  
  <p>Utility classes help you work within the constraints...</p>
...

Hvilke HTML-tags ser I?

 <section>
  <svg>...</svg>
  
  <h2>Constraint-based</h2>
  
  <p>An API for your design system.</p>
  
  <p>Utility classes help you work within the constraints...</p>
...

"kicker"

Semantik først

 <section>
  <svg>...</svg>
  
  <h2>Constraint-based</h2>
  
  <p class="text-4xl font-extrabold">An API for your design system.</p>
  
  <p>Utility classes help you work within the constraints...</p>
...

"kicker"

Semantik først

Hvorfor Tailwind?

I virkeligheden

Fordi CSS er svært
For at afspejle branchen
- Det er en industri standard
- Det er performant
- Det gør det "let" at have consistency
- "Det er sjovt" — citat Jonas

	p:not(#id) {
	color: green;
	}

	p.class {
	color: red;
	}

	<ul>
	<li>
	<a>Link</a>
	</li>
	<li class="special">
	<a>Link</a>
	</li>
	<li>
	<a>Link</a>
	</li>
	</ul>

	.paragraph:first-of-type {
	color: blue;
	}

	p.paragraph {
	color: red;
	}

	<!DOCTYPE html>
	<html lang="da">

	<head>...</head>

	<body>

	<p class="blue red">Paragraf 1</p>
	<p class="red blue">Paragraf 2</p>

	</body>

	</html>

	<section class="o-section o-section--more-v-spacing o-section--dark
	o-section--above-sidebar c-banner c-banner--dark js-section-above-sidebar">

	<section>
	<svg>...</svg>

	<h2>Constraint-based</h2>

	<p>An API for your design system.</p>

	<p>Utility classes help you work within the constraints...</p>
	...

	<p class="class">text</p>

	<p id="id">last text</p>

	<div id="test">
	<p>Lorem, ipsum dolor.</p>
	</div>