WTF?! Design System Library

Biblioteka komponentów UI oparta na Pico CSS - semantyczny HTML, zero klas

Buttons (Przyciski)

Pico CSS używa semantycznego HTML - po prostu użyj <button> lub <a role="button">

Primary Button

<button>Primary Button</button>

Secondary Button

<button class="secondary">Secondary Button</button>

Button as Link

<a href="#" role="button">Button as Link</a>

Button Group

<button>Button 1</button>
<button class="secondary">Button 2</button>
                

Forms (Formularze)

Duże pola, czytelne labele - idealne dla boomerów

Input Text

Label

<label for="input-example">Label</label>
<input type="text" id="input-example" placeholder="Placeholder">
                

Select

Wybierz opcję

<label for="select-example">Wybierz opcję</label>
<select id="select-example">
    <option>Opcja 1</option>
    <option>Opcja 2</option>
    <option>Opcja 3</option>
</select>
                

Textarea

Wiadomość

<label for="textarea-example">Wiadomość</label>
<textarea id="textarea-example" placeholder="Wpisz wiadomość..."></textarea>
                

Checkbox

Zgadzam się z warunkami

<label>
    <input type="checkbox" role="switch">
    Zgadzam się z warunkami
</label>
                

Complete Form Example

<form>
    <label for="name">Imię i nazwisko</label>
    <input type="text" id="name" required>
    
    <label for="email">Email</label>
    <input type="email" id="email" required>
    
    <button type="submit">Wyślij</button>
</form>
                

Cards (Karty)

Użyj semantycznego <article> lub <section>

Basic Card

Tytuł karty

Treść karty. Prosty, czytelny layout bez zbędnych ozdobników.

<article>
    <header>
        <h3>Tytuł karty</h3>
    </header>
    <p>Treść karty. Prosty, czytelny layout.</p>
    <footer>
        <button>Akcja</button>
    </footer>
</article>
                

Card Grid (Karty w siatce)

Karta 1

Treść karty 1

Karta 2

Treść karty 2

Karta 3

Treść karty 3

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;">
    <article>
        <h3>Karta 1</h3>
        <p>Treść karty 1</p>
    </article>
    <article>
        <h3>Karta 2</h3>
        <p>Treść karty 2</p>
    </article>
</div>
                

Tables (Tabele)

Proste tabele jak w banku - idealne dla panelu poleceń

Basic Table

Data	Produkt	Kwota	Status
2024-01-15	WTF?! Crypto	100 EUR	Zatwierdzona
2024-01-20	WTF?! AI	120 EUR	Oczekuje

<table>
    <thead>
        <tr>
            <th>Data</th>
            <th>Produkt</th>
            <th>Kwota</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2024-01-15</td>
            <td>WTF?! Crypto</td>
            <td>100 EUR</td>
            <td>Zatwierdzona</td>
        </tr>
    </tbody>
</table>
                

Typography (Typografia)

Semantyczne nagłówki - po prostu użyj <h1> do <h6>

Headings

H1 - Główny nagłówek (2.5rem)

H2 - Nagłówek sekcji (2rem)

H3 - Podsekcja (1.5rem)

H4 - Podtytuł (1.25rem)

H5 - Mały nagłówek (1rem)

H6 - Najmniejszy (0.9rem)

<h1>H1 - Główny nagłówek</h1>
<h2>H2 - Nagłówek sekcji</h2>
<h3>H3 - Podsekcja</h3>
<h4>H4 - Podtytuł</h4>
                

Paragraph

To jest przykładowy paragraf. Używa standardowego rozmiaru czcionki (1rem) i line-height 1.6 dla optymalnej czytelności, szczególnie dla boomerów.

<p>To jest przykładowy paragraf.</p>

Lists

Element listy 1
Element listy 2
Element listy 3

Numerowany element 1
Numerowany element 2

<ul>
    <li>Element listy 1</li>
    <li>Element listy 2</li>
</ul>

<ol>
    <li>Numerowany element 1</li>
    <li>Numerowany element 2</li>
</ol>
                

Navigation (Nawigacja)

Basic Nav

<nav>
    <ul>
        <li><a href="#">Strona główna</a></li>
        <li><a href="#">Książki</a></li>
        <li><a href="#">Merch</a></li>
    </ul>
</nav>
                

Code Blocks (Bloki kodu)

function example() {
    return "To jest przykład kodu";
}

<pre><code>function example() {
    return "To jest przykład kodu";
}</code></pre>
                

Accordion (Akordeon)

Kliknij, aby rozwinąć

To jest ukryta treść, która pojawia się po kliknięciu.

<details>
    <summary>Kliknij, aby rozwinąć</summary>
    <p>To jest ukryta treść, która pojawia się po kliknięciu.</p>
</details>
                

Progress Bar (Pasek postępu)

75%

Container (Kontener)

Pico CSS używa semantycznego <main> lub <article> z klasą container

<main class="container">
    <!-- Zawartość -->
</main>
                

Grid Layout (Siatka)

Box 1

Box 2

Box 3

<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;">
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
</div>
                