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

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
.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
.big libovolný Větší písmo (24px)
.medium libovolný Větší písmo (18px)
.small libovolný Menší písmo (14px)
.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 – 'Helvetica Neue', Helvetica, Arial, sans-serif
.font-secondary libovolný Sekundární font – 'FF Meta Pro Bold', Tahoma, sans-serif
.font-serif libovolný Serif font – Georgia, Times, 'Times New Roman', serif
.font-consola libovolný Font pro kód – Consolas, monaco, monospace
.nowrap libovolný Nezalomitelný obsah (např. pro ceny)

Třídy pro modifikaci odsazení molekul

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.

Třída Určeno pro prvek Popis a ukázka
.u-mb-50 div, nadpisy, p, ul, ol Nastaví margin ze spodu na 50px
.u-mt-50 div, nadpisy, p, ul, ol Nastaví margin ze zhora 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 ze zhora 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 ze zhora na 0px
.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 ze zhora 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 ze zhora 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 ze zhora 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 zprava na 20px
.u-pr-20 td, th Nastaví padding zprava na 0px