„CSS framework”, co je to za vtip?

Je vlastně pojmenování framework na místě? Ne vždy. Přijmeme-li jako definici frameworku tu z anglické Wikipedie, můžeme prohlásit, že některé „CSS frameworky” skutečně frameworkem jsou — ty, které obsahují podporu pro snadnější tvorbu layoutu pomocí předdefinovaných tříd.

Je pak ale otázku, jestli jde o frameworky kaskádových stylů nebo frameworky designu. A je frameworkem skupina CSS vlastností, kterou využíváme jen pro reset výchozích nastavení prohlížečů a nastavení typografie, což je jejich velmi časté využití? Není. Některé „CSS frameworky” jsou tak spíše knihovnami.

Elegantně to vyřešili v Yahoo, kde vzhledové části knihovny YUI  říkají CSS základ (foundation). Ne, framework není právě šťastné pojmenování, ale už se stalo. Než lamentovat nad rozlitým mlékem, pojďme se podívat jak souvisí CSS frameworky s principy designu webu.

CSS framework a design webu jsou sourozenci

Struktura komponent CSS frameworků velmi dobře odráží způsob jakým můžeme přemýšlet o designu webu obecně. Představme si je jako vrstvy. Na povrchu jsou estetické lahůdky (ornamenty), které využije jen někdo a jejichž vzhled bývá hodnocen ryze subjektivně. Úplně dole jsou prvky, které kdyby byly používány opravdu velmi široce, vývojáři tím uživatelům i sobě prokáží velkou službu. Horní patra mívají konkrétní použití, spodní naopak velmi univerzální platnost.

Podívejme se na jednotlivé vrstvy blíže:

• Ornamenty — sady ikonek, vzhled tlačítek a další sady CSS pravidel, sloužící dekorativním nebo vysoce specializovaným účelům. Knihovna Tripo­li nabízí plugin Negative pro bílý text na černém pozadí. Blueprint CSS obsahuje plugin s ikonkami pro označování odkazů. Ornamenty naleznou své využití jen ve zcela konkrétních případech a preference jejich vzhledu budou velmi individuální.
• Vzhled prvků — typickým příkladem je systém pro definici vzhledu formulářů. Takový obsahuje například  Blueprint CSS nebo specializovaný formulářový framework Formy. Mezi pluginy frameworku YAM­L najdete pravidla vzhledu pro mikroformáty.
• Layout webu — systém pro definici rozvržení stránky. U frameworků jde většinou o fixní nebo elastický layout postavený na gridu. Tato část je ze všech současných CSS frameworků nejpopulárnější, ale také nejvíce přeceňovaná.
• Alternativní média — některé frameworky integrují obecně platná pravidla pro vzhled tiskových sestav. Zajímavý je v tomto ryze tiskový CSS framework Hartija. Podobně jako pro tisk bychom mohli definovat obecná pravidla například pro mobilní zařízení.
• Typografie  — pravidla, jež přiřazují zresetovaným prvkům nový vzhled. Tato část určí jak dobře se nám bude výsledný text číst. Jakkoliv je vertikální rytmus důležitý, ne všechny frameworky na něj kladou patřičný důraz, o čemž si více řekneme v pokračování článku.
• Reset výchozích nastavení prohlížečů. První a zásadní úkon pro úspěšné vykročení při stavbě webu. Frameworky většinou využívají modifikovaný reset Erica Meyera.

Představme si CSS framework jako hrad. Zde resetovací pravidla tvoří základy položené ve skále, typografie a tisk hradby, layout pak zdi a střechy samotných budov, obecné prvky pak třeba univerzální specifikaci vzhledu oken a estetické drobnosti pak ornamenty na stěnách. (Idea hradu pochází od jednoho z autorů YUI CSS foundation Nate Koechleyho.)

Blueprint CSS, první grid framework

Chceme-li se vydat alespoň na krátkou vycházku z historie do současnosti CSS frameworků, jeden spolucestující je jasný — Blueprint CSS. Framework Olava Bjorkoye postavený na gridu zpopula­rizoval před dvěma lety guru gridu Khoi Vinh.

Blueprint CSS patří i dneska k nejkomplexnějším CSS frameworkům. Jeho hlavní přínos byl však ve zjednodušení tvorby layoutu pomocí pravidelného fixního gridu.

Výhodou Blueprintu je, že byť jej původní autoři dávno opustili, svou přízní je mu nakloněna široká vývojářská komunita. Na druhou stranu je pravda, že vývoj dnes probíhá spíše na úrovni oprav chyb nebo vzniku podpůrných nástrojů. V dalším díle článku možná sami uvidíte, že dokáže být silný i bez gridu — jeho resetovací a typografické vlastnosti patří k těm nejlepším.

Návrh layoutu na technické úrovni funguje v Blueprintu asi takto:

Pomocí některého z online nástrojů si vytvoříte vlastní grid a nebo použijete přednastavený, který obsahuje 24 sloupců o šířce 30 pixelů v celkové šířce stránky 950 pixelů.

Jednoduchý dvousloupcový layout v něm pak vytvoříte třeba touto konstrukcí:

<div class="container">
  <div class="span-16">
    <!-- Obsahový sloupec o šířce 16 sloupců  -->
  </div>
  <div class="span-8 last">
    <!-- Pravý postranní sloupec o šířce 8 sloupců  --> 
  </div>
</div>

Výsledný layout pak bude s obsahem vypadat takto:

Je to skutečně snadné a, potřebujete-li layout pro účely rychlého prototypu, také velice efektivní. Čtenáři už ale v této krátké ukázce mohou vidět jistá úskalí, kterými CSS frameworky obecně trpí.

Na ty se blíže podíváme v druhé části článku. Kromě toho pohlédneme na dva další populární CSS frameworky — YUI CSS foundation a 960 grid system. Srovnáme je nakonec s ostatními a pokusíme se doporučit, který se hodí pro vaše konkrétní potřeby.