Design System · Rafał Gawlik

Witaj w demonstracji systemu designu - kompletnego zestawu komponentów, stylów i narzędzi do tworzenia nowoczesnych, spójnych interfejsów użytkownika.

Elastyczność

System wspiera różne style projektowe i można go łatwo dostosować do potrzeb projektu.

Responsywność

Wszystkie komponenty są w pełni responsywne i dobrze wyglądają na każdym urządzeniu.

Modularność

Komponenty można łatwo łączyć i dostosowywać do różnych przypadków użycia.

Kolory

Kolory podstawowe

Primary
#4361ee

Primary Light
#738eef

Primary Dark
#2f3fd0

Kolory funkcyjne

Success
#10b981

Warning
#fbbf24

Error
#ef4444

Info
#3b82f6

Odcienie szarości

Gray 100

Gray 200

Gray 300

Gray 400

Gray 500

Gray 600

Gray 700

Gray 800

Gray 900

Black

Klasy kolorów tekstu

text-primary - Tekst w kolorze primary

text-success - Tekst w kolorze success

text-info - Tekst w kolorze info

text-warning - Tekst w kolorze warning

text-danger - Tekst w kolorze danger

text-muted - Przygaszony tekst

Klasy kolorów tła

.bg-primary

.bg-success

.bg-info

.bg-warning

.bg-danger

.bg-light

.bg-dark

.bg-white

Typografia

Nagłówki

Nagłówek 1 (font-size-4xl)

Nagłówek 2 (font-size-3xl)

Nagłówek 3 (font-size-2xl)

Nagłówek 4 (font-size-xl)

Nagłówek 5 (font-size-lg)

Nagłówek 6 (font-size-base)

Tekst podstawowy

To jest przykładowy paragraf tekstu. System zapewnia czytelną typografię dzięki odpowiednim odstępom i rozmiarom czcionek. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.

To jest tekst typu "lead" - większy i bardziej wyróżniający się akapit, często stosowany jako wprowadzenie.

To jest link w tekście.

To jest mały tekst używając elementu small.

To jest pogrubiony tekst używając elementu strong.

To jest tekst pochylony (kursywa) używając elementu em.

Style tekstu

Text uppercase - tekst z dużych liter

TEXT LOWERCASE - tekst z małych liter

text capitalize - każde słowo zaczyna się wielką literą

Text underline - tekst podkreślony

Text line-through - tekst przekreślony

Font weight light - tekst lekki

Font weight normal - tekst normalny

Font weight bold - tekst pogrubiony

Wyrównanie tekstu

Text left - tekst wyrównany do lewej.

Text center - tekst wyrównany do środka.

Text right - tekst wyrównany do prawej.

Text justify - tekst wyjustowany. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Narzędzia (Utility Classes)

System zawiera bogaty zestaw klas narzędziowych, które pozwalają na szybkie stylowanie elementów bez pisania dodatkowego CSS.

Display Utilities

.d-inline

.d-inline-block

.d-block

.d-flex

.d-none .d-md-block (widoczne od md)

                            .d-none /* Element ukryty */
                            .d-inline /* display: inline */
                            .d-inline-block /* display: inline-block */
                            .d-block /* display: block */
                            .d-flex /* display: flex */
                            .d-grid /* display: grid */

Flex Utilities

Flex Direction

Item 1

Item 2

Item 3

.d-flex .flex-row

Item 1

Item 2

Item 3

.d-flex .flex-column

Justify Content

Item 1

Item 2

Item 3

.justify-content-start

Item 1

Item 2

Item 3

.justify-content-center

Item 1

Item 2

Item 3

.justify-content-end

Item 1

Item 2

Item 3

.justify-content-between

Align Items

Start

.align-items-start

Center

.align-items-center

End

.align-items-end

Border Utilities

.border

.border-top

.border-right

.border-bottom

Border Colors

.border-primary

.border-success

.border-danger

Border Radius

.rounded-sm

.rounded

.rounded-lg

.rounded-circle

Spacing Utilities

System posiada wszechstronne klasy dla marginesów (m-*) i paddingów (p-*) z różnymi wariantami wielkości.

Marginesy

.m-0 (brak marginesu)

.m-1 (mały margines)

.m-3 (średni margines)

.m-5 (duży margines)

Paddingi

.p-1 (mały padding)

.p-3 (średni padding)

.p-5 (duży padding)

Przykłady kierunkowe

.py-3 (padding góra i dół)

.px-4 (padding lewo i prawo)

.pt-2 (padding tylko góra)

.pb-2 (padding tylko dół)

                            /* Marginesy (m-*) i paddingi (p-*) */
                            .m-0, .p-0 /* 0 */
                            .m-1, .p-1 /* 0.25rem (4px) */
                            .m-2, .p-2 /* 0.5rem (8px) */
                            .m-3, .p-3 /* 0.75rem (12px) */
                            .m-4, .p-4 /* 1rem (16px) */
                            .m-5, .p-5 /* 1.25rem (20px) */
                            .m-6, .p-6 /* 1.5rem (24px) */

                            /* Kierunkowe warianty */
                            .mt-*, .pt-* /* top */
                            .mr-*, .pr-* /* right */
                            .mb-*, .pb-* /* bottom */
                            .ml-*, .pl-* /* left */
                            .mx-*, .px-* /* horizontal (lewo i prawo) */
                            .my-*, .py-* /* vertical (góra i dół) */

Przyciski

Warianty przycisków

Rozmiary przycisków

Przyciski z różnymi kolorami

Success Info Warning Danger

                        <button class="btn btn-primary">Primary</button>
                        <button class="btn btn-outline">Outline</button>

                        <!-- Rozmiary -->
                        <button class="btn btn-primary btn-sm">Small</button>
                        <button class="btn btn-primary btn-lg">Large</button>

Alerty

Sukces! To jest alert sukcesu. Operacja zakończyła się powodzeniem.

Informacja! To jest alert informacyjny. Zawiera ważne informacje.

Ostrzeżenie! To jest alert ostrzegawczy. Zwraca uwagę na potencjalne problemy.

Błąd! To jest alert błędu. Coś poszło nie tak.

                        <div class="alert alert-success">
                        <strong>Sukces!</strong> To jest alert sukcesu.
                        </div>

                        <div class="alert alert-info">
                        <strong>Informacja!</strong> To jest alert informacyjny.
                        </div>

                        <div class="alert alert-warning">
                        <strong>Ostrzeżenie!</strong> To jest alert ostrzegawczy.
                        </div>

                        <div class="alert alert-danger">
                        <strong>Błąd!</strong> To jest alert błędu.
                        </div>

Karty

Podstawowa karta

To jest prosta karta zawierająca tekst i przycisk.

Karta z tytułem

Ta karta ma tytuł, tekst i stopkę z dodatkową informacją.

Ostatnia aktualizacja 3 minuty temu

Obraz

Karta z obrazem

Ta karta zawiera obraz na górze.

Karty z efektami

Karta z cieniem

Ta karta ma efekt cienia nadany przez box-shadow: var(--shadow-lg).

Karta kolorowa

Ta karta ma zastosowany kolor tła i biały tekst dla kontrastu.

                        <div class="card">
                        <div class="card-body">
                        <h5 class="card-title">Tytuł karty</h5>
                        <p class="card-text">Treść karty.</p>
                        <button class="btn btn-primary">Przycisk</button>
                        </div>
                        </div>

                        <div class="card">
                        <img src="..." class="card-img-top" alt="...">
                        <div class="card-body">
                        <h5 class="card-title">Karta z obrazem</h5>
                        <p class="card-text">Treść karty.</p>
                        </div>
                        <div class="card-footer">
                        <small class="text-muted">Stopka karty</small>
                        </div>
                        </div>

Odznaki (Badges)

Primary Success Warning Danger Info

                        <span class="badge badge-primary">Primary</span>
                        <span class="badge badge-success">Success</span>
                        <span class="badge badge-warning">Warning</span>
                        <span class="badge badge-danger">Danger</span>
                        <span class="badge badge-info">Info</span>

Formularze

Podstawowe elementy formularza

Przykładowe pole Pomocniczy tekst opisujący pole formularza.

Obszar tekstowy

Lista wyboru

Checkbox 1

Checkbox 2

Radio 1

Radio 2

Suwak zakresu

Przykładowy formularz

Formularz kontaktowy

Imię i nazwisko

Email

Temat

Wiadomość

Akceptuję warunki korzystania z usługi

                        <div class="form-group">
                        <label for="example-input" class="form-label">Przykładowe pole</label>
                        <input type="text" class="form-control" id="example-input" placeholder="Wpisz tekst...">
                        <small class="form-text">Pomocniczy tekst.</small>
                        </div>

                        <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="check1">
                        <label class="form-check-label" for="check1">
                        Checkbox 1
                        </label>
                        </div>

Grid System

System grid oparty jest na 12 kolumnach z responsywnymi breakpointami.

Podstawowy układ

col-12

col-6

col-4

col-3

Responsywne kolumny

col-12 col-md-6 col-lg-4

col-12 col-md-12 col-lg-4

Offsety i porządek kolumn

col-md-4

col-md-4 offset-md-4

col-md-4 order-md-2

col-md-4 order-md-3

col-md-4 order-md-1

                        <div class="container">
                        <div class="row">
                        <div class="col-12 col-md-6 col-lg-4">
                        Zawartość
                        </div>
                        <div class="col-12 col-md-6 col-lg-4">
                        Zawartość
                        </div>
                        <div class="col-12 col-md-12 col-lg-4">
                        Zawartość
                        </div>
                        </div>
                        </div>

Navbary

Navbar jasny

Navbar ciemny

Navbar primary

                        <nav class="navbar navbar-dark">
                        <a class="navbar-brand" href="#">Brand</a>
                        <button class="navbar-toggler">
                        <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="navbar-collapse">
                        <ul class="navbar-nav">
                        <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                        </ul>
                        </div>
                        </nav>

Obrazki

Style obrazków

img-fluid

img-rounded

img-circle

img-thumbnail

                        <!-- Podstawowe style obrazów -->
                        <img src="image.jpg" class="img-fluid" alt="Fluid image">
                        <img src="image.jpg" class="img-rounded" alt="Rounded image">
                        <img src="image.jpg" class="img-circle" alt="Circle image">
                        <img src="image.jpg" class="img-thumbnail" alt="Thumbnail image">

Spinnery

Spinner typu Border

Spinner typu Grow

Rozmiary

Spinner w przycisku

                        <div class="spinner-border spinner-primary"></div>
                        <div class="spinner-grow spinner-primary"></div>

                        <!-- Rozmiary -->
                        <div class="spinner-border spinner-border-sm"></div>
                        <div class="spinner-border spinner-border-lg"></div>

                        <!-- W przycisku -->
                        <button class="btn btn-primary" disabled>
                        <span class="spinner-border spinner-border-sm mr-2"></span>
                        Ładowanie...
                        </button>

Progress Bary

Podstawowe paski postępu

25%

                        <div class="progress">
                        <div class="progress-bar progress-bar-primary" style="width: 50%">50%</div>
                        </div>