Jak na responzivní web: CSS Grid Layout, stylování Widgetů

Tue, 13 Jan 2015 22:25:55 +1100

Je čas zase na nějaký článek na téma, kterému byl tento blog původně věnován. V dnešním tutoriálu ukážu krátký návod, jak vytvořit takzvané Widgety závislé na aktuální šířce okna; naučíme něco o responzivním webu.

Samotnému layoutu o dynamické šířce se věnovat nebudu; dnes budu předpokládat, že toto už umíte. Widgety v různé podobě jsou nyní vcelku populární záležitost, jenže jak se to má člověk naučit, když článků je pomálu.

Úvodní stránky s boxíky různých velikostí, které se přizpůsobují šířce prohlížeče či dokonce i zařízení jsou stále populárnější. Za tím účelem vznikla i spousta frameworků, které problematiku vyřeší za nás. Hotová řešení přináší kromě výhod i řadu nevýhod.

Nemáme přehled, co se děje na pozadí.

Opravy možných chyb se mohou natáhnout do hodin práce.

Bývá těžké modifikovat výstup, pokud chcem zobrazení odlišné od autorova záměru.

Sám jsem strávil mnoho času zběžným studiem a testováním různých existujících frameworků, které jsem našel, ale právě 3 zmíněné body mě stejně přiměly napsat si to sám. K čemu složité sofistikované řešení, když můžeme použít vlastní, jednoduché, kde máme 100% kontrolu nad každám řádkem kódu. Jedno takové řešení dnes představím.

Ukázka

Takto nějak mohou být rozvržené widgety na úvodní stránce prezentace.

Mezera mezi boxy bude v pixelech a musí být snadno nastavitelná.

Každý box se při změně šířky okna přizpůsobí tak, aby byly zachovány poměry.

Výše uvedené bohužel žádný mnou testovaný framework neuměl, a tak mi nezbylo nic jiného, než se pustit do kódování.

Nyní se podívejte na následující odkaz: boxes_ukazka1.html

Na ukázce vidíme už připravenou mřížku, která se chová přesně tak, jak potřebujeme.

Jak toho docílit?

Využijeme jedné z chytrých vlastností obrázku, a to, že při změně jednoho rozměru se dopočítá druhý (pokud není definován). Takže ano, koukáme na čtvercové a obdélníkové obrázky, ale ne, nejsou to jenom obrázky. Každý z boxů má šířku 20% rodiče, tedy dynamickou. V něm je vložený jeden průhledný png obrázek, který se stará o resize. Div pro vlastní obsah se absolutně napozicovaný s šířkou i výškou 100%, takže vyplní celý prostor.

Abychom ale mohli naspat height:100%; width:100%; padding:10px;, musíme využít CSS vlasnosti box-sizing: border-box;. Ta říká, že rámeček i padding nebudou přičteny k šířce, ale budou počítány tzv. dovnitř.

HTML










CSS

.box {float:left;position:relative;overflow:hidden;}
.box.size1x1 {width:20%;}
.box.size2x1,
.box.size2x2 {width:40%;}
.box .resizer {width:100%;height:auto;margin:0;display:block;}
.box .inbox {width:100%;height:100%;box-sizing:border-box;padding:10px;position:absolute;top:0;left:0;overflow:hidden;}
.box .inbox .data {position:relative;width:100%;height:100%;background:green;}

První div určuje vnější obal boxu. Průhledný obrázek zajistí správné chování na resize. První vnořený div je container pro odsazení mezi boxy: padding 10 pixelů ze všech stran nám vytvoří 20px mřížku. A nakonec poslední vnořený div je samotný obsah - to, co vidíte zeleně vybarvené.

Responzivita

Responzivita nedefinuje pouze dynamickou šiřku sloupců, ale také změnu zobrazení na předem určených zlomových bodech. Takže při menším rozlišení zobrazíme pouze 4 boxy vedle sebe (namísto pěti) a pro rozlišení nejnižší třeba jenom 2.

Prohlédněte si druhou ukázku a zkuste zužovat okno prohlížeče: boxes_ukazka2.html

K tomu využijeme CSS media query, které upraví vlastnosti pro všechna rozlišení nižší než definovaná hodnota.

@media all and (max-width: 840px){
	.box.size1x1 {width:25%;}
	.box.size2x1,
	.box.size2x2 {width:50%;}
}

@media all and (max-width: 640px){
	.box.size1x1 {width:50%;}
	.box.size2x1,
	.box.size2x2 {width:50%;}
	.box .inbox {padding:5px;}
}

Při rozlišení 840 pixelů nebo menším bude malý box čtvrtina a velký box polovina obsahu. Při rozlišení 640 pixelů nebo měnším už budou vždy maximálně 2 vedle sebe, větší box bude roztažený na celou šířku. Zde také můžeme zmenšit rozestupy na 10 pixelů.

Vlastní obsah boxů

Na závěr se podívejte na třetí ukázku: boxes_ukazka3.html

Zelenou jsem vyměnil za trochu příjemnější barvu, přidal základní styly na formátování textu a hurá, už to začíná vypadat jako web.

Zobrazení na mobilních zařízeních: meta name=viewport

Abychom docílili správného zobrazení na mobilních telefonech a tabletech, je potřeba přidat do hlavičky ještě následující meta tag:



Co přesně dělá, jaké jsou způsoby jeho využití zde ale uvádět nebudu, protože to by bylo na další celý článek. Ve zkratce: díky němu to bude fungovat tak, jak má :-) Pokud si chcete o využítí meta tagu viewport přečíst něco více v češtině, mohu doporučit například tento článek na ječas.cz.