Preprocesory a generování responzivních stylů

Vydal Jan Bien | 05/2015 | Trvalý odkaz | 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 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:

#sidebar
	+mq($desktop,$all)
		float: right
		width: 350px
	+mq($mobil)
		display: none

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


$all = (-1 -1)
$mobil = (false 767)
$mobil-small = (false 520)
$mobil-big = (521 767)
$tablet = (768 990)
$desktop = (991 1234)
$desktop2 = (1235 false)

mq(viewport, viewport_max = false)
	min = viewport[0]
	if viewport_max
		max = viewport_max[1]
	else
		max = viewport[1]

	if min > 0
		if max > 0
			@media (min-width: min px) and (max-width: max px)
				{block}
		else
			@media (min-width: min px)
				{block}
	else
		if max > 0
			@media (max-width: max px)
				{block}
		else
			{block}

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.

O autorovi

Jan Bien
Jan Bien
Jako kluk jsem si hrál se stavebnicí Merkur, kterou jsem v dospělosti (lze-li o něčem takovém u muže vůbec mluvit) vyměnil za WordPress. S WordPressem kouzlím zajímavé weby, radím lidem, zda je WordPress dobrý nápad pro konkrétní projekt, a občas koučuji jiné freelancery, co a jak s WordPressem podniknout ke spokojenosti své i svých klientů.

2 komentáře: “Preprocesory a generování responzivních stylů”

  1. Zbyšek napsal:

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

  2. Jan Bien Jan Bien napsal:

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

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *