Klasy CSS
Poniżej znajdziesz gotowe klasy CSS do stosowania w szablonie Inovax. Pomogą Ci szybko ostylować elementy bez pisania własnego CSS — wystarczy dodać odpowiednią klasę na poziomie sekcji, wiersza, kolumny lub modułu.
Nagłówki
Dział zatytułowany „Nagłówki”mmz-hide-header-line— ukrywa linię (separator) w nagłówku sekcji. Przydatne np. w module Kafelki obrazkowe, gdy chcesz, żeby kafelki przylegały do nagłówka bez widocznej linii oddzielającejmmz-module-header-center— centruje nagłówek modułu. Wymaga wyłączenia podkreślenia nagłówka — z poziomu modułu lub globalnie
Obramowanie i tło
Dział zatytułowany „Obramowanie i tło”Klasy do dodawania ramki wokół dowolnej sekcji. Wszystkie mają spójny kolor i grubość, zgodne z resztą szablonu.
mmz-border— ramka ze wszystkich stronmmz-border-t/mmz-border-b/mmz-border-l/mmz-border-r— ramka tylko od góry / dołu / lewej / prawejmmz-border-none— usuwa ramkę
Kolor ramki:
mmz-border-primary— ramka w kolorze podstawowym (primary)mmz-border-secondary— ramka w kolorze dodatkowym (secondary)
Każdą z klas ramki (mmz-border, -t, -b, -l, -r, -none) można włączyć dopiero od określonej szerokości ekranu w górę, dodając breakpoint ()xs / sm / md / lg / xl / xxl) jako sufix np. mmz-border-md (ramka od 768 px wzwyż) - pełna rozpiska Breakpointów
Zaokrąglenie rogów
Dział zatytułowany „Zaokrąglenie rogów”Zaokrąglenie zgodne z globalną zmienną ustawianą w Wyglądzie sklepu.
mmz-btn-rounded— zaokrąglenie rogów przyciskówmmz-img-rounded— zaokrąglenie rogów obrazków (wszystkie rogi)mmz-img-rounded-l— zaokrąglenie tylko lewych rogów obrazkammz-img-rounded-r— zaokrąglenie tylko prawych rogów obrazka
Układ i wyrównanie
Dział zatytułowany „Układ i wyrównanie”mmz-col-100h— wyrównuje zdjęcia w pionie (jednakowa wysokość kolumn)mmz-flexcol— poprawne łamanie i kolejność kolumn (np. w opisie produktu): na desktopie naprzemienny układ obraz/tekst, a na mobile elementy układają się jeden pod drugim w poprawnej kolejnościmmz-flex-end-sm— wyrównuje element do prawej krawędzi (np. pod modułem logotypów dostaw i płatności, gdy jest tylko jeden element)
Marginesy
Dział zatytułowany „Marginesy”Mniejsze marginesy
Dział zatytułowany „Mniejsze marginesy”Oparte o rem (wartość 0.25rem):
mb-xs-0-5— margines dolnymt-xs-0-5— margines górnyml-xs-0-5— margines lewymr-xs-0-5— margines prawy
Marginesy góra/dół (do używania w SVE)
Dział zatytułowany „Marginesy góra/dół (do używania w SVE)”Edytor SVE wycina natywne klasy odstępów nakładane na kolumny ustawione na całą szerokość, dlatego do tych marginesów w SVE używamy własnych klas mmz-.
mmz-mb{breakpoint}-{krok}— margines dolnymmz-mt{breakpoint}-{krok}— margines górny
Gdzie:
- breakpoint -
xs/sm/md/lg/xl/xxl- pełna rozpiska Breakpointów - krok -
0- 0 /2- 1rem /4- 2rem
Przykłady: mmz-mtxs-2 (margines górny 1rem na wszystkich ekranach), mmz-mbmd-4 (margines dolny 2rem od 768 px w górę).
Pola formularza
Dział zatytułowany „Pola formularza”Klasy do wymuszenia kolorystyki pola input (np. wyszukiwarki, newslettera) niezależnie od tła sekcji.
mmz-input-light— jasny wariant: białe tło, ciemny tekst (do umieszczania na ciemnym tle)mmz-input-dark— ciemny wariant: ciemne tło, jasny tekst (do umieszczania na jasnym tle)
mmz-table-wrapper— dodaje poziome przewijanie (scroll) dla szerokich tabel, dzięki czemu nie rozpychają one strony na urządzeniach mobilnych
Rozwijanie treści
Dział zatytułowany „Rozwijanie treści”Klasy do tworzenia rozwijanych bloków treści. Liczba w nazwie oznacza maksymalną wysokość (w px) widoczną przed rozwinięciem.
mmz-expand— kontener rozwijanej treści (domyślna wysokość)mmz-expand-50,mmz-expand-100,mmz-expand-200,mmz-expand-300,mmz-expand-400,mmz-expand-500,mmz-expand-600— kontener rozwijanej treści o zadanej wysokości
Klasy na potrzeby niestandardowych bloków html (np. strona produktowa, strona potw. zamówienia)
mmz-grid-border— obramowanie elementu siatkimmz-grid-fill— wypełnienie (tło) elementu siatki
Breakpointy
Dział zatytułowany „Breakpointy”Działają „od danej szerokości w górę” (mobile-first):
| Breakpoint | Działa od szerokości |
|---|---|
xs | wszystkie ekrany |
sm | od 576 px |
md | od 768 px |
lg | od 1000 px |
xl | od 1200 px |
xxl | od 1440 px |
Tutaj znajdziesz rozpiskę klas używanych w szablonie Inovax w sekcjach/wierszach/kolumnach w celu osiągnięcia określonych układów.
Nagłówek
Dział zatytułowany „Nagłówek”| Klasa | Element | Funkcja |
|---|---|---|
mmz-header-top | Sekcja | Pasek z logo, wyszukiwarką i ikonami (linia oddzielająca u dołu) |
mmz-header-nav | Wiersz | Pasek z menu głównym i wyszukiwarką |
mmz-header-search | Kolumna | Kolumna z wyszukiwarką (ograniczenie szerokości) |
Strona główna
Dział zatytułowany „Strona główna”| Klasa | Element | Funkcja |
|---|---|---|
mmz-slider-and-banners | Wiersz | Slider z banerami obok (na mobile jeden pod drugim) |
mmz-seo-content | Kolumna | Treść SEO z banerem (responsywny układ kolumn) |
mmz-newsletter | Wiersz | Newsletter z grafiką i formularzem (responsywny układ) |
mmz-newsletter-btn-rounded | Wiersz | Zaokrąglone rogi przycisku i pola input w newsletterze |
mmz-newsletter-btn-arrow | Wiersz | Zamienia przycisk zapisu na strzałkę |
Strona produktu
Dział zatytułowany „Strona produktu”| Klasa | Element | Funkcja |
|---|---|---|
mmz-quantity-and-actions | Wiersz | Ilość + przyciski akcji (układ kolumnowy na mobile) |
mmz-product-details | Kolumna | Ramka ze szczegółami produktu i separatorami między modułami |
mmz-product-detail | Moduł | Na module “Informacja z ikoną” - kolejne wiersze w szczegółach produktu |
mmz-ask-questions-and-share | Wiersz | Wiersz z modułami „zadaj pytanie” i „udostępnij” |
| Klasa | Element | Funkcja |
|---|---|---|
mmz-footer | Wiersz | Główna sekcja stopki z liniami u góry i dołu |
| Klasa | Element | Funkcja |
|---|---|---|
mmz-footer-basket | Wiersz | Stopka w procesie zamówienia |
Uniwersalne
Dział zatytułowany „Uniwersalne”| Klasa | Element | Funkcja |
|---|---|---|
mmz-col-100h | Wiersz | Wyrównuje kolumny do równej wysokości |
mmz-expand | Sekcja | Rozwijana sekcja treści (np. SEO) |
mmz-expand-600 | Sekcja | Wysokość rozwijanej sekcji (600 px przed rozwinięciem) |
Ściąga z rozpiską wszystkich klas do modułów, przydane przy wprowadzaniu customowych zmian w szablonie. Podajemy tylko klasę główną (bazowy blok) — pełna lista klas, elementów i modyfikatorów jest w kodzie modułu.
| Moduł | Klasa główna |
|---|---|
| Baner | mmzCustomBanner |
| Cechy sklepu | mmzFeatures |
| Dane kontaktowe | mmzContactBar |
| Etapy – proces zamówienia | mmzOrderSteps |
| Ilość produktów w opakowaniu | mmzPackagingInfo |
| Infobox | mmzInfoBox |
| Informacja z ikoną | mmzInfoWithIcon |
| Inne produkty z tej kategorii | mmzProductsFromCategory |
| Język | mmzLanguageSwitcher |
| Kafelki obrazkowe | mmzPopularCategories |
| Licznik czasu wysyłki | mmzShippingTimeCounter |
| Licznik darmowej dostawy | mmzProgressBar |
| Logotypy dostaw i płatności | mmzMethods |
| Masowe zamawianie wariantów | mmzMassVariants |
| Menu | mmzMegaMenu |
| Menu boczne (Kategorie) | mmzSideMenuCategories |
| Opinie | mmzOpinions |
| Pasek informacyjny | mmzTopBar |
| Podkategorie obrazkowe | mmzImageSubcategories |
| Podkategorie tekstowe | mmzTextSubcategories |
| Potwierdzenie dodania do koszyka | mmzProductSuggestions |
| Produkty w zakładkach | mmzProductsInTabs |
| Progi rabatowe | mmzDiscountThresholds |
| Przyklejony top | mmzStickyHeader |
| Rozwijane filtry/sortowanie na mobile | mmzTriggerOpenFilters |
| Skrócony koszyk | mmzQuickBasket |
| Slidery (banery) | mmzRespBanners |
| Social media | mmzSocials |
| Spis treści (na stronie produktu) | mmzTableOfContents |
| Stopka – copyright | mmzCopyright |
| Tekst i multimedia (na karcie produktu) | mmzWysiwyg |
| Waluta | mmzCurrencySwitcher |
| Wyróżniki w nagłówku | mmzFeatureHighlights |
Klasy używane w modułach Shoper w celu ich dostosowania.
Natywne klasy nowego szablonu Storefront od Shopera. Przydają się przy budowaniu własnych bloków HTML i modułów — pozwalają zachować spójność z resztą sklepu bez pisania własnego CSS. Poniżej najważniejsze, najczęściej reużywane rodziny klas.
Breakpointy
Dział zatytułowany „Breakpointy”| Sufiks | Zakres szerokości | Urządzenie |
|---|---|---|
xs | do 575 px | telefon |
sm | 576–767 px | telefon (poziomo) |
md | 768–999 px | tablet |
lg | 1000–1199 px | laptop |
xl | 1200–1439 px | desktop |
xxl | 1440–1919 px | szeroki desktop |
xxxl | od 1920 px | bardzo szeroki ekran |
Siatka (grid)
Dział zatytułowany „Siatka (grid)”System układu oparty na flexbox. Struktura: grid (kontener) → grid__row (wiersz) → grid__col (kolumna).
Kontener:
grid— kontener siatki (max. szerokość 1200 px, wyśrodkowany)grid_s— węższy kontener (max. 1000 px)grid_l— szerszy kontener (max. 1400 px)grid_full— pełna szerokość ekranu (bez marginesów bocznych)
Kolumny — szerokość:
grid__col_{bp}-{1–12}— szerokość kolumny w danym breakpoincie, w systemie 12-kolumnowym (np.grid__col_md-6= połowa szerokości od tabletu w górę)grid__col_{bp}-auto— szerokość dopasowana do treścigrid__col_{bp}-grow— kolumna wypełnia dostępną przestrzeń
Przykład: grid__col_xs-12 grid__col_md-6 grid__col_lg-4 → pełna szerokość na telefonie, połowa na tablecie, 1/3 na laptopie.
Kolumny — wyrównanie zawartości:
grid__col_{bp}-hleft/-hcenter/-hright— wyrównanie w poziomiegrid__col_{bp}-vtop/-vcenter/-vbottom/-vbetween— wyrównanie w pioniegrid__col_order-{bp}-{0–5}— kolejność kolumny (zmiana układu np. na mobile)
Wiersz — rozmieszczenie kolumn:
grid__row_{bp}-hleft/-hcenter/-hright/-hbetween/-haround/-hevenly— rozmieszczenie w poziomiegrid__row_{bp}-vtop/-vcenter/-vbottom/-vstretch/-vbaseline— wyrównanie w pionie
Przyciski
Dział zatytułowany „Przyciski”btn— klasa bazowa przycisku
Warianty kolorystyczne:
btn_primary— kolor podstawowy (primary)btn_secondary— kolor dodatkowy (secondary)btn_outline— obramowanie, przezroczyste tłobtn_ghost— bez tła i ramki (sam tekst)btn_special— wariant wyróżniony (np. „Kup teraz”)- Każdy ma też wariant
-disabled(np.btn_primary-disabled)
Rozmiary: btn_xs, btn_s, btn_l
Modyfikatory:
btn_full-width— przycisk na całą szerokośćbtn_full-width-mobile— pełna szerokość tylko na mobilebtn__icon_left/btn__icon_right— pozycja ikony w przyciskubtn-group— grupa przycisków obok siebiebtn-icon— przycisk będący samą ikoną (warianty jak wyżej:_primary,_outline,_ghost, rozmiary_xs/_s/_l)
Kolory tekstu
Dział zatytułowany „Kolory tekstu”color_main— główny kolor tekstu (#282828)color_secondary— drugorzędny (#5b5b5b)color_tertiary— trzeciorzędny (#757575)color_{paleta}-{odcień}— kolor z palety motywu, gdzie paleta toprimary,secondary,neutral,success,error, a odcień to50–900(np.color_primary-500,color_neutral-300,color_error-600)color_shade-light/color_shade-dark— jasny / ciemny odcień
Typografia
Dział zatytułowany „Typografia”text-align-left/text-align-center/text-align-right— wyrównanie tekstutext_uppercase— wielkie literytext-separator— separator między elementami tekstu
Odnośniki
Dział zatytułowany „Odnośniki”link— klasa bazowa linkulink_secondary— link w kolorze drugorzędnymlink_regular— bez wyróżnienia (zwykła waga)link_no-underline— bez podkreślenialink_with-icon— link z ikonąlink_disabled— link nieaktywny
icon— klasa bazowa- Rozmiary:
icon_l,icon_xl,icon_xxl,icon_xxxl - Kolory:
icon_secondary-color,icon_tertiary-color,icon_success,icon_error,icon_promo icon_filled— wariant wypełnionyicon_clickable— kursor wskazujący (klikalna)icon-with-text— ikona z podpisem; pozycja podpisu:icon-with-text__position_above/_below/_left/_rightlabeled-icon— ikona z sygnaturą (poziomo:labeled-icon_horizontal)
Etykiety i wstążki (badge / ribbon)
Dział zatytułowany „Etykiety i wstążki (badge / ribbon)”Tagi (etykiety statusu, np. „Promocja”, „Nowość”):
tag— klasa bazowa- Warianty:
tag_promotion,tag_success,tag_info,tag_notice,tag_error,tag_secondary,tag_tertiary,tag_quaternary tag_minimal— minimalistyczny,tag_interactive— klikalny,tag_l— większytag__group— grupa tagów
Wstążki (np. na zdjęciach produktów):
ribbon— klasa bazowaribbon_primary/ribbon_secondary— kolorribbon_rounded-corners— zaokrąglone rogiribbon_absolute— pozycjonowanie bezwzględne (np. narożnik kafelka)ribbon-group— grupa wstążek
price— klasa bazowa ceny; rozmiary:price_xs,price_s,price_m,price_lprice__value_special— cena promocyjna (wyróżniona)price__value_bold— pogrubiona,price__value_secondary— drugorzędna,price__value_inactive— wyszarzonaprice-list— lista cen/pozycji (np. podsumowanie koszyka);price-list__item_summary— wiersz podsumowania,price-list__item_zebra— naprzemienne tło
Separatory
Dział zatytułowany „Separatory”separator— separator pionowy; rozmiary:separator_xs,separator_s,separator_m,separator_lseparator-horizontal— separator poziomy (separator-horizontal_s,_m)separator_secondary/separator_tertiary— wariant kolorystyczny
Widoczność
Dział zatytułowany „Widoczność”Ukrywanie / pokazywanie elementów tylko w danym breakpoincie:
hidden-{bp}-only— ukrywa element w danym breakpoincie (np.hidden-xs-onlyukrywa tylko na telefonie)visible-{bp}-only— pokazuje element tylko w danym breakpoincievisible-hidden— ukrywa wizualnie, ale element zostaje w drzewiesr-only— dostępne tylko dla czytników ekranu (ukryte wizualnie)
Siatka kafelków
Dział zatytułowany „Siatka kafelków”tile-grid— responsywna siatka kafelków (np. kategorie, produkty); szerokość kafelka:tile-grid_{bp}-{1–12}tile-grid_products— wariant dla kafelków produktów- W obrębie
tile-gridmożna sterować widocznością/rozmiarem kafelka per urządzenie klasamimobile-only,tablet-only,laptop-only,desktop-only
Treść WYSIWYG
Dział zatytułowany „Treść WYSIWYG”fr-view— wrapper treści z edytora (Froala). Wszystkie style typografii (nagłówki, listy, tabele, obrazki z podpisem) działają wewnątrz tego kontenera. Używaj go, gdy wstawiasz sformatowaną treść poza standardowym edytorem.
module— kontener modułu (margines dolny)module__header— nagłówek modułu;module__header_s— mniejszy,module__header_highlight— z podkreśleniem akcentemmodule__description— opis modułumodule__link-wrapper— kontener linku „zobacz więcej”