Většinou se o Vánocích vrhnu na hraní nějaké počítačové hry, je to takový relax, který si jednou za rok dopřeju. Letos jsem ale místo hraní tak trochu programoval. Rozhodl jsem se vytvořit vlastní CSS framework.
Co je sakra CSS framework? Je to nástroj, který usnadňuje tvorbu webových stránek. Něco jako velká krabice s Lego kostkami, kde každá kostka má svůj účel pro stavbu webové stránky. Jsou to předpřipravené prvky jako tlačítka, formuláře, tabulky, odstavce. Zkrátka vše, co můžete nalézt na webovce. Všechno má jednotný styl, takže není potřeba každý prvek stránky znovu a znovu definovat. Zkrátka se použijí předpřipravené součástky a ušetří se tak spousta práce.
Na trhu je celá řada takových frameworků, takže k čemu vlastně dělat další? Původně jsem vlastně vytvářel něco úplně jiného – chtěl jsem zkusit vytvořit nástroj, v němž bych sázel knihu jako webovou stránku. Docela se mi to povedlo (více viz článek Sazba knihy v Html + CSS), ale v průběhu práce se mi zalíbila myšlenka, že bych měl celý web zarovnaný na mřížku.
To taky není úplně novinka, ale moje vize byla přichytit opravdu všechny prvky na horizontální linky, které se budou pravidelně opakovat. Představte si to jako lenoch, který položíte pod papír a všechno zarovnáváte podle něj. Kupodivu jsem nenašel moc bláznů, kteří by se něčím podobným zabývali a tak jsem se do toho dal.
Postupně jsem se prokousal spoustou záludností a nastyloval a předpřipravil všechny možné i nemožné webové prvky s pixelovou přesností. Aby se nerozhodil grid, musí opravdu všechny prvky na 100% lícovat a mít na pixel přesnou výšku. Toho není úplně snadné docílit, protože různé prohlížeče sem tam vykreslí věci různě…
Nicméně nakonec jsem se prokousal do finále a z výsledku jsem byl nadšený. Je to vlastně až primitivně jednoduché: celý koncept používá jednu veličinu nazvanou baseline – ta určuje nejen řádkování, ale i výšku tlačítek, boxů či formulářových polí a udržuje konzistentní odsazení prvků, takže např. okraje rámečků, kontejnerů apod. jsou vždy stejně velké. Celé to působí velice symetricky.
Protože někdy nevím, kdy zastavit, přidal jsem ještě pár jednoduchých třid pro základní responzivitu (to aby se web dal použít jako na mobilu, tak na stolním zařízení) a zjistil jsem, že v tom dokážu velice rychle kódovat a s udržením dostatečně přehledného kódu opravdu rychle nastylovat prakticky jakoukoli webovou šablonu.
Zkusmo jsem si vytvořil několik layoutů a pak jsem se rozhodl, že výsledný produkt nenechám ladem, ale použiju ho na našem nově vznikajícím webu imago.cz. Ten byl naneštěstí zrovna čerstvě dokódovaný v jiném frameworku (konkrétně v Bulmě). Za necelý týden práce jsem kompletně nakódoval celý eshop a dokonce jsem přepsal i javascriptový kód tak, aby byl co nejjednodušší a nevyužíval externí knihovny. Vytvořil jsem si nějaké vlastní elementy – třeba jednoduchý carousel.
Proč jsem použil Skaven CSS?
- Je to na míru. Napsal jsem si to tak, jak se mi samotnému dobře a intuitivně kóduje.
- Je to docela malé – samotný kód s elementy má jen 23 kB přídavné komponenty pak dalších 8,2 kB
- Je to jednoduché – žádný preprocesor, jen čísté CSS s proměnnýma
- Pro nedesignéra je to užitečné, protože nemusí řešit velikosti prvků a odsazení.
- Líbí se mi, jak to vypadá a líbí se mi vertikální rytmus
Výsledek si můžete prohlédnout na http://skaven.cz/css Má to ještě nějaké mouchy, dokumentaci jsem si psal pro sebe a hlavně, nejsem programátor ani kodér, jsem jen bídný samouk.
Na každý pád to byla skvělá práce. Opravdu zábavný návrat do mých webařských začátků. S pomocí ai jsem velice rychle proniknul do problematiky, ke které jsem už nějaký ten pátek nepřičichnul a zároveň jsem si dokázal, že ten můj punkový přístup ještě pořád funguje... Stačí si najít nějakou zkratku, trochu jinou cestu a ejhle, člověk se octne v cíli.