Preprocesory a generování responzivních stylů

13. 5. 2015 | Komentáře (2)

Tvorbu responzivních webů se nedovedu představit bez preprocesorů. Začal jsem jako většina frontendistů —  nejstandardnějším {less}em. Pak jsem předeslal na funkčně nejbohatší SASS v kombinaci s Compassem. Dnes jedu na Stylusu s nibem, který mi nechává nejvolnější ruku v zápis kódu. Stylus zapisuji nejminimalističtěji, jak jen to jde — nepíšu složené závorky…

Tvorbu responzivních webů se nedovedu představit bez preprocesorů. Začal jsem jako většina frontendistů —  nejstandardnějším {less}em. Pak jsem předeslal na funkčně nejbohatší SASS v kombinaci s Compassem. Dnes jedu na Stylusunibem, který mi nechává nejvolnější ruku v zápis kódu.

Stylus zapisuji nejminimalističtěji, jak jen to jde — nepíšu složené závorky a středníky, zanořuji odsazováním. U každého projektu mám jeden jediný stylopis pro všechna rozlišení. Méně css souborů = méně http požadavků = rychlejší načtení.

Media Queries nikdy nepíšu přímo, ale vždy je volám přes mixin. Všechna pravidla, která se týkají jednoho prvku, píšu vždy k sobě.

Příklad. Tímto zápisem říkám: Milý #sidebar, od desktopu výše plav doprava a nastav se na šířku 350 pixlů, na mobilu se ale vůbec neukazuj:

Takto pak vypadá definice viewportů + samotný mixin:

Pojmenovat jednotlivé viewporty (rozsahy šířek s definovanými breakpointy) přímo typem zařízení (mobil, tablet, …) bude u puristů asi vyvolávat nevoli. Mně to ale přijde praktické. Dobře se to pamatuje a snadno se pak domluvím s kolegou grafikem. Když interně řekneme na mobilu, míníme tím prostě viewport 0 až 767.

Doplňkové viewporty (ty s pomlčkou v názvu  — $mobil-small a $mobil-big) rozdělují základní viewport $mobil na dvě části. Slouží pak jen pro jemnější dolaďování. Celý rozsah je pokryt základními viewporty (ty bez pomlčky v názvu).

K tomuto řešení mě kdysi inspiroval Martin Michálek (bylo to na Twitteru a odkaz jsem již bohužel ztratil).

Tož tak.

Komentáře

Zbyšek: Tož tak se koukám začíná stávat novým standardem :)

Jan Bien: Tož tak bude u W3C standardizováno coby sémantický správné ukončení článku. :)

Přidávání nových komentářů pro tento článek je uzavřeno.

← Zpátky na články