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)
- CSS frameworky pro masy, díl první 19. 8. 2009
- CSS frameworky pro masy, díl druhý 26. 8. 2009
Nálepky:
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í.
Martin Michálek
Nezávislý specialista na webový frontend. O responzivním designu, HTML5, CSS3 a dalších tématech píše na blogu Vzhůru dolů nebo v ebooku. Pořádá školení. Na Twitteru je jako @machal.
Děkuji za dobrý článek. Jdu ten Blueprint zkusit. Dřív jsem měl motivaci psát vlastní CSS, abych neměl zbytečnou omáčku kolem, kterou stejně nepoužiju, ale když už používám PHP a JS framework, tak asi bude snažší u jednoduších stránek použít Blueprint. Nadruhou stranu u složitějších laoyutů bych si asi styl psal radši sám, ta omáčka kolem by mohla způsobovat věci, na který nejsem zvyklej. :)
Jj, super článek. Taky jsem si na všechno neustále dělal vlastní CSS. O CSS frameworcích jsem v životě neslyšel, ale abych pravdu řekl, tak se mi jejich snadnost použití hodně líbí, takže od teď asi začnu používat ;)
Tak nic… Chtěl jsem něco s podporou HTML5 a CSS3 :(
Diky za velmi kvalitni a hodnotny clanek!
Jen bych chtel doplnit, ze velice dobry framework je Bluetrip (viz. bluetrip.com), ktery kombinuje Blueprint a Tripoly. Urcite taky doporucuji vyzkouset
Adresa by měla být bluetrip.org
CCS framework je podle mě pro lamy kdo chce něco udělat, profík si těch pár desítek řádků v css může bez problému napsat sám…
nemyslím si, že by někdo dělal tolik různých webů s tak různým layoutem, aby nešlo použít už několikrát použítý základ stylu a opravit jen pár hodnot a udělat jen pár drobností.
PS: osobně jsem se vždycky štítil používat cizí kód (po spoustě zlých zkušeností)
„Tabulkový layout rulez“ – pobavilo :-)
udělat jen pár drobností nezřídka dopadá jako férová předelávka a v případě kooperace s více lidma jsou frameworky k nezaplacení. Ad „používat cizí kód“ … frameworky nejsou sousedovou prací, ale značně kolektivní snahou a třeba v případě YAHOO se jedná o celý komplet komponent a framů, který si nevycucali z pstu přes víkend, ale jedná se takřka o prvotřídní a napříč prohlížeči neprůstřelné kousky. Mělo to tady být spíš už dávno a dnes tedy jako konvence.
PS: osobně jsem se vždycky štítil používat nebo předělávat cizí kód, ale klient to tak chce a člověku nezbývá nic jiného než ten či ten autorský poděl prostě resetovat. Věc je prostě hlavně kolektivně výhodná. Od čehož vůbec frameworky asi jsou.
nemyslím si, že by někdo dělal tolik různých webů s tak různým layoutem, aby nešlo použít už několikrát použítý základ stylu a opravit jen pár hodnot a udělat jen pár drobností.
Když si článek přečtete, zjistíte, že CSS frameworky se nezabývají výlučně layoutem. Často se jím nezabývají vůbec. Je to část, kterou můžete a nemusíte používat.
Ad. cizí kód: Začněte tím, že si napíšete vlastní CSS framework a hned poté vlastní prohlížeč a operační systém. :-) Všechny jsou plné ošklivého a zlého cizího kódu. Ale taky ohromného množství dobrých nápadů vzniklých z týmové spolupráce nadšených lidí.
Mohl bys prosímtě vysvětlit, co myslíš, když říkáš „typografická vrstva“ nebo prostě „typografie“ v těchto souvislostech…? Chápu to dobře, že to znamená výchozí nastylování textových prvků?
PS & OT: rád bych se přihlásil, ale výrok „Jméno a heslo platí pro všechny servery společnosti Internet Info.“ zjevně neplatí.
Ano. „Typografickou vrstvou“ myslím výchozí nastylování všech prvků, nejen textových. Někdo téhle části říká vertikální rytmus.
Je to část, která má ze všech k typografii nejblíže, byť na plnohodnotnou práci s písmem si na webu ještě počkáme.
OK. Ještě by mě zajímalo: je něco z těchto typo-definic použitelné při kódování dle graf. návrhu (a příp. kolik), anebo v takovém případě je lepší začít nanovo?
Druhý dotaz: díval jsem se, že některé frameworky pro některé prvky předepisují i způsob zápisu HTML, např. účast zvláštních tříd. Narážím teď na formuláře v tvém srovnání typografie – sdílí všechny příklady stejné HTML anebo ne? (Protože pokud framework předepisuje i HTML, srovnání které na to nebere ohled trochu dojem zkresluje…)
Opět OT: Jestliže tento článek je součástí seriálu, jak mám najít první díl a jak poznám, jestli ještě nějaké díly budou?
je něco z těchto typo-definic použitelné při kódování dle graf. návrhu
Všechny jsou v takovém případě použitelné. Osobně jinak CSS frameworky nepoužívám.
Můj postup je takový:
1) k dokumentu přilinkuji Blueprint (tím za 10 minut práce získám docela dobrý základ – třeba takovýto http://www.vzhurudolu.cz/…ss/test.html)
2) k tomu přilinkuji nějaké své CSS, kterým si nastavení Blueprintu upravím a dalé kóduju už „normálně“ vzhled a layout
sdílí všechny příklady stejné HTML anebo ne?
HTML je totožné. Dobrý podnět – je to tam potřeba zdůraznit.
jak mám najít první díl a jak poznám, jestli ještě nějaké díly budou
Obecně to je na redakci. V tomto případě se jedná o druhý a zatím závěrečný díl.
Pokud z diskuze vyjde potřeba dalšího vysvětlení, budu se mu rád věnovat na blogu nebo v případě potřeby i zde na Zdrojáku.
> Všechny jsou v takovém případě použitelné
> k dokumentu přilinkuji Blueprint (tím za 10 minut práce získám docela dobrý základ – třeba takovýto http://www.vzhurudolu.cz/…ss/test.html)
A pak předpokládám (oprav mě prosím), že musíš přepsat definice rodiny písma, velikosti a řádkování (běžné texty + nadpisy) a případně barvy podle toho, jak jsou na grafickém návrhu. Pak musíš zkontrolovat zbývající prvky (seznamy, tabulky, citace) a případně je rovněž zkorigovat.
Z mého pohledu se zdá, že naprostou většinu věcí musíš buď zcela přepsat anebo alespoň zkontrolovat a jako hlavní výhodu oproti psaní na zelené louce vidím v tom, že je těžší zapomenout něco nastylovat, neb tam ty prvky v CSS vždycky vidíš všecky potenciální…
předpokládám (oprav mě prosím), že musíš přepsat definice rodiny písma, velikosti a řádkování (běžné texty + nadpisy) a případně barvy podle toho, jak jsou na grafickém návrhu
Ano, na každý projektu je potřeba drobnosti v typografii přenastavit. O barvách nemluvě, ty se týkají vzhledu a ten kóduješ vždycky od nuly.
Osobně dělám na projektech v Shortcat s jediným designérem a máme vybudovaný systém, ve kterém se resetovací a typografická vrstva skoro vůbec nemodifikují a pokaždé myslím jen na ty horní vrstvy – layout, vzhled.
V tvém případě (pokud chápu správně, že děláš různé weby s různými grafiky) můžu jen teoretizovat. Mám ale docela silný pocit, že minimálně ten vertikální rytmus (http://www.blueprintcss.org/…lements.html) a nastylování všech prvků ti hodně pomůže. Zkus to, rád si vyslechnu tvé zkušenosti. :-)
Díky za trpělivost. Ve zkratce: že je možné se s grafikem domluvit na nějakých konvencích, to mě nenapadlo. Nevím jistě, co si o tom myslet. Nepůsobí potom styl obsahů trochu šablonovitým dojmem? (Když si postavíš vedle sebe různé práce téhož grafika.) Možná to není na závadu. Ale osobně to dělám raději pokaždé o něco málo jinak.
Při stylování typografie (v mém pojetí: obsahu) si občas kopíruji kusy kódů z předchozích prací, to ale hlavně kvůli 1. výčtům prvků 2. jaksi zažitému způsobu stylování této části 3. specifikům výstupu z redakčního systému. Vlastně by to bylo docela podobné práci s typo.css např. z Blueprintu: prošel bych seznam a zkorigoval hodnoty. Ale tohle považuji jen za drobnou pomůcku, nic zásadního, ušetří mi to řekněme patnáct minut. Což se mi při pohledu na celý proces stylování velice snadno ztratí.
Nepůsobí potom styl obsahů trochu šablonovitým dojmem?
To je na jinou diskuzi, ale jsem přesvědčený, že cílem designéra by mělo být navrhnout k danému obsahu optimální uživatelské rozhraní, nikoliv zabývat se drobnými odlišovacími úpravami v typografické vrstvě.
Jak je patrné z grafu v prvním díle článku, věřím, že u typografické vrstvy existuje pro různé weby jen málo optimálních způsobů jejího navržení a z toho pohledu nejsou dle mého názoru úvahy o škodlivosti „šablonovitosti“ na místě.
Dalo by se říct, že návrh typografické vrstvy je v zásadě řemeslo, kdy výsledek můžeme hodnotit jako dobře nebo špatně odvedenou práci. Naopak třeba vzhled (barvy atd.) jsou čistě o emocích a tam je vnímání různými lidmi zcela subjektivní.
Proto ta typografická vrstva je třeba v našich projektech v zásadě pořád stejná (nebo postupně vylepšující se).
A proč si ji nenapíšu sám, když je to v zásadě subtilní kousek software? Protože Blueprintu věřím a hlavně věřím, že výsledek práce v komunitě je daleko méně náchylný k různými triviálním chybám, které jsem jako individuál schopen nasekat.
Kód z titulku jsem našel přímo v YUI CSS resetu: http://yui.yahooapis.com/…eset-min.css Co ta hvězdička před font-size znamená? Mimochodem není validní. Děkuji za odpověď
To bude variace na tzv. podtržítkový hack, pomocí kterého se dá odlišit Internet Explorer 6 a starší od ostatních prohlížečů.
Bohužel, většina těchto frameworků je napsána dost nešikovně. Namátkou první řádek z 960gs:
body { font: 13px/1.5 Helvetica, Arial, ‚Liberation Sans‘, FreeSans, sans-serif; }
Takže zde máme:
– písmo definované v px – neumožňuje zvětšování písma v IE
– výška řádku 13 × 1.5 = 19.5, což nevychází na celý pixel – takový Firefox pak například vykreslí každý první řádek 19px a každý druhý 20px, což vypadá fakt blbě.
– první font Helvetica? To bych (zvlášť v českém prostředí) raději nepoužíval. Kdo má na Windows Helveticu ví, že je kvůli vyhlazování při normálních velikostech dost špatně čitelná.
O těch šílených konstrukcích, kterými vytvářejí grid ani nemluvě. A taky nevěřte všem proklamacím o kompatibilitě napříč prohlížeči. U Yahoo a Blueprintu to snad doufám platí, ale u různých minoritních frameworcích je potřeba to osobně testovat.
Nezobecňoval bych nešikovnost konkrétní části konkrétního CSS frameworku slovy „většina těchto frameworků je napsána dost nešikovně“.
Každý z nich je vhodný pro někoho jiného, vám zřejmě nebude vyhovovat 960.gs. Doporučil bych ho třeba méně zkušenému grafikovi, který dobře umí HTML a CSS.
Vám říkám: Zkuste Blueprint CSS nebo Yahoo CSS foundation.
Problémy jako „Helvetica v českém prostředí“ jsou jistě palčivé, ale ty si můžete přenastavit sám. Tvrdím, že i tak na každém novém webu ušetříte spoustu času a nervů.
CSS frameworky nelze brát jako skálu, do které se nemá šťourat, aby nám ten hrad nespadl. Je nutné se v nich šťourat. Přijít si na věci, které vám vyhovují a které naopak chcete nastavit jinak.
To zobecnění je můj osobní závěr, který jsem si utvořit po shlédnutí zdrojových kódů některých frameworků (když se někde o nějakém psalo, mrknul jsem na to). Ve většině jsem opravdu nacházel konstrukce, které bych sám nikdy nepoužil a které považuju za problémové – od používání overflow pro clearování floatů, přes podivně definované rozměry bloků až po vyloženě hloupě obcházené bugy IE, nebo třeba nešťastné CSS resety.
Já měl za to, že když už se něco nazývá „framework“, tak je to jakýsi základ, na kterém se má dál stavět. Čili že se snaží o co největší zobecnění stylů. Když si představím, že bych si měl přizpůsobovat grid definovaný podle Blueprintu nebo Yahoo CSS, tak na mě jdou mdloby.
Myslím si, že resetovací a typografická vrstva pomůže téměř všem.
Ano, i tahle část kódu jde v případě kteréhokoliv ze zmiňovaných frameworků napsat lépe. Vy sám si ji možná lépe napíšete.
Obecně ale u mě mají třeba Blueprint nebo Yahoo CSS foundation důvěru. V obou případech jde o kus kódu vyvíjený a (hlavně) testovaný během let širokou komunitou. Vy sám svůj kód takovému testování nebudete nikdy schopen podrobit.
Když si představím, že bych si měl přizpůsobovat grid definovaný podle Blueprintu nebo Yahoo CSS, tak na mě jdou mdloby.
Pozor, tady se nebavíme o gridu nebo layoutu. Ten má u CSS frameworků velmi specifické použití (viz články) a rozhodně bych s touhle vrstvou byl opatrný.
Asi nemá smysl se navzájem snažit přesvědčit jestli frameworky ano nebo ne. Chtěl jsem původně opravdu jen poukázat na to, že je třeba si vždy framework důkladně a kriticky prostudovat a ne brát ho jak to leží a spoléhat se, že komunita to jistě krásně odladila.
Chtěl jsem původně opravdu jen poukázat na to, že je třeba si vždy framework důkladně a kriticky prostudovat a ne brát ho jak to leží a spoléhat se, že komunita to jistě krásně odladila.
Souhlasím. Tady obecně leží největší riziko pro méně zkušené CSS kodéry, chtějí-li framework používat v produkčním nasazení.
#1 Good programmers just code. #2 Idiots need frameworks to evaluate the existing code of good programmers. #3 In this country, dumb enough people are the majority of IT so they prefer idiots.
..to si vybrali pěkně blbý název..