CSS frameworky pro masy, díl druhý

Pojďme se blíže podívat na další dva zajímavé CSS frameworky — YUI CSS Foundation a 960 grid system, a další, které by mohly zajímat webdesignéry, vývojáře i příležitostné autory WWW stránek. Který framework vám bude nejvíce vyhovovat? To napoví srovnání typografických vlastností a závěrečná doporučení.

Seriál: CSS frameworky (2 díly)

  1. CSS frameworky pro masy, díl první 19.8.2009
  2. CSS frameworky pro masy, díl druhý 26.8.2009

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:

CSS frameworky - 960grid

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ů.

CSS frameworky

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í.

Komentáře: 28

Přehled komentářů

nes_ro Re: CSS frameworky pro masy, díl druhý
Rivon Re: CSS frameworky pro masy, díl druhý
nes_ro Re: CSS frameworky pro masy, díl druhý
danisevsky Re: CSS frameworky pro masy, díl druhý
altar Bluetrip
viforeg Re: Bluetrip
vks Tabulkový layout rulez
Roman Pištěk Re: Tabulkový layout rulez
Tomas Vrana Re: Tabulkový layout rulez
Martin Michálek Re: Tabulkový layout rulez
kahi typografická vrstva?
Martin Michálek Re: typografická vrstva?
kahi Re: typografická vrstva?
Martin Michálek Re: typografická vrstva?
kahi Re: typografická vrstva?
Martin Michálek Re: typografická vrstva?
kahi Re: typografická vrstva?
Martin Michálek Re: typografická vrstva?
Jáchym input,textarea,select{*font-size:100%;}??
Pavel Dvořák Re: input,textarea,select{*font-size:100%;}??
karf Re: CSS frameworky pro masy, díl druhý
Martin Michálek Re: CSS frameworky pro masy, díl druhý
karf Re: CSS frameworky pro masy, díl druhý
Martin Michálek Re: CSS frameworky pro masy, díl druhý
karf Re: CSS frameworky pro masy, díl druhý
Martin Michálek Re: CSS frameworky pro masy, díl druhý
You've been always wrongdoing you idiots to evaluate a foreign code in a framework is always worse than designing a suitable algorithm and architecture
repulsive YAML..
Zdroj: https://www.zdrojak.cz/?p=3072