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

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ącej
mmz-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

Klasy do dodawania ramki wokół dowolnej sekcji. Wszystkie mają spójny kolor i grubość, zgodne z resztą szablonu.

mmz-border - ramka ze wszystkich stron
mmz-border-t / mmz-border-b / mmz-border-l / mmz-border-r - ramka tylko od góry / dołu / lewej / prawej
mmz-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

Zaokrąglenie zgodne z globalną zmienną ustawianą w Wyglądzie sklepu.

mmz-btn-rounded - zaokrąglenie rogów przycisków
mmz-img-rounded - zaokrąglenie rogów obrazków (wszystkie rogi)
mmz-img-rounded-l - zaokrąglenie tylko lewych rogów obrazka
mmz-img-rounded-r - zaokrąglenie tylko prawych rogów obrazka

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ści
mmz-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

Mniejsze marginesy

Oparte o rem (wartość 0.25rem):

mb-xs-0-5 - margines dolny
mt-xs-0-5 - margines górny
ml-xs-0-5 - margines lewy
mr-xs-0-5 - margines prawy

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 dolny
mmz-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

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)

Tabele

mmz-table-wrapper - dodaje poziome przewijanie (scroll) dla szerokich tabel, dzięki czemu nie rozpychają one strony na urządzeniach mobilnych

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

HTML

Klasy na potrzeby niestandardowych bloków html (np. strona produktowa, strona potw. zamówienia)

mmz-grid-border - obramowanie elementu siatki
mmz-grid-fill - wypełnienie (tło) elementu siatki

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

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

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

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”

Stopka

Klasa	Element	Funkcja
`mmz-footer`	Wiersz	Główna sekcja stopki z liniami u góry i dołu

Koszyk

Klasa	Element	Funkcja
`mmz-footer-basket`	Wiersz	Stopka w procesie zamówienia

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`

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

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)

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ści
grid__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 poziomie
grid__col_{bp}-vtop / -vcenter / -vbottom / -vbetween - wyrównanie w pionie
grid__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 poziomie
grid__row_{bp}-vtop / -vcenter / -vbottom / -vstretch / -vbaseline - wyrównanie w pionie

Przyciski

btn - klasa bazowa przycisku

Warianty kolorystyczne:

btn_primary - kolor podstawowy (primary)
btn_secondary - kolor dodatkowy (secondary)
btn_outline - obramowanie, przezroczyste tło
btn_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 mobile
btn__icon_left / btn__icon_right - pozycja ikony w przycisku
btn-group - grupa przycisków obok siebie
btn-icon - przycisk będący samą ikoną (warianty jak wyżej: _primary, _outline, _ghost, rozmiary _xs/_s/_l)

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 to primary, secondary, neutral, success, error, a odcień to 50–900 (np. color_primary-500, color_neutral-300, color_error-600)
color_shade-light / color_shade-dark - jasny / ciemny odcień

Typografia

text-align-left / text-align-center / text-align-right - wyrównanie tekstu
text_uppercase - wielkie litery
text-separator - separator między elementami tekstu

Odnośniki

link - klasa bazowa linku
link_secondary - link w kolorze drugorzędnym
link_regular - bez wyróżnienia (zwykła waga)
link_no-underline - bez podkreślenia
link_with-icon - link z ikoną
link_disabled - link nieaktywny

Ikony

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łniony
icon_clickable - kursor wskazujący (klikalna)
icon-with-text - ikona z podpisem; pozycja podpisu: icon-with-text__position_above / _below / _left / _right
labeled-icon - ikona z sygnaturą (poziomo: labeled-icon_horizontal)

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ększy
tag__group - grupa tagów

Wstążki (np. na zdjęciach produktów):

ribbon - klasa bazowa
ribbon_primary / ribbon_secondary - kolor
ribbon_rounded-corners - zaokrąglone rogi
ribbon_absolute - pozycjonowanie bezwzględne (np. narożnik kafelka)
ribbon-group - grupa wstążek

Ceny

price - klasa bazowa ceny; rozmiary: price_xs, price_s, price_m, price_l
price__value_special - cena promocyjna (wyróżniona)
price__value_bold - pogrubiona, price__value_secondary - drugorzędna, price__value_inactive - wyszarzona
price-list - lista cen/pozycji (np. podsumowanie koszyka); price-list__item_summary - wiersz podsumowania, price-list__item_zebra - naprzemienne tło

Separatory

separator - separator pionowy; rozmiary: separator_xs, separator_s, separator_m, separator_l
separator-horizontal - separator poziomy (separator-horizontal_s, _m)
separator_secondary / separator_tertiary - wariant kolorystyczny

Widoczność

Ukrywanie / pokazywanie elementów tylko w danym breakpoincie:

hidden-{bp}-only - ukrywa element w danym breakpoincie (np. hidden-xs-only ukrywa tylko na telefonie)
visible-{bp}-only - pokazuje element tylko w danym breakpoincie
visible-hidden - ukrywa wizualnie, ale element zostaje w drzewie
sr-only - dostępne tylko dla czytników ekranu (ukryte wizualnie)

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-grid można sterować widocznością/rozmiarem kafelka per urządzenie klasami mobile-only, tablet-only, laptop-only, desktop-only

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.

Moduł

module - kontener modułu (margines dolny)
module__header - nagłówek modułu; module__header_s - mniejszy, module__header_highlight - z podkreśleniem akcentem
module__description - opis modułu
module__link-wrapper - kontener linku „zobacz więcej”