Przejdź do treści
e-sklep

Nowe produkty dostępne już od dziś: czajniki cyfrowe, suszarki…

Współpraca B2B
e-sklep
Lista produktów pozycji: 0

Style guide

Tokeny, typografia i odstępy z projektu w Figmie (STYLE GUIDE). Strona robocza, niewidoczna dla wyszukiwarek.

01. Kolory

Czerń (black)

$black-900 #151B20
$black-700 #141414
$black-500 #333E48
$black-300 #3F4B56
$black-100 #4D5B67

Biel (white)

$white-100 #FFFFFF
$white-300 #F5F5F5
$white-500 #E9E9E9
$white-700 #DBDBDB
$white-900 #CDCDCD

Niebieski (blue)

$blue-100 #1799FF
$blue-300 #0686EA
$blue-500 #047BD8
$blue-700 #006DC2
$blue-900 #005BA2

Pozostałe

$green-500 #3E9139
$orange-700 #E08A00
$red-500 #DD011F
$navy-100 #020DAB

02. Typografia

Inter 400, 600, 700 (hostowany lokalnie)

Nagłówek H1

h1: 36/42, 700 (mobile 24/28)

Nagłówek H2

h2: 30/34, 700 (mobile 20/24)

Nagłówek H3

h3: 24/28, 700

Nagłówek H4

h4: 20/24, 700
Nagłówek H5
h5: 16/20, 700
Nagłówek H6
h6: 14/18, 700

Subtitle 1

u-subtitle-1: 24/30, 400, wersaliki, 0,1em

Subtitle 2

u-subtitle-2: 20/26, 400, wersaliki, 0,1em

Subtitle 3

u-subtitle-3: 16/22, 400, wersaliki, 0,1em

Body large: zażółć gęślą jaźń

u-body-large: 20/26, 400

Body normal: zażółć gęślą jaźń

u-body: 16/22, 400

Body small: zażółć gęślą jaźń

u-body-small: 14/18, 400

Body xsmall: zażółć gęślą jaźń

u-body-xsmall: 12/16, 400

03. Cienie

$shadow-card 0 3px 7px rgba(0,0,0,.10)
$shadow-2 0 4px 15px rgba(0,0,0,.25)
$shadow-3 0 2px 8px rgba(0,0,0,.05)

04. Odstępy

4 px
8 px
12 px
16 px
24 px
32 px
40 px
48 px
56 px
64 px
80 px
120 px

05. Siatka i kontener

12 kolumn, odstęp 30 px (mobile 20 px), treść 1280 px przy ekranie 1440 px, 350 px przy 390 px.

1
2
3
4
5
6
7
8
9
10
11
12

06. Przyciski

Rozmiar normalny (40 px)

Primary
c-btn--primary Secondary
c-btn--secondary Tertiary
c-btn--tertiary Primary white
c-btn--white Filters
c-btn--filters Domyślny Najechanie Wciśnięty Wyłączony

Rozmiar duży (50 px), c-btn--huge

Primary
c-btn--primary Secondary
c-btn--secondary Tertiary
c-btn--tertiary Primary white
c-btn--white Domyślny Najechanie Wciśnięty Wyłączony

Modyfikatory i elementy jako odnośnik

Dodaj do zamówienia Dodaj do zapytania Odnośnik wyłączony (aria-disabled)
c-btn--block c-btn--plus

Odnośniki tekstowe

Wszystkie nowości Wszystkie nowości c-text-link
Przycisk Przycisk c-text-link c-text-link--secondary

Strzałki karuzeli i przycisk do góry

c-btn-arrow --prev / --next
c-btn-arrow--dark, wyłączona (koniec karuzeli)
c-scroll-top (zadanie 3.6, prawy dolny róg po 300 px przewinięcia)

Przyciski menu (Main menu button, z strzałką, Submenu) są zrobione w nawigacji działów: .c-nav__link, .c-nav__toggle, .c-nav__sub-link (zadanie 3.3).

07. Formularze

Pole tekstowe, select, textarea (c-field + c-input / c-select / c-textarea)

c-input

To pole jest wymagane.

c-select

To pole jest wymagane.

c-textarea

To pole jest wymagane.

c-password

Radio, checkbox, przełącznik

c-radio

c-checkbox

c-switch

Komunikaty (c-message) i blok informacyjny (c-info-block)

Zamówienie zostało wysłane.

Produkt jest dostępny w ograniczonej ilości.

Nie udało się zapisać zmian.

parts/info-ceny.php (pokazuje się tylko klientowi B2B; poniżej podgląd tego samego markupu dla wszystkich):

Ceny i stany magazynowe mają charakter informacyjny i nie stanowią oferty handlowej. Ostateczną cenę, dostępność i termin realizacji potwierdza dział obsługi klienta.

08. Karta produktu

get_template_part('parts/content/product-card', null, ['product' => $p, 'kontekst' => 'home'])
Widok: gość (bez cen i stanów).

Strona główna (232 px), drugi wiersz: stan najechania

Kategoria (297 px)

09. Nagłówek sekcji i karuzela

get_template_part('parts/sekcja-produkty', null, ['produkty' => $lista, 'tytul' => ..., 'link_url' => ..., 'link_tekst' => ..., 'tlo' => 'szare'])
Widoczne karty: 5 od 1200 px, 4 przy 1024-1199 px, 3 przy 768-1023 px, 2 na telefonie.

Nowości

Wszystkie nowości

10. Elementy stron

Widok: gość (bez cen i stanów).

Okruszki: bieżąca strona i przykład produktu

get_template_part('breadcrumbs')

Nagłówek strony z licznikiem

get_template_part('parts/naglowek-strony', null, ['tytul' => 'Oświetlenie', 'licznik' => 64])

Oświetlenie

produktów: 64

Paginacja: środek, początek, koniec

get_template_part('parts/paginacja', null, ['total' => 12, 'current' => 5])

Licznik ilości: duży (karta produktu) i mały (tabele), zakres 1-5, tylko do odczytu

get_template_part('parts/ilosc', null, ['name' => 'quantity', 'min' => 1, 'max' => 5, 'rozmiar' => 'maly'])

Tabela listy produktów (c-table--cards: karty na mobile)

Lp. Produkt Ilość Usuń
1 TS2709

Czajnik elektryczny 1,2l
2 TS6211

Ekspres do kawy
3 TS1021

Zapalarka gazowa
4 TS9183

Zdalnie sterowany wentylator stojący z pilotem

Tabela z poziomym przewijaniem na mobile (c-table--scroll w .c-table-wrap, Cennik)

Lp. Produkt Ilość Usuń
1 TS2709

Czajnik elektryczny 1,2l
2 TS6211

Ekspres do kawy
3 TS1021

Zapalarka gazowa
4 TS9183

Zdalnie sterowany wentylator stojący z pilotem

11. Karta artykułu

get_template_part('parts/content/post-card', null, ['post' => $wpis])
get_template_part('parts/sekcja-artykuly', null, ['wpisy' => $wpisy, 'tytul' => ..., 'link_url' => ..., 'link_tekst' => ...])

Zwykła i najechanie

Ryż – jak szybko ugotować pyszny ryż?

Ryż to jedno z najpopularniejszych, a więc też najczęściej uprawianych zbóż. Dla ogromnej liczby ludzi w Azji stanowi on absolutną podstawę wyżywienia. Gości on bardzo często na stołach także w...

Ryż – jak szybko ugotować pyszny ryż?

Ryż to jedno z najpopularniejszych, a więc też najczęściej uprawianych zbóż. Dla ogromnej liczby ludzi w Azji stanowi on absolutną podstawę wyżywienia. Gości on bardzo często na stołach także w...

Karuzela: 3 karty, 2 przy 768-1023 px, 1 na telefonie

Porady i inspiracje

Wszystkie artykuły

  • Ryż – jak szybko ugotować pyszny ryż?

    Ryż to jedno z najpopularniejszych, a więc też najczęściej uprawianych zbóż. Dla ogromnej liczby ludzi w Azji stanowi on absolutną podstawę wyżywienia. Gości on bardzo często na stołach także w...

  • Czy ryż jest dobry dla twojego zdrowia?

    Pochodzenie ryżu Opierając się na dowodach pochodzących z wykopalisk archeologicznych, historia ryżu rozpoczęła nawet 12 000 lat temu. Historycy i botanicy od dawna dyskutują jednak nad rejonem, w którym po...

  • Czarny czosnek — imponujące korzyści zdrowotne dla każdego

    Czarny czosnek to efekt procesu fermentacji, który jest prowadzony w wysoko kontrolowanych warunkach temperatury i wilgotności. Surowe bulwy utrzymuje się w parnym środowisku o temperaturze otoczenia ok. 60℃. Po okresie...

  • Latarka zwykła czy sensorowa – jaki model wybrać?

    Latarka czołowa to niezastąpiony partner podczas zadań specjalnych. Sprawdza się zarówno na kempingu, w ciemnym garażu, piwnicy piwnicy czy jaskini. Ale, jakie funkcje powinna posiadać latarka, aby zaoferować pełne wsparcie...

  • Dlaczego warto przyrządzać domowe koktajle i smoothie?

    Wiele osób zastanawia się, czy istnieje łatwy i szybki sposób, by przyrządzić pożywne śniadania czy przekąski. Odpowiedź może być jedna: oczywiście, że tak, wystarczy zrobić pyszny, zdrowy koktajl albo smoothie...

  • Jak przygotować tradycyjny azjatycki Hot Pot?

    Świat ma wiele do zaoferowania, zwłaszcza w dziedzinie gastronomii. Dlatego warto poszerzać kulinarne horyzonty, regularnie eksperymentując w domowej kuchni. Na początek świetnie sprawdza się kuchnia azjatycka, która ma do zaoferowania...

Siatka bloga: 2 kolumny, 1 na telefonie

  • Ryż – jak szybko ugotować pyszny ryż?

    Ryż to jedno z najpopularniejszych, a więc też najczęściej uprawianych zbóż. Dla ogromnej liczby ludzi w Azji stanowi on absolutną podstawę wyżywienia. Gości on bardzo często na stołach także w...

  • Czy ryż jest dobry dla twojego zdrowia?

    Pochodzenie ryżu Opierając się na dowodach pochodzących z wykopalisk archeologicznych, historia ryżu rozpoczęła nawet 12 000 lat temu. Historycy i botanicy od dawna dyskutują jednak nad rejonem, w którym po...

  • Czarny czosnek — imponujące korzyści zdrowotne dla każdego

    Czarny czosnek to efekt procesu fermentacji, który jest prowadzony w wysoko kontrolowanych warunkach temperatury i wilgotności. Surowe bulwy utrzymuje się w parnym środowisku o temperaturze otoczenia ok. 60℃. Po okresie...

  • Latarka zwykła czy sensorowa – jaki model wybrać?

    Latarka czołowa to niezastąpiony partner podczas zadań specjalnych. Sprawdza się zarówno na kempingu, w ciemnym garażu, piwnicy piwnicy czy jaskini. Ale, jakie funkcje powinna posiadać latarka, aby zaoferować pełne wsparcie...