Yahoo UI CSS Foundation
Mezi českými vývojáři nevyvolávají knihovny Yahoo zrovna davové nadšení. Je to pochopitelné, ale také trochu škoda. Provozovatel Flickru a dalších služeb, ke kterým se chodíme učit návrh uživatelského rozhraní, nám může CSS částí své knihovny YUI pomoci minimálně v rovině inspirace.
Z jednoho pohledu CSS framework od Yahoo nemá konkurenci — vyvíjí jej internetový Goliáš. Práce na něm jen tak neustanou a projekt má díky tomu samozřejmě vynikající dokumentaci. Kombinované i komprimované CSS soubory navíc můžete linkovat přímo z CDN sítě Yahoo, podobně jako třeba javascriptové knihovny od Google.
YUI CSS Foundation má velmi dobře nastavenu resetovací a typografickou vrstvu — viz typografické srovnání dále. Bohatý layoutovací modul YUI CSS Grids z druhé verze je v nové – 3. verzi – ve stavu deprecated, autoři pracují na novém.
960 grid system
Velmi populární CSS framework Nathana Smithe byl zpočátku úzce specializovaný na systém layoutu v šířce 960 pixelů ve 12 nebo 16 sloupcovém gridu. Dnes se víceméně podobá Blueprintu tím, že grid si můžete nastavit zcela dle svých preferencí.
Základní typografii mají asi lépe vyřešenu Blueprint CSS a YUI CSS Foundation, 960.gs vám za to nabídne šablony pro Fireworks, Photoshop, Visio a další software, jež nepatří do běžného vybavení vývojářů. 960.gs se tak blíží jakési univerzální vizuální komunikační platformě mezi informačním architekty, grafiky a HTML kodéry.
Ukázka layoutu ve 12sloupcovém gridu:
<div class="containter_12"> <div class="grid_8"> <!-- Obsahový sloupec o šířce 8 sloupců --> </div> <div class="grid_4"> <!-- Pravý postranní sloupec o šířce 4 sloupce --> </div> <div class="clear"></div> </div>
Máme tak layout velmi podobný tomu minulého článku vytvořenému pomocí Blueprint CSS:
Další CSS frameworky, které stojí za studium
- YAML — Velmi komplexní, výborně dokumentovaný HTML/CSS framework Dirka Jesseho. Obsahuje nástroj pro budování layoutu a také debugovací nástroj. Nevýhodou je — i na poměry CSS frameworků — poměrně složitá syntaxe layoutovacího modelu a struktura souborů. Framework je pak zaměřen nejvíce na programátorskou veřejnost.
- Tripoli — sám o sobě říká, není CSS frameworkem, ale obecným CSS standardem pro renderování HTML dokumentů. Pokud si layout umíte vytvořit sami a hledáte něco jednoduchého, může být správnou volbou.
- Frameworky Vladimira Carrera — italský vývojář se standardy pro vzhled HTML dokumentů zabývá dlouhodobě. Podívejte se na jeho framework pro elastický layout Emastic, formulářový framework Formy a nebo tiskový framework Hartija.
Srovnání vzhledu HTML dokumentu v jednotlivých CSS frameworcích
Podívejte se jak 7 nejobvyklejších CSS frameworků generuje vzhled zkušebního HTML dokumentu a jeho jednotlivých prvků.
Srovnání otevřete v prohlížeči na zvláštní stránce.
Ze srovnání jsou patrné nejen subjektivní rozdíly ve vykreslování jednotlivých prvků, ale také různé úrovně čitelnosti zobrazovaného obsahu. Oslovení designéři se shodovali na preferencích Blueprint CSS, k pozornosti doporučuji v tomto směru také frameworky Tripoli a YUI CSS Foundation.
Jsou vůbec CSS frameworky pro mě?
HTML/CSS kodéři, patříte-li mezi zkušené a zabýváte se vytvářením šablon pro nejrůznější typy webů nebo aplikací, je docela pravděpodobné, že vlastní resetovací a typografickou vrstvu CSS frameworku už nějaký čas používáte.
Možná, že jste podobně jako autor článku také přesvědčeni, že abstrahovat široké spektrum všech různých layoutů používaných ve webdesignu do modelu univerzálních šablon nebo gridu je možné jen za cenu zhoršené udržovatelnosti HTML a CSS kódu.
Popis vašeho layoutu pak při neopatrném zacházení s frameworkem může například skončit kódem <div class="column span-6 prepend-1 indent-8 last"> namísto snáze pochopitelnějšího <div id="content">.Je ale možné, že resetovací a typografické vlastnosti některého z frameworků vám budou připadat natolik blízké, že se rozhodnete je univerzálně používat i bez layoutové vrstvy. Výhodou frameworků kromě jiného je komunitní vývoj a více hlav vždy odladí více chyb.
Programátoři, když potřebujete vytvořit rychlý prototyp webu nebo aplikace s dobře čitelným textem a jednoduchým layoutem, budou pro vás frameworky jako Blueprint nebo 960.gs hotovým zázrakem.
Když vyvíjíte složitější web, nemáte k ruce designéra, podívejte se na YAML, který je na programátory zaměřen.
Designéři, ti z vás, kteří uvažují o layoutu webu v gridu, by se měli zaměřit především na Blueprint CSS a 960.gs. Blueprint má lépe řešenu typografii a širší podporu v různých editorech layoutu, 960.gs vám zase poskytne šablony pro vaše oblíbené grafické editory, jež vám usnadní komunikaci s HTML kodérem.
Pokud není grid to, po čem toužíte, podívejte se na typografické vlastnosti Yahoo CSS Foundation, Blueprint CSS nebo Tripoli. Doporučte je svému kodérovi, mohou být užitečným startem vašeho příštího projektu.
Majitelé stránek, máte zajímavý obsah, webdesignéři jsou na vás příliš drazí a rádi si web zalomíte sami? Nezapomeňte, že svým čtenářům můžete typografickými vlastnostmi zmíněných tří frameworku usnadnit čtení a obsah zalomit do některého z layoutů, jež nabízí Blueprint CSS nebo 960.gs.
Užití CSS frameworků v praxi
Pro nasazení se rozhodly i větší weby: Lulu.com využívá 960.gs. Quantcast a Mint.com nebo u nás Pražské jaro používají Blueprint CSS. Více jich najdete na stránkách frameworků.
CSS frameworky nejsou řešením pro všechny a do každé situace. Jejich nasazení je vždy potřeba bedlivě zvážit, ale pokud se správě rozhodnete, rozhodně vám energii investovanou do výběru vrátí.
Přehled komentářů