uni/slides/dhbw/02_css_extended.md

---
marp: true
theme: gaia
paginate: true
backgroundColor: #fff
header: "Web Engineering – DHBW Stuttgart"
footer: "Michael Czechowski – SoSe 2026"
---

<style>
:root { --color-foreground: #1a1a2e; --color-highlight: #d63384; --color-dimmed: #4a4a6a; }
section.invert { --color-foreground: #fff; }
section { font-size: 1.4rem; }
h1 { color: #a02060; }
section.invert h1 { color: #fff; }
h2 { color: #1f2937; }
section.invert h2 { color: #f48fb1; }
pre { background: #0f0f23; color: #f48fb1; border-radius: 8px; border-left: 3px solid #d63384; }
pre code { background: transparent; color: inherit; }
code { background: #1a1a2e; color: #f48fb1; padding: 0.15em 0.4em; border-radius: 4px; }
a { color: var(--color-highlight); }
</style>

<!-- _class: lead -->

# Kapitel 2 — CSS Extended
## Box-Model · Flexbox · Grid · Responsive · Animations

---

# Recap Kap 1

| Bereich | Was wir kennen |
|---------|----------------|
| Anatomie | `selector { property: value }` |
| Selektoren | element, `.class`, `#id`, `:hover` |
| Spezifizität | inline > id > class > element |
| Farben | hex, rgb, hsl, oklch |
| Einheiten | px, rem, em, %, vw, vh |

**Heute:** Layout + Animation in Tiefe.

---

# Box-Model — die Erinnerung

```
┌──────────────────┐
│      margin      │
│  ┌────────────┐  │
│  │   border   │  │
│  │ ┌────────┐ │  │
│  │ │padding │ │  │
│  │ │content │ │  │
│  │ └────────┘ │  │
│  └────────────┘  │
└──────────────────┘
```

`box-sizing: border-box` global setzen.

---

# Box-Model in Code

```css
* { box-sizing: border-box; }

.card {
  width: 320px;        /* inkl. padding + border */
  padding: 1.5rem;
  border: 2px solid #ccc;
  border-radius: 0.75rem;
  margin: 1rem auto;   /* Außen + horizontal zentriert */
}
```

Inspector im DevTools zeigt das Box-Model live an.

---

<!-- _class: lead -->

# Flexbox
## 1D-Layout (Reihe ODER Spalte)

---

# Flexbox — Basics

```css
.container {
  display: flex;
  gap: 1rem;                   /* Abstand zwischen Items */
  flex-direction: row;         /* row | column */
  justify-content: space-between; /* Haupt-Achse */
  align-items: center;         /* Quer-Achse */
  flex-wrap: wrap;             /* umbruchen erlaubt */
}
```

```html
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
```

---

# Flexbox — Achsen

**`flex-direction: row` (default):** Haupt-Achse horizontal.

```
┌─────────────────────────────────────┐
│ ◄── justify-content ──►             │
│ ▲                                   │
│ │                                   │
│ align-items                         │
│ │                                   │
│ ▼                                   │
└─────────────────────────────────────┘
```

`column`: Achsen drehen sich 90°.

---

# Flexbox — Item-Properties

```css
.item {
  flex: 1;        /* nimm gleiche Anteile vom verfügbaren Raum */
  flex: 0 0 200px; /* fest 200px, kein wachsen, kein schrumpfen */
  flex-grow: 2;   /* doppelte Anteile */
  order: -1;      /* visuell zuerst, im DOM hinten */
  align-self: end; /* override align-items für DIESES Item */
}
```

**Shorthand:** `flex: <grow> <shrink> <basis>`.

---

# Typische Flex-Patterns

```css
/* Navigation: Logo links, Items rechts */
.nav { display: flex; justify-content: space-between; }

/* Karte: Bild + Text nebeneinander */
.card { display: flex; gap: 1rem; align-items: center; }

/* Button-Gruppe: alle gleich groß */
.btn-group { display: flex; gap: 0.5rem; }
.btn-group button { flex: 1; }

/* Footer: gleichmäßig verteilt */
.footer { display: flex; justify-content: space-around; }
```

---

<!-- _class: lead -->

# Grid
## 2D-Layout (Reihe UND Spalte)

---

# Grid — Basics

```css
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;  /* 3 Spalten, Verhältnis 1:2:1 */
  grid-template-rows: auto 1fr auto;   /* Header, Body, Footer */
  gap: 1rem;
}
```

`fr` = Fraction Unit — verbleibender Raum aufgeteilt.

---

# Grid — Areas (named layout)

```css
.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "nav    main"
    "footer footer";
  grid-template-columns: 200px 1fr;
}

.layout header { grid-area: header; }
.layout nav    { grid-area: nav; }
.layout main   { grid-area: main; }
.layout footer { grid-area: footer; }
```

Lesbarer als Spalten-/Zeilen-Nummern.

---

# Grid — Auto-Layout

```css
/* So viele Spalten wie reinpassen, jede min. 200px */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
```

Mobile: 1 Spalte. Tablet: 2-3. Desktop: 4-5. **Ohne Media Queries.**

---

# Flexbox vs. Grid

| | Flexbox | Grid |
|--|---------|------|
| Dimension | 1D | 2D |
| Use-Case | Navigation, Karten-Reihe, Button-Gruppe | Seiten-Layout, komplexes Raster |
| Item-Größe | flexibel | meist fest |
| Direction | row/column | rows + columns |

**Beide in einem Layout möglich:** Grid für Seite, Flexbox in Komponenten.

---

<!-- _class: lead -->

# Responsive Design

---

# Mobile-First mit Media Queries

```css
/* Default: Mobile */
.sidebar { display: none; }
.content { padding: 1rem; }

/* Tablet aufwärts */
@media (min-width: 768px) {
  .sidebar { display: block; width: 240px; }
  .content { padding: 2rem; }
}

/* Desktop */
@media (min-width: 1280px) {
  .sidebar { width: 320px; }
}
```

**Mobile-First**: kleinste Größe als Default, dann größer.

---

# Viewport-Meta

```html
<meta name="viewport" content="width=device-width, initial-scale=1">
```

**Pflicht** im `<head>`. Ohne dieses Meta zoomt iPhone & Android alles auf 980 px Breite.

---

# Fluid Sizing — ohne Media Queries

```css
/* Font: skaliert zwischen 14px und 22px */
h1 { font-size: clamp(1.4rem, 2.5vw + 1rem, 2.5rem); }

/* Padding: skaliert mit Viewport */
.card { padding: clamp(1rem, 3vw, 3rem); }

/* Breite: nie mehr als 70 Zeichen für Lesetext */
.prose { max-width: 70ch; margin: auto; }
```

`clamp(min, ideal, max)` ist modernes Allzweck-Werkzeug.

---

<!-- _class: lead -->

# Animationen

---

# Transitions — sanfter Wechsel

```css
button {
  background: hotpink;
  transition: background 0.2s ease, transform 0.15s;
}

button:hover {
  background: deeppink;
  transform: translateY(-2px);
}
```

**Was animiert performant:** `transform`, `opacity`. **Was nicht:** `width`, `height`, `top/left`.

---

# Keyframe-Animationen

```css
@keyframes pulse {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.1); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

.notification {
  animation: pulse 1.5s ease infinite;
}
```

`animation: <name> <duration> <timing> <iteration>`.

---

# Reduced Motion — Pflicht

Nicht alle wollen Animationen. (Vestibuläre Probleme, ADHS, Migräne.)

```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
```

**Standard-Bestandteil** jeder Seite — ein User-Setting respektieren.

---

<!-- _class: lead -->

# CSS-Variablen + Modern

---

# Custom Properties (CSS Variables)

```css
:root {
  --primary: hotpink;
  --gap: 1rem;
  --radius: 0.75rem;
}

button {
  background: var(--primary);
  padding: var(--gap);
  border-radius: var(--radius);
}

/* Dark Mode: nur Variablen umsetzen */
@media (prefers-color-scheme: dark) {
  :root { --primary: deeppink; }
}
```

---

# CSS Functions

```css
.box {
  width: calc(100% - 2rem);             /* Mathe */
  font-size: clamp(1rem, 2vw, 2rem);    /* min, ideal, max */
  background: linear-gradient(45deg, hotpink, deeppink);
  color: oklch(0.7 0.2 30);             /* moderner Farbraum */
  filter: blur(2px) brightness(1.2);    /* Bildeffekte */
}
```

---

# CSS-Frameworks

| Framework | Stil |
|-----------|------|
| **Tailwind CSS** | Utility-Klassen direkt im HTML |
| **Bootstrap** | Komponenten-Bibliothek (klassisch) |
| **Pico** | klassen-frei, semantisches HTML reicht |
| **Open Props** | CSS-Variablen-Set |

```html
<!-- Tailwind: alle Styles als Klassen -->
<button class="bg-pink-500 hover:bg-pink-600 px-4 py-2 rounded-md">
  Klick
</button>
```

---

# Tailwind — Argumente dafür/dagegen

**Pro:**
- Schnell, weniger Context-Switch (HTML + CSS in einer Datei)
- Konsistent (Design-System eingebaut)
- Tree-Shaking → kleines Bundle

**Contra:**
- HTML voller Klassen — schwerer zu lesen
- Lernkurve eigene
- Versions-Lock-in mit Setup

**Faustregel:** für neue Projekte ausprobieren, vorhandene Projekte nicht zwanghaft migrieren.

---

<!-- _class: aufgabe -->

# Selbstlernen — Layout-Übung

1. **Flexbox-Spiel:** [flexboxfroggy.com](https://flexboxfroggy.com) — alle 24 Level durch.
2. **Grid-Spiel:** [cssgridgarden.com](https://cssgridgarden.com) — 28 Level durch.
3. **Eigene Karten-Galerie:** `repeat(auto-fit, minmax(...))` Pattern anwenden.

**Bonus:** Dark-Mode mit CSS-Variablen + `prefers-color-scheme`.

---

# Zusammenfassung

**Heute gelernt:**
- Box-Model + `box-sizing: border-box` global
- **Flexbox** für 1D-Layouts (Navigation, Karten-Reihen)
- **Grid** für 2D-Layouts (Seiten-Layout, Galerien)
- Mobile-First Media Queries + `clamp()` für fluid
- Transitions + Keyframes — `prefers-reduced-motion` respektieren
- CSS-Variablen für Theming
- Tailwind & Co. als moderner Framework-Stil

**Nächste Stunde:** Node.js — JavaScript außerhalb des Browsers.