Przejdź do głównej zawartości

Style guide i spójność

Wprowadzenie

Style guide pomaga utrzymać spójny wygląd aplikacji: kolory, czcionki, odstępy.

Teoria / Wyjaśnienia

Zasady stylu:
- ustal podstawową czcionke i rozmiar tekstu,
- wybierz główne kolory (np. kolor brandu, tła, tekstu),
- powtarzaj te same odległości (marginesy, padding).
Pomagaja w tym zmienne CSS (custom properties).

Praktyczne przykłady

Przykład

<head>
  <style>
    :root {
      --color-primary: #1e90ff;
      --color-text: #222;
      --spacing: 1rem;
    }

    body {
      font-family: system-ui, sans-serif;
      color: var(--color-text);
      margin: 0;
    }

    h1 {
      color: var(--color-primary);
      margin-bottom: var(--spacing);
    }
  </style>
</head>

Ćwiczenie

Zdefiniuj w sekcji <style> kilka zmiennych kolorów.
Zastosuj je do nagłówków, linków i przycisków.
Zapisz swoje zasady w krótkim dokumencie style guide (np. jako lista punktów).