Pure CSS – návod k použití

Pure je poměrně malý soubor css stylů, určený jako základ pro stylování (nejen) responsivních www stránek. Je volně dostupný a fakticky spadá do rodiny Yahoo User Interface. Bohužel, na stránkách Pure najdete jako dokumentaci jen řadu příkladů, často v kombinaci s jinými zdroji, ale nic, co by se dalo nazvat referenční příručkou. Pokusím se to tedy alespoň částečně kompenzovat tímto Pure CSS tutorialem.

Kde vzít

Pure můžete stáhnout po částech z GitHubu (v asi 20 souborech) nebo si nalinkovat (či stáhnout) minifikovanou verzi z CDN (odkaz je na poslední verzi v době vzniku tohoto článku). Protože do tohoto souboru nechcete šťourat (vážně, nechtějte to), kompletní minifikované a gzipované Pure má okolo 4kB a dá se očekávat, že jej v honbě za responsivním designem bude používat kde kdo, doporučil bych zalinkovat právě z CDN.

Jak použít

Jedná se o sadu kaskádových stylů, tudíž k jejímu použití potřebujete pouze přidat prvkům ve svém HTML příslušnou třídu. Pure navíc nastaví jakési základní styly běžným HTML prvkům (jako nadpisy, seznamy a podobně), které by měly odstínit rozdíly mezi interpretací prvků jednotlivými prohlížeči. Nemám ovšem docela jasno v tom, jestli je to dobře, špatně, nebo jestli je to opravdu potřeba (osobně se většinou obejdu bez nějakého „úvodního resetování“ stylů a s Pure se mu už prostě nevyhnu).

Základní rozvržení

Pure využívá pro základní rozvržení stránky prakticky opsaný grid z YUI. Blok, uvnitř kterého chcete mít více sloupců, dostane třídu pure-g, případně její responsivní variantu pure-g-r. Do tohoto bloku můžete nacpat 1, 2, 3, 4, 5, 6, 8, 12 nebo 24 „sloupců“, nebo bloků překrývajících několik těchto sloupců pomocí tříd pure-u-x-y, kde x je počet zabraných oddílů a y velikost oddílu.

pure-u-1 zabere celou šířku nadřazeného bloku.

pure-u-1-2 zabere polovinu šířky nadřazeného bloku.

pure-u-2-3 zabere dvě třetiny šířky nadřazeného bloku.

Při členění na více než tři sloupce si ale musíte dávat pozor, protože (snad aby bylo css co nejmenší) například pure-u-2-4 není definována – dvě čtvrtiny jsou přeci jedna polovina a máte tak použít pure-u-1-2. Na to je potřeba si dát pozor, zejména pokud byste chtěli Pure využít na nějaké dynamické generování layoutu.

Při používání těchto gridových tříd si musíte dát pozor ještě na jednu věc – daný prvek nesmí mít žádný padding ani border. Pokud je má, nebude se zarovnávat správně. Co když potřebujete prvek s rámečkem nebo odsazením od kraje? Musíte zanořit další blok (třeba div), kde si tyto vlastnosti nastavíte.

Formuláře

Celkem příjemná věc je stylování formulářů. Stačí prvku form přidat třídu pure-form a formulář už dostane jakýsi základní vzhled prvků.

Pokud formuláři přidáte navíc třídu pure-form-stacked, zarovnají se jeho prvky tak, aby label byl vždy nad příslušným prvkem, s výjímkou radio a checkboxů (které však musíte označit třídou pure-checkbox případně pure-radio), které si label zarovnají za sebe.

Pokud formuláři přidáte místo toho třídu pure-form-aligned, zarovnají se jeho prvky tak, aby labely byly v jednom sloupci vlevo, prvky v pravo a checkboxy si opět dají label až za sebe.

Můžete dokonce dělat frajeřinky jako seskupit inputy k sobě tím, že je uzavřete do fieldsetu s třídou pure-group. Inputy se tak zhluknou do jednoho bloku se zaoblenými rohy, kde jsou jejich popisky tvořeny atributem placeholder. S labelem se tu nepočítá.

Když na to přijde, můžete pevně nastavit velikost jednotlivých inputů pomocí třídy pure-input-x-y, kde čísla x a y udávají počet dílů a velikost dílu, stejně jak jsme si popsali výše u gridu. Tím ale nastavíte jen velikost inputu, jejich zarovnávání to neovlivní. Na to pak musíte použít třeba zmíněný grid.

Pokud využijete u formulářových prvků atributy disabled nebo required, Pure vám tyto prvky nastyluje, aby vypadaly lépe. Nakonec můžete ještě třídou pure-input-rounded přidávat prvkům kulaté rohy. Užitečnost těchto posledních vychytávek je však přinejmenším diskutabilní.

Tlačítka a pseudotlačítka

S formuláři souvisejí i tlačítka, ať už ve formě inputu, buttonu, nebo odkazu typu „zahoďit a zpět“. Všechny tyto prvky můžete třídou pure-button nastylovat tak, aby vypadaly všechny stejně. Tj. jako přiměřeně velká šedivá tlačítka. Pokud chcete, můžete je označit jako neaktivní (přidáním třídy pure-button-disabled), právě stisknutá (přidáním třídy pure-button-active) nebo je označit za důležité (přidáním třídy pure-button-primary), což znamená, že tlačítko nebude šedivé, ale modré.

Užitečnost dalších tříd mimo pure-button je samozřejmě na zvážení. Vzhledem k tomu, že můžete tlačítka libovolně přestylovat přidáním další třídy (nebo předefinováním tříd Pure ve vlastním stylesheetu) je považuji za poměrně nadbytečné.

Tabulky

Pure nabízí stylování tabulek, které je však dost nepohodlné, moc neřeší a nedá se nazývat responsivním. To jistě nelze mít Pure za zlé, ale místo použití tabulkových tříd z Pure se jeví jako lepší cesta napsat si vlastní styl pro tabulky.

Chcete-li tabulku nastylovat přes Pure, použijte třídu pure-table. Dostanete tabulku s černým textem, bílým pozadím, šedivou hlavičkou a rámečkem pouze u sloupců. Kdybyste chtěli místo toho rámečkovat jednotlivé řádky, přidejte třídu pure-table-horizontal. Chcete-li rámeček mezi všemi buňkami, přidejte třídu pure-table-bordered.

Pokud chcete barevně odlišit sudé a liché řádky, můžete přidat třídu pure-table-odd každému sudému řádku. To je celkem klasika a protože byste tuto třídu nejspíš stejně museli přepsat, tak by možná stálo za to napsat si rovnou vlastní třídu odd.

Když si ale troufnete zazdít všechny Internet Explorery s verzí 8 nebo méně, můžete místo toho přidat tabulce třídu pure-table-striped, která to celé zařídí sama.

Menu

Pure nabízí řešení responsivních vertikálních i horizontálních menu, které je ovšem tak trochu zvláštní. Předně musíte přidat 2 třídy, aby bylo vaše menu vidět – pure-menu pure-menu-open. Tuto třídu přidáte bloku odkazy v odrážkovém seznamu, které se stanou položkami menu. Zapomeňte ale na nějaká víceúrovňová menu – tato menu jsou naprosto jednorozměrná. Chcete-li víc rozměrů, potřebujete víc menu. Pokud chcete, můžete jim ale přilepit hlavičku – vložíte odkaz s třídou pure-menu-heading, který se k menu přilepí a může reprezentovat například odkaz na úvodní stránku.

Aktivní položka menu se označí třídou pure-menu-selected. To v základu znamená, že odkaz nebude tmavě šedým, ale černým písmem a tak tuto třídu budete tak jako tak potřebovat předefinovat, pokud má někdo poznat rozdíl letmým pohledem.

Daleko užitečňejší je třída pure-menu-disabled, která znemožní na danou položku kliknout a zašedne ji. Tedy, užitečňejší je to v případě, že v menu chcete mít neklikatelné položky, což asi budete chtít zřídka kdy.

Tímto jsme si vytvořili vertikální menu, pokud chceme horizontální, musíme hlavnímu elementu, který už má třídy pure-menu pure-menu-open přilepit ještě třídu pure-menu-horizontal.

Menu nejsou v současné podobě žádný zázrak. Jejich responsivnost spočívá v tom, že se prvky floatují a zarovnávají pod sebe, Pure má vlastní styl, který musíte stejně přepsat (a který vám přepíše vlastnosti, které by menu mohlo zdědit například od tagu body nebo a).

Stránkování

Poslední užitečnou věcí v Pure je stránkování. Máte odkazy v odrážkovém seznamu a vlepíte jim třídu pure-paginator, který vám odkazy nasází vedle sebe. Další stylování je na vás, přinejlepším můžete na odkazy použít pure-button. Lepší než nic, ale opět žádný zázrak.

Vyplatí se to?

Dobrá otázka – za rok na ni možná dokážu odpovědět. Teď mohu říct jen následující:

  1. Pure vám umožní snadno a rychle (v závislosti na rozsahu a splácanosti vašeho HTML a vůbec návrhu layoutu) udělat z webu s fixní šířkou použitelný responsivní layout.
  2. Díky prefixu pure- vám tento základ nebude kolidovat s jinými styly a základní normalizace stylů není nic, co by mělo něco rozbít (ovšem nikdy neříkej nikdy).
  3. Přidávání tříd všem „Pure“ prvkům může nepříjemně zvětšit HTML kód. Na druhou stranu, například gridové třídy (pure-u-x-y) mají relativně krátké názvy a těžko jich jiným způsobem použít méně. Pokud nebudete „purifikovat“ každý druhý prvek na stránce, neměl by to být problém, kterým by stálo za to se zabývat.
  4. Pure vám cpe základní vzhled. Můžete ho změnit. Můžete si dokonce naklikat vlastní vzhled. Ale nemůžete nechat prvky s pure třídami prostě dědit nějaké základní styly. A to může někdy vadit.
  5. Vzhledem k malé využitelnosti řady tříd vám bude velká část Pure celkem na nic. CDN sice nabízí i jednotlivé části (formuláře, menu, grid…) ale pokud budete chtít použít více než jednu, jakýkoliv zisk z nestahování celého Pure se ztratí v overheadu z hlaviček.
  6. Jelikož minifikovaný Pure bez gzipu má 19kB, je stahování z CDN fakticky jediná rozumná možnost, jak jej použít (nemáte-li vlastní server na statický obsah s gzipem a nějakým chytrým cachováním).

AKTUALIZOVÁNO: Pure CSS za to nestojí