První pohled na Baseline CSS

Potěší všechny, kdo od CSS frameworku očekávají hlavně dobrou typografickou vrstvu a nehledají nástroj pro prototypování nebo layoutování webů. Mezi takové patřím, pojďme jej rozbalit.

Jiný rytmus

Baseline se od ostatních (mně známých) liší hlavně principem vertikálního gridu. Blueprint a další jsou založeny na „přilepování prvků” k opakující se výšce řádku (line-height). Baseline jako jednotku vertikálního rytmu volí baseline, nebo-li česky účaří.

Typografové by k tomu asi mohli říct více po řemeslné stránce. Osobně můžu mluvit spíše o příjemnějším pocitu zejména v hezké provázanosti nadpisu první až třetí úrovně s následným textem.

A když necháme emoce stranou, můžeme říci, že v případě zarovnání na účaří bude pro kodéry jednodušší nalezení nechtěných odchylek.

Nalevo opět Blueprint, napravo Baseline:

Když se podíváme na celou vyrenderovanou stránku, vidíme že Baseline ztrácí svou eleganci u nadpisu 5. a 6. úrovně (ale kdo z vás je naposledy skutečně použil?), pak v případě použití divu uprostřed textového bloku (to taky není příliš častá situace).

Baseline se ve srovnání tváří ošklivě na formulářové prvky. On je hezké umí, ale musíte mu dodat zvláštní HTML kód. Ano, srovnání v případě formulářů ztrácí trochu smysl, ale pokud třeba prototypujete a nechcete upravovat HTML, hodí se to vědět.

HTML5 ano, IE6 ne

S Baseline sice dostanete i nějaký horizontální grid pro tvorbu layoutu, nicméně nemám pocit, že by na něj byl kladen důraz. Každopádně v balíku dostanete PSD s mřížkou a podporu nových prvků HTML5. Autor (Stéphane Curzi) se naopak rozhodl, že nebude trávit noci s laděním frameworku pro MSIE 6.

Baseline CSS je pro mě svou lehkostí jako základ pro stavbu uživatelského rozhraní webu velkou konkurencí Blueprintu. Budu si ale dávat pozor na možné rozdíly v prohlížečích, na které autor upozorňuje. Naopak bych ho nedoporučil pro prototypování. Tam raději sáhnu po Blueprintu, Bluetripu nebo Tripoli.

Na ose designér — kodér — programátor najde Baseline využití někde mezi designérem a kodérem.

Tutoriál: Jednoduchý našeptávač pomocí jQuery Autocomplete

Vytvořit našeptávač s pomocí jednoho z nejpopulárnějších jQuery pluginů může být snadné jako napsat $('#input').autocomplete(data), ale má svá úskalí. Podívejme se na ně ve zjednodušeném tutoriálu pro neprogramátory od neprogramátora.

1. Seberte data, ve kterých bude našeptávač vyhledávat

Jejich zdrojem může být lokální javascriptové pole, nebo externí data v poli a nebo nakonec skript, který se dotazuje do databáze.

Pozor na rychlost a zátěž databáze! Poslední skript za normálních okolností posílá dotazy do databáze po každém stisku klávesy. Bude pochopitelně pomalejší než vyhledávání v javascriptovém poli, ale to se zase nehodí na procházení stovek až tisíců záznamů.

2. Nainstalujte jQuery Autocomplete

Stáhněte jQuery Autocomplete. Do HTML hlavičky před něj musíte přilinkovat jQuery. Neváhejte pro zrychlení načítání použít hosting u Google.

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 <script type="text/javascript" src="/js/jquery.autocomplete.min.js"></script>
 <script type="text/javascript" src="/js/index.js"></script>

V souboru index.js mám centrální “skriptopis”, do kterého v následujícím kroku přidáme řádek, který našeptávač “spustí”.

3. Přidejte spuštěč

V našem případě do /js/index.js nebo přímo do hlavičky dokumentu přidejte

$('#input').autocomplete('/query.php');

#input je id formulářového prvku, na který našeptávač chcete pověsit. /query.php je zdroj dat - v našem případě skript, který se dotazuje do databáze.

Autocomplete v defaultním nastavení posílá dotazovacímu souboru vyhledáváný řetězec v parametru “q”, tedy například /query.php?q=Ahoj.

4. Přidejte a upravte CSS, dolaďte parametry

Pokud se vše zdařilo, našeptávač vyhledává a teď už stačí jen doladit vzhled. Ze staženého balíku do centrálního stylopisu nalinkujte CSS. Nezapomeňte na obrázek s indikátorem načítání.

@import url("jquery.autocomplete.css");

jQuery Autocomplete má samozřejmě spoustu dalších parametrů, kterými lze například určit od kolika zadaných znaků se má ve zdroji dat vyhledávat jako pomocí parametru minChars.

Hodně zdaru.