00 SK mini framework
Obecné třídy
| Třída | Určeno pro prvek | Popis a ukázka |
|---|---|---|
| .l | libovolný | Floatovaný prvek doleva |
| .r | libovolný | Floatovaný prvek doprava |
| .cl | libovolný | Prvek čeká na obtékané elementy přiražené doleva |
| .cr | libovolný | Prvek čeká na obtékané elementy přiražené doprava |
| .cb | libovolný | Prvek se vykreslí až pod všemi plovoucími prvky |
| .row | blokový | Definuje řádek v grid systému |
| .cfx | blokový | Obalení do prvku s touto classou vyclearuje floaty |
| .ctx | blokový | Obalení do prvku s touto classou vyclearuje block vedle floatů |
| .vhide | libovolný | Skrýt prvek na monitoru (čtečkám zůstává prvek dostupný). |
| .out | libovolný | Skrýt prvek na monitoru (čtečkám zůstává prvek dostupný). - jiný způsob |
| .jsOut | libovolný | Skrýt prvek na monitoru (čtečkám zůstává prvek dostupný). Jen pokud má uživatel zapnutý JS |
| .hide | libovolný | Skrýt prvek pro všechna zařízení |
| .jsHide | libovolný | Skrýje prvek jen pokud má uživatel zapnutý JS |
| .match-height | .box-bg v rámci grid__cell | Srovná výšku boxů v řádku gridu |
Třídy pro práci s textem
| Třída | Určeno pro prvek | Popis a ukázka |
|---|---|---|
| .h1, .h2, .h3, .h4, .h5, .h6 |
nadpisy, text | Přestyluje element do stylu nadpisu / nadpisům změní velikost |
| .h-huge | nadpisy |
Obrovský nadpis H1Obrovský nadpis H2Obrovský nadpis H3Obrovský nadpis H4Obrovský nadpis H5Obrovský nadpis H6 |
| .h-big | nadpisy |
Větší nadpis H1Větší nadpis H2Větší nadpis H3Větší nadpis H4Větší nadpis H5Větší nadpis H6 |
| .h-medium | nadpisy |
Velký nadpis H1Velký nadpis H2Velký nadpis H3Velký nadpis H4Velký nadpis H5Velký nadpis H6 |
| .h-small | nadpisy |
Menší nadpis H1Menší nadpis H2Menší nadpis H3Menší nadpis H4Menší nadpis H5Menší nadpis H6 |
| .center | blokový | Zarovnání na střed |
| .right | blokový | Zarovnání doprava |
| .left | blokový | Zarovnání doleva |
| .lower | libovolný | Minusky |
| .upper | libovolný | Kapitálky |
| .bold | libovolný | Tučné písmo |
| .thin | libovolný | Normální písmo |
| .italic | libovolný | Kurzíva |
| .normal | libovolný | Písmo bez kurzívy |
| .huge | libovolný | Největší písmo (32px) |
| .big | libovolný | Větší písmo (24px) |
| .medium | libovolný | Větší písmo (20px) |
| .small | libovolný | Menší písmo (14px) |
| .normal-size | libovolný | Malé písmo uvnitř .small, běžné písmo uvnitř .small |
| .top | buňky tabulky | Vertikální zarovnání nahoru |
| .bottom | buňky tabulky | Vertikální zarovnání dolů |
| .middle | buňky tabulky | Vertikální zarovnání doprostřed |
| .red | libovolný | Červená |
| .orange | libovolný | Oranžová |
| .green | libovolný | Zelená |
| .light | libovolný | Šedá |
| .dark | libovolný | Tmavá |
| .font-primary | libovolný | Primární font – ‘TeX Gyre Heros’, Arial, Helvetica Neue, sans-serif |
| .font-muni | libovolný | Custom font Masarykovy univerzity |
| .font-consola | libovolný | Font pro kód – Consolas, monaco, monospace |
| .nowrap | libovolný | Nezalomitelný obsah (např. pro ceny) |
Třídy pro modifikaci odsazení molekul
| Třída | Určeno pro prvek | Popis a ukázka |
|---|---|---|
| .u-mb-150 | div, nadpisy, p, ul, ol | Nastaví margin ze spodu na 150px |
| .u-mt-150 | div, nadpisy, p, ul, ol | Nastaví margin shora na 150px |
| .u-mb-50 | div, nadpisy, p, ul, ol | Nastaví margin ze spodu na 50px |
| .u-mt-50 | div, nadpisy, p, ul, ol | Nastaví margin shora na 50px |
| .u-mb-30 | div, nadpisy, p, ul, ol | Nastaví margin ze spodu na 30px |
| .u-mt-30 | div, nadpisy, p, ul, ol | Nastaví margin shora na 30px |
| .u-mb-0 | div, nadpisy, p, ul, ol | Nastaví margin ze spodu na 0px |
| .u-mt-0 | div, nadpisy, p, ul, ol | Nastaví margin shora na 0px |
| .u-pb-150 | div s pozadím nebo ohraničením | Nastaví padding ze spodu na 150px |
| .u-pt-150 | div s pozadím nebo ohraničením | Nastaví padding shora na 150px |
| .u-pb-50 | div s pozadím nebo ohraničením | Nastaví padding ze spodu na 50px |
| .u-pt-50 | div s pozadím nebo ohraničením | Nastaví padding shora na 50px |
| .u-pb-30 | div s pozadím nebo ohraničením | Nastaví padding ze spodu na 30px |
| .u-pt-30 | div s pozadím nebo ohraničením | Nastaví padding shora na 30px |
| .u-pb-0 | div s pozadím nebo ohraničením | Nastaví padding ze spodu na 0px |
| .u-pt-0 | div s pozadím nebo ohraničením | Nastaví padding shora na 0px |
| .u-pl-0 | td, th | Nastaví padding zleva na 0px |
| .u-pr-0 | td, th | Nastaví padding zprava na 0px |
| .u-pl-10 | td, th | Nastaví padding zleva na 10px |
| .u-pr-10 | td, th | Nastaví padding zprava na 10px |
| .u-pl-20 | td, th | Nastaví padding zleva na 20px |
| .u-pr-20 | td, th | Nastaví padding zprava na 20px |
Dynamické zobrazování obsahu dle velikosti obrazovky
| Třída | Chování dle šířky obrazovky | Ukázka |
|---|---|---|
| .show-xs | zobrazí se pouze do 480px | viditelný obsah |
| .hide-xs | skryje se do 480px | nyní skryto |
| .show-s-up | zobrazí se od 480px | viditelný obsah |
| .hide-s-up | skryje se od 480px | nyní skryto |
| .show-s | zobrazí se mezi 480px a 768px | viditelný obsah |
| .hide-s | skryje se mezi 480px a 768px | nyní skryto |
| .show-m-up | zobrazí se od 768px | viditelný obsah |
| .hide-m-up | skryje se od 768px | nyní skryto |
| .show-m | zobrazí se mezi 768px a 1024px | viditelný obsah |
| .hide-m | skryje se mezi 768px a 1024px | nyní skryto |
| .show-l-up | zobazí se od 1024px | viditelný obsah |
| .hide-l-up | skryje se od 1024px | nyní skryto |
| .show-l | zobrazí se mezi 1024px a 1440px | viditelný obsah |
| .hide-l | skryje se mezi 1024px a 1440px | nyní skryto |
| .show-xl-up | zobrazí se od 1440px | viditelný obsah |
| .hide-xl-up | skryje se od 1440px | nyní skryto |
Použitím těchto tříd na hlavním obalu jakékoliv molekuly lze nastavit vnitřní a vnější odsazení. Defaultní vnější odsazení většiny komponent je 50px ze spodu, ale né vždy je toto odsazení potřebné – v někteých případech je potřeba změnšit (použijeme u-mb-30) či úplně vypnout (použijeme u-mb-0).
Tyto util classy se mohou využívat i pro typogrii – lze tedy odsadit např. element p či nadpisy apod.