Autorem článku je Josef Strzibny. Příležitostný webdesignér, kóder a programátor. Nyní si vytváří stránky o místech jako Egypt, Istanbul a Londýn, píše Něco málo a Little things.
Zařazení článku
Naše projekty
Myšlenka CSS frameworku
Důvod pro vytvoření CSS frameworku byl jednoduchý, v každém projektu využíváme řadu věcí stejným způsobem a ty by se mohli odehrávat automaticky. Ostatně asi každý kóder, který kóduje častěji, používá nějaká resetující pravidla.
Těmi resetujícími pravidly tedy můžeme začít. Ty najdeme snad v každém frameworku, popřípadě by mohli být sami nazývány jako framework (i když...). Dále už záleží na konkrétních frameworcích a na tom, co nám nabídnou. Protože dnes píšu o Blueprintu, přejdu rovnou k němu a vyzdvihnu jeho výhody.
Blueprint
Blueprint nabízí základní resetování, jednoduché kódování podle mřížky, možnost fluidního layoutu (ukázka), lepší typografii či jednoduché začlenění vybraných ikonek do designu. Vše co totiž Blueprint obsahuje se dá považovat za plugin a je tedy možné jeho části využít i samostatně. Pokud chcete jen využívat mřížku, využijete jen příslušného souboru.
Z této informace tedy vyvodíme i fakt, že Blueprint toho v budoucnu může umět čím dál více. A navíc vše co z Blueprintu pochází funguje korektně v hlavních prohlížečích, což nám šetří další práci.
Kódování podle mřížky
To proč ale Blueprint nasadíte, je zcela jistě kvůli mřížce, se kterou bude kódování o mnoho snazší. Myšlenka mřížky je velice jednoduchá – ve stránce si představte základní box o určité šířce a tento box si rozdělte na svislé sloupce konzistentním způsobem (ukázka).
Na co se tento způsob kódování hodí nejvíce je pak zcela příznačné – na kódovaní grafických designů, které byly podle mřížky („by grid“) navrženy. Pokud vás zajímá více, přečtěte si třeba články u Filosofa.
Praxe: jak vypadá kód
Základní konstrukce mřížky předpokládá kontejner:
<html>
(...)
<div class="container">
</div>
</html>
Ten již oplývá základní šířkou a je v závislosti na nastavení tvořen sloupci o zvolené velikosti:
<html>
(...)
<div class="container">
<div class="span-10">
</div>
</div>
</html>
Nyní již máme vytvořený jeden sloupec o velikosti 10; to znamená, že pokud naším výchozím nastavením byla šířka 800px a 10 sloupců bez mezer, připadne danému sloupci 80px.
Na dalším příkladu ukáží, jakým způsobem vytvořím nový řádek mřížky a rozdělím celou šířku mřížky na dva díly – dva sloupce.
<html>
(...)
<div class="container">
<div class="span-10 last">
</div>
<div class="span-5">
</div>
<div class="span-5">
</div>
</div>
</html>
Do našeho původního sloupce jsme přidali třídu last, která znamená, že se jedná o poslední sloupec v řádku a že následující sloupce již budou tvořit řádek nový.
V těchto případech předpokládáme, že sloupce nejsou odděleni standardně žádnou mezerou, budou se nám tedy hodit třídy append a prepend, které nám kýženou mezeru poskytnou:
<html>
(...)
<div class="container">
<div class="span-10 last">
</div>
<div class="span-4 append-1">
</div>
<div class="span-5">
</div>
</div>
</html>
Nutno ale podotknout, že výchozí nastavení již automaticky nastavení mezer předpokládá a při vlastním generováním si jej můžete zvolit jaké chcete (viz dále).
A ještě zde poznamenám dvě věci, první z nich je fakt, že takových kontejnerů můžete mít na stránce kolik chcete, nemusíte se tedy (např. kvůli přehlednosti) omezovat na jeden. Druhá je pak další výborná vlastnost Blueprintu a to, že obsahuje třídu showgrid, která vám vaši mřížku zobrazí a při vývoji tak budete vždy v přehledu:
<html>
(...)
<div class="container showgrid">
<div class="span-5">
</div>
<div class="span-5">
</div>
</div>
</html>
Blueprint Ruby script
Mřížku vám nabídne i konkurence, co už vám ale nenabídne je jednoduché generování CSS stylů pro konkrétní potřebu konkrétního projektu. Máte tedy stránku o šířce 796px a chcete rozdělit po sloupcích o velikosti dva pixely? Žádný problém – jen si CSS soubory Blueprintu znovu vygenerujete.
A co více! Hned si můžete přidat i své vlastní CSS soubory a mít všechno pěkně po kupě zkomprimované, což rozhodně není od věci. Pokud vás tato možnost zaujala přečtete si článek Blueprint’s compress.rb: A Walkthrough, kde jsou všechny možnosti generování dobře popsány. Je to opravdu jednoduché. Jenom dodám, že daný script se nachází ve standardním balení Blueprintu a není třeba jej stahovat zvlášť.
A pro ty kteří nemají tuto možnost nebo preferují generování na webu, je zde Blueprint Grid CSS Generator.
Nevýhody
Obecně se dá říci, že CSS frameworky, jako asi všechny frameworky, vás trochu limitují. Blueprint tedy taktéž, ale velice minimálně. Dalo by se říci, že u velké části layoutů vás Blueprint prakticky neomezuje. Chcete jen základní resetování? Zůstaňte u něj. Chcete kódovat podle mřížky o takových a takových rozměrech? Můžete, ale nemusíte. Můžete využít třeba jen základní mřížku a v ní si to již dělat po svém. Ta svoboda je u Blueprintu jasná a v z tohoto pohledu není nasazení Blueprintu žádný problém.
Někteří detailisti by mohli vidět problém v tom, že CSS framework znamená zbytečně moc kódu navíc. Do jisté míry opět ano, ale zase si volíte, co chcete a co nechcete, nehledě na to, že při nasazování frameworku se s tím počítá. Filosofií je urychlit a ulehčit práci, ne zrychlovat či zmenšovat kód.
Já osobně vidím problém akorát v tom, že zahltíte HTML kód spoustou tříd. Ale nemyslím si zase, že by to přebilo sílu pozitiv.
Dá se tedy mluvit o negativech, ale v CSS frameworcích tu budoucnost i vidím. Ani Blueprint není dokonalý, ale budoucnost tahle myšlenka podle mě má.
Alternativy
Blueprint není pochopitelně jediným CSS frameworkem. Mě oslovil především proto, že je pro něj napsaný užitečný Ruby script, díky kterému mě původní nastavení neomezuje. Zatím jsem s ním nakódoval dva layouty (mé, na webu nejsou, takže neodkáži) a musím říci, že je to z části velká úleva a nenarazil jsem na nic, co by mi tuto radost mohlo pokazit.
Jeden seznam CSS frameworků je například na anglické Wikipedii, ale s dalšími CSS frameworky já zkušenosti nemám. Pokud máte nějaké vy, budu rád, když je napíšete do komentářů.
Související:
Článek publikován 2008-10-03 21:02:02.
Komentáře
K nevýhodám patří i to, že už déle slibuje fluidní verzi, ta je ale stále v betě a v některých prohlížečích prostě nefunguje (a zprovoznit ho je velká práce pro nejzkušenější z kodérů znalé vnitřností prohlížečů).
Takže v praxi pro fluidní layout nepoužitelné, alepoň po přesunu na github se tam objevila nějaká nová aktivita, ale předtím byl autorem delší dobu ‚opuštěn‘.
Mohlo by být fajn odkazovat společné CSS z nějakého centrálního úložiště (třeba na blueprintcss.org). Tím by se snížila nutnost stahovat CSS Blueprintu pro každý projekt znovu, protože už by byl v cache prohlížeče z předchozích. Stahoval by se pak akorát grid a vlastní styly.
Jo to vůbec není špatný nápad. Ono by se třeba hodilo mít i mřížku, kde jeden sloupec se rovná jednomu px, ale to už Blueprint opravdu „nakyne“. Nabízí se ještě jeden způsob – napsat si script, který odstraní přebytečné nepoužívané třídy v Blueprintu.
--> 1 pokud máš vlastní doménu, tak to nemůže být problém, můžeš to tahat z vlastních stránek
Diky za clanek. Blueprint pouzivam a musim rict, ze se mi fakt libi. I ja nekoder jsem byl schopen dat raz dva dokupy slusny layout.
[4] A tom to vlastně celé je :-).
ochvilu spustam web, kde budem vyuzivat YAML – www.yaml.de
Zdravím Já si jen tak „podomácku kóduju“, takže nejsem moc velký znalec CSS, takže se zeptam zde: Na tohle jsem narazil, když jsem hledal jiné řešení problémového zobrazování IE a připadá mi to, že potenciál je docela velký, takže to hned testuji. Nepodařilo se mi ale změnit mezeru mezi boxy v kontejneru (když mám tři boxy, je mezi nimi vždy 10px mezera). Když je podbarvím každý jinou barvou, tak mi „nesedí“ k sobě. Ve svém sytlu, který jsem si k html stránce vytvořil, jsem měnil border, i margin, ale bez úspěchu. Jistěže by se to mohlo řešit podbarvením kontejneru a jen prostředního boxu, takže vše bude sedět OK, ale spíš zjišťuji, jestli nedělám někde něco blbě. Netušíte, co dělám blbě?
Zkus zde nechat odkaz na tvé konkrétní řešení, bylo by to mnohem srozumitelnější…
Napsat komentář
Upozornění: komentáře jsou schvalovány!