Blueprint CSS framework

V dnešnej dobe, keď je stále viac a viac presadzovaná znovupoužiteľnosť kódu sú populárne rôzne frameworky, hlavne pre PHP (Zend,Cake), AJAX (Prototype,script.aculo.us). Existuje však aj celkom zaujímavý framework pre CSS, ktorý ma príijemne prekvapil svojimi možnosťami.

Predstavenie frameworku

Blueeprint je CSS grid framework podporovaný Google a jeho cieľ je jasný, uľahčiť život všetkým XHTML+CSS kóderom poskytnutím ľahko použiteľného gridu a rozumnej typografie. Aktuálna verzia má označenie 0.3.

Blueeprint je CSS grid framework, čo znamená, že celá oblasť vytváraného layout je rozdelená na tzv. grid, teda mriežku. Štandardné rozdelenie je 14 stĺpcov s celkovou šírkou 960px. Stĺpce musia mať stále rovnakú šírku 50px a rozostupy 20px, čo je trochu obmedzujúce.

Počet stĺpcov je však možné meniť, čím sa samozrejme zmení aj výsledná šírka podľa vzorca:

Total width = (columns * 70) - 20

Príklad použitia

Použitie frameworku blueprint na tvorbou rôznych layoutov je naozaj jednoduché, uvediem príklad tvorby klasického dvojstĺpcového layoutu.

Prvým krokom je samozrejme vloženie súborov so štýlmi

<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">

Celý obsah musí byť obalený v kontajneri

<div class="container">
<p>Obsah</p>
</div>

Hlavička bude zaberať celú šírku kontajnera, teda 14 stĺpcov

<div class="container">
<div class="column span-14">
Hlavička
</div>
</div>

Pridáme ľavý stĺpec široký 3 stĺpce, a stred stránky široký 11 stĺpcov

<div class="container">
<div class="column span-14">
Hlavička
</div>
<div class="column span-3 first">
Ľavá časť
</div>
<div class="column span-11 last">
Hlavný obsah
</div>
</div>

Nakoniec pridáme pätičku a layout je hotový

<div class="container">
<div class="column span-14">
Hlavička
</div>
<div class="column span-3 first">
Ľavá časť
</div>
<div class="column span-11 last">
Hlavný obsah
</div>
</div>
<div class="column span-14">
Pätička
</div>
</div>

Práve sme vytvorili dvojstĺpcový layout bez akéhokoľvek zásahu do CSS, použitie frameworku Blueprint je naozaj jednoduché.