Blueprint CSS: pár kroků k ulehčení kodérské práce

4. říjen 2008, 17:33 Kategorie: Webdesign

Navazuji na minulý článek a Josefa Strzibneho a jeho úvod do Blueprintu z pohledu programátora a HTML kodéra.

Blueprint je CSS framework, který za vás vyřeší šest základních kodérských úkolů při startu vývoje každého projektu:

• vynuluje tovární nastavení prohlížečů
• nastaví typografická pravidla
• specifikuje obecné třídy pro často používané chování prvků
• vypořádá se alespoň částečně s MSIE
• nastaví vzhled některým prvkům
• poskytne velmi silný nástroj pro vybudování layoutu

Cokoliv z toho můžete odmítnout. Ale popravdě — kdo by to všechno chtěl psát všechno od píky?

Blueprint CSS prošel poslední dobou několika změnami. Jeho tým kromě původního tvůrce (Olav Bjorkoy) doplnilo několik dalších lidí a společný vývoj můžete sledovat na Githubu, kde je také docela dobrá základna vědomostí v podobě wiki.

Pojďme si v několika krocích vysvětlit jak do Blueprintu nejlépe proniknout z pohledu CSS kodéra.

Stáhněte si a nastudujte zdrojové soubory

Stáhněte si poslední revizi z Githubu.

Stáhněte si, nastudujte a nejlépe vytiskněte PDF cheatsheet.

Prostudujte podrobně všechny CSS soubory tvořící framework. V adresáři blueprint/css/ najdete následující zdrojové soubory:

• reset.css – sjednoducuje výchozí nastavení prohlížečů – maže margin, padding, border, nastavuje shodnou velikost písma, ostraňuje rámeček kolem obrázků – tabulkám je třeba v HTML nebo vlastním CSS nastavit cellspacing=”0”
• typography.css – nastavuje základní velikost písma odpovídající 12px a výšku řádku 18px, z toho odvozuje velikosti dalších prvků, typicky nadpisů. Ve svém stylesheetu nezapomeňte správně nastavit font-family pro české prostředí. Věnujte pozornost sekci Misc classes, kde je celá řada definic pro obvyklé stavy prvků na webu —například schovávaní prvků pomocí .hide, zvýrazňování pomocí .highlight atd.
• grid.css – Soubor s třídami pro definici layoutu založeném na mřížce. Je možné, že jej váš layout nebude vůbec potřebovat. Přednastavený layout je 950px široký s 24 sloupci o 30px šířce a 10px marginem mezi sloupci.
• forms.css – Předdefinovává typické užití formulářových prvků – například input.text pro běžný textový vstup. input.title pro “titulkový vstup”, kterému nastaví větší velikost písma. Součástí jsou také třídy pro komunikaci uživatelského rozhraní směrem k uživateli: .error a .notice.
• ie.css – Napravuje celou řadu svérázných postojů k CSS standardům v MSIE 6 a 7 jako je špatná interpretace marginů a stylování prvků jako legend, ol, sup, sub, code, hr. Například podpora png průhlednosti v ie6 zde byla také, ale nepříliš vyvedená a proto zatím chybí.

Je třeba vědět, že všechny zdrojové soubory jsou pak v komprimované podobě umístěny v css/screen.css a css/ie.css spolu s tiskovým stylem css/print.css. Pouze tyto tři soubory připojte do hlavičky svého HTML souboru.

Vygenerujte mřížkový layout, chcete-li

Hodláte-li využít v layotu mřížky, komunita kolem Blueprint vám připravila velké množství nástrojů, bez nichž by tvorba layoutu byla matematickým oříškem. Construct Christiana Montoyi je plnohodnotný wysiwyg editor layoutu. Sám jsem si ale zatím vždycky vystačil s generátorem na Kematzy.com.

Naše přátele nebo kodéry přesahující do designu a programování směřuji na stránku s nástroji ulehčující práci s Blueprintem i jim.

Nasaďte Blueprint do vašeho HTML

Blueprint pochopitelně vždy využívejte jako základní stavební kámen pro vzhled webu, nad který pak navrstvíte cihly vlastních CSS souborů. Nikdy neupravujte CSS samotného Blueprintu.

Hlavička vašeho HTML by tedy mohla vypadat takto:

<link rel="stylesheet" href="/css/blueprint/screen.css"   type="text/css" media="screen, projection">
<link rel="stylesheet" href="/css/blueprint/print.css" type="text/css" media="print">
<!--[if IE]><link rel="stylesheet" href="/css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
<link rel="stylesheet" href="/css/styly-vaseho-webu.css" type="text/css" media="all">
<!--[if IE]><link rel="stylesheet" href="/css/styly-vaseho-webu-ie.css" type="text/css" media="screen, projection"><![endif]-->

Vsadím se, že časem a zkušeností s některými definicemi Blueprintu nebudete souhlasit. Ano, tvůrci se občas místo do ulehčování práce kodérům pouštějí až příliš do specifikace vzhledu nějakých prvků. Můj anti-blueprint CSS kód má ale jen pár řádků. Více o něm snad příště. Nedočkavci, podívejte se do zdroje webu Kina Aero, kde framework využíváme.

Ulož do delicious, linkuj.cz, jagg.cz, vybrali.sme.sk Díky!