Bootstrap - prvá voľba väčšiny developerov alebo záujemcov. Avšak aj Foundation má svoje čaro. V dnešnom článku rozoberiem rozdiely medzi týmito dvoma konkurentmi v CSS frameworkoch.

Pri štýlovaní stránky pomocou CSS už dávno väčšina developerov používa nejaký CSS framework a ani ja samozrejme nie som výnimka. Tí, ktorí vedia o čom hovorím a zaujímajú sa o tieto frameworky, určite si párkrát lámali hlavu, ktorý framework si vybrať.

Pár posledných článkov sa venujem písaniu hlavne ohľadom CSS. V CSS existuje viacero frameworkov. Samozrejme za zmienku stoja frameworky ako Sussy, Skeleton, či Pure. Ale nakoľko prakticky denne využívam Bootstrap a Foundation, rozhodol som sa opísať rozdiely týchto dvoch frameworkov z môjho pohľadu.

Bootstrap

Zdroj: https://v4-alpha.getbootstrap.com/

Bootstrap je najpoužívanejší CSS framework. Myslím, že zo všetkých CSS frameworkov dáva developerom najviac predtvorených prvkov. Od tlačidiel a tabuliek, cez panely, typografiu, hlášky až po javascriptom ovládané modálne okná, rozbaľovacie tlačidlá, slidery… Okrem toho ponúka už dopredu vytvorené témy stránok na blog, portfólio či dokonca administráciu. Práve preto si začiatočníci a študenti väčšinou zvolia Bootstrap, keďže častokrát im ide viac o funkčnosť než o dizajn.

Toto má samozrejme aj nevýhody. Spomínaní študenti a začiatočníci takmer vždy nechajú naštýlované prvky podľa Bootstrapu a už pri prvej návšteve webu je vidieť, že sa jedná o Bootstrap. Toto je podľa mňa nevýhoda, aj keď nie tak frameworku ako developera. Ja osobne si potrpím na originalite stránok a celkovo nemám rád, ak väčšinu vizuálneho dizajnu za mňa rieši nejaký framework. Taktiež pre návštevníkov, keď vidia, že stránka používa štandartný template frameworku (tzv. generic Bootstrap), tak to môže potenciálnych klientov odstrašiť ako nedôveryhodná stránka. Tento problém sa týka hlavne stránok s predajom. Dôverovali by ste e-shopu, ktorý vyzerá ako 100 ďalších? :)

V Bootstrape je veľa pekne naštýlovaných prvkov, čo vám môže na jednej strane ušetriť čas, no na druhej zas mierne zahrať na nervy. Keď ste sa už rozhodli pre Bootstrap, ale chcete aj originálny dizajn webu, tak zmena štýlov prvkov môže byť niekedy dosť zložitá. Napríklad štýlovanie textových polí obsahuje zhruba 13 vlastností, ktoré treba pri svojom štýle prepísať. Toto sa netýka len Bootstrapu, takmer všetky CSS frameworky už majú niektoré prvky naštýlované, no len Bootstrap ich obsahuje viac.

Foundation

Zdroj: https://madebyshape.co.uk/web-design-blog/from-bespoke-sass-framework-to-zurb-foundation-6

Bootstrap využívam v administrácii nášho CMS systému (nakoľko dizajn administrácie nemusím meniť a zostáva stále rovnaký), no na stránkach (frontende) používam Foundation. Foundation je tzv. mobile-first - to znamená, že sa zameriava hlavne na mobilné zariadenia a celkovo responzivitu. Taktiež názvy definovaných tried sú podľa mňa ľahšie zapamätateľné. Uvediem príklad pri použití grid systému:

Foundation:

Bootstrap: 

Názvy tried od Foundation (small-, medium- a large-) sú pre mňa lepšie zapamätateľné než tie od Bootstrapu (col-, col-sm-, col-md-, col-lg- a col-xl-). Ale to už je zrejme viac o vkuse a zvyku. Viac informácií ohľadom grid systému a responzivity prinesiem v mojom nasledujúcom článku, kde sa tomu budem podrobne venovať.

Foundation má tiež už niektoré prvky naštýlované, avšak nie až tak komplexne. Jediné, čo by som odporučil pre tvorcov Foundation je, že by mohli spraviť podobný štýl sťahovania frameworku ako má Bootstrap pri vytváraní “custom” súboru. Bootstrap má oveľa viac možností, ale hlavne dokáže po vytvorení uložiť aj konfiguračný súbor, ktorý neskôr (napríklad po vydaní novej verzie frameworku) môžeme nahrať a vyplní nám naše nastavenia na farby, veľkosti, komponenty…

Ďalším viditeľným rozdielom medzi týmito frameworkami je veľkosť CSS súborov. Mám ich síce vyklikané na “custom”, ale Bootstrap zaberá 119 kB zatiaľ čo Foundation len 28 kB. Pri rýchlych stránkach je to podstatný údaj. V mojom prípade má Bootstrap nevýhodu, pretože využívam niektoré prvky a teda aj kvôli tomu má väčšiu veľkosť, zatiaľ čo z Foundation využívam len grid. Pre lepšie porovnanie. Bootstrap CSS súbor so všetkými prvkami má 121 kB pri verzii 3 a 150 kB pri verzii 4, zatiaľ čo Foundation má 108 kB.

SASS/SCSS vo frameworkoch

Ak vás vyklikávanie “custom” prvkov v CSS frameworku nebaví a radšej by ste siahli po niečom dynamickejšom, čo môžete meniť samostatne pre každý projekt - mám pre vás dobré správy. Framework si môžete stiahnuť aj v SASS/SCSS verzii, ktorú potom vždy pre danú stránku upravíte. Nemusí sa jednať o veľké zmeny. Napríklad pri Foundation v takejto verzii môžete zmeniť odsadenia medzi stĺpcami pre rôzne veľkosti obrazovky. Touto cestou získate oveľa viac možností než pri “custom download”.

Do nedávna bol pre mňa najväčšou prioritou Foundation kvôli flex-boxovom gridu. No novšie verzie Bootstrapu sú už tiež robené pomocou flex-boxu, čiže grid v týchto dvoch frameworkoch je takmer identický. Avšak s Foundation pracujem už dlho a to je aj hlavný dôvod, prečo ho budem stále preferovať. Viac ohľadom flex-boxov, gridu a možností Foundation frameworku prinesiem v ďalšom článku.

Nad položkou “Veľa zbytočným elementov” sa dá polemizovať, pretože osobne preferujem využitie viacerých elementov než komplikovaných CSS hackov.

Musím ešte pripomenúť, že síce Bootstrap podporuje stiahnutie v SASS verzie, no vytvorený je v LESS a do SASS je len prekonvertovaný.

Moje zhodnotenie teda je, že pokiaľ plánujete využiť framework, ktorý je zameraný hlavne na mobilné zariadenia a neobsahuje veľké množstvo naštýlovaných prvkov, rozhodne odporúčam ísť do Foundation. Pokiaľ však potrebujete vytvoriť stránku narýchlo a originalita niektorých prvkov nie je pre vás tak dôležitá, Bootstrap vám v tomto smere vyhovie. Ja som pôvodne začínal s Bootstrapom, no potreboval som niečo pevnejšie a zároveň jednoduchšie, vtedy som našiel Foundation.

Ktorý CSS framework preferujete vy, je to Bootstrap či Foundation? Poprípade používate nejaké iné (napríklad už tie spomenuté), ktoré stoja za vyskúšanie? Dajte nám vedieť do komentárov a v niektorom z ďalších článkov by som mohol rozoberať rozdiely medzi vami spomenutými frameworkami.