Výběr nejvhodnějšího responzivního CSS frameworku

od WEBROS


05. 06. 2016

Výběr nejvhodnějšího responzivního CSS frameworku

CSS frameworků je k dispozici nepřeberné množství. Jak ale vybrat ten pravý?

V současné době je téměř povinnost vytvářet webové prezentace responzivní, čili přizpůsobivé pro všechny zařízení od mobilu až po velký desktop monitor. Většina z vás zná pojem „Framework“, takže nemá smysl zde popisovat jeho význam a přínos pro práci kodéra. A většina z vás už také o nějakém konkrétním slyšela. Ale který je pro mě nejvhodnější? Který se nejsnáze a nejrychleji naučím? A bude se dále vyvíjet, nebudu se muset učit nový? Určitě vás napadá spousta dalších otázek a právě vám by měl tento článek usnadnit výběr.

Někteří z nás to mají jednoduché: dostanou doporučení od známého na konkrétní framework, včetně krátkého školení. Nebo třeba nastoupí do zaměstnání, kde už je některý zaveden a pak není co řešit. Ale co když zatím nemáme ani ponětí o tom, pro který bychom měli sáhnout? Pokud jste už vyhledávali články na toto téma, jistě na vás vyskočila spousta odkazů ve stylu „Top 10 best free responsive CSS Frameworks“ apod. Určitě se vám zdá zvláštní, že každý autor dává na první místo jiný framework. U každého následuje stručný popis, co umí navíc oproti konkurenci atd atd. Takovýchto článků nám vyhledávače nabídnou opravdu spousty, stejně jako frameworků.

Pokud jste tedy zatím žádný nevyzkoušeli, jaká jsou hlavní kritéria výběru? Chceme určitě pracovat v nějakém široce používaném a aktivně vyvíjeném. V takovém případě máme zaručeno, že na netu najdeme spoustu šablon, komponent, tutoriálů a návodů.  V neposlední řadě najdeme i školení od různých firem v českém jazyce. Také chceme, aby kódování bylo pro nás intuitivní. Všechny tyto požadavky splňují v podstatě pouze dva frameworky: Twitter Bootstrap a Zubr Foundation.

Stupně vítězů – Bootstrap a Foundation
Jaký je rozdíl mezi Bootstrap a Foudation? Pokud jste si prohlédli oficiální weby obou frameworků, většinou najdete velkou podobnost: podobné komponenty, přidané jQuery skripty, 12 sloupcovou mřížku, piktogramy, šablony, rozsáhlou dokumentaci, atd Můžete použít jak kompletně vygenerovaný CSS, tak preprocesory. Oba využívají metodu tvorby webu „Mobile first“.

Menší rozdíly ale přesto najdeme:
- K Bootstrapu najdeme na netu díky velké komunitě vývojářů o dost více šablon a komponent třetích stran
- Jelikož má Foundation podporu velké společnosti Zubr, nabízí mj. i poradenství a individuální podporu pro podnikové uživatele. Také vydává častěji aktualizace.
- Zatímco Bootstrap využijí jak zkušení kodéři, tak i začátečníci, Foundation je zaměřen především pro velké webové projekty, využívá ho např. E-bay, Yahoo, Mozilla adalší.
- Rozšířenost Bootstrapu má i jednu nevýhodu a to že najdeme spoustu podobně, ne-li stejně vypadajících webů. Pokud jsme ovšem dostatečně kreativní, můžeme vytvořit podobný design jako na těchto ukázkách: http://expo.getbootstrap.com/

Můj favorit
Velké rozdíly tedy nenajdeme a pro mě je logická volba Bootstrap, a to z jednoduchého důvodu: větší rozšířenost a popularita. Kromě většího množství šablon a komponent mj. např. dostanete radu na různých fórech, kdykoliv si nebudete s něčím vědět rady.
Uvedu zde několik odkazů na užitečné stránky:
- šablony zdarma pro Bootstrap: Shapebootstrap, Startbootstrap, Azmind
- snippety zdarma pro Bootstrap: Bootdey, Bootsnipp
- on-line kurz Bootstrapu zdarma: edX
- tutoriál zdarma: Tutorialspoint
- nástroj zdarma na návrh rozvržení stránky pro Bootstrap: Layoutit

Další do party
Pro úplnost se ale můžeme ve zkratce podívat ještě na několik dalších oblíbených frameworků, a stručně si napíšeme, v čem jsou zajímavé a v čem se liší od výše zmiňovaných dvou:

Semantic UI:
Názvy tříd jsou v přirozeném sémantickém jazyce, proto je kód mnohem čitelnější a srozumitelnější (hezký příklad: class=“ui four column doubling stackable grid container“). Jako jeden z mála nabízí mřížku o 16 sloupcích. Kvalitní dokumentace, nabízí mnoho příkladů.

Pure:
Výhoda tohoto frameworku je jeho modulární řešení. Nemusíte stahovat celý balík, ale jen potřebné komponenty. Ušetříte s ním spoustu bajtů. Je určen spíše pro nastartování projektu než pro komplexní řešení. 

Skeleton:
Další Framework určený na menší projekty. Může sloužit jako základní „kostra“ k použití robustnějších frameworků. 

Uikit:
Je populární především u uživatelů Joomly a WordPressu. Nabízí téměř stejnou funkčnost a kvalitu jako konkurenti.