Bootstrap vs. Foundation

img

A Bootstrap és a Foundation talán mondhatjuk, hogy a legelterjedtebb CSS-keretrendszerek a weben. Személy szerint eddig a Bootstrapet támogattam, mivel már a 2.3.2 idején, vagy még lehet előtte, megismerkedtünk. Aztán, mikor kijött a 3-as, első körben baromira nem jött be. Még a Google+ fiókoman is hangot adtam ennek, pedig ritkán szoktam bármit is posztolni.

Persze, csak a már megszokott 2.3.2 miatti kirohanás része volt. Egyszerűen nem láttam át az új gridet. De még utána max 1-2 oldal készült 2-ben. Szépen lassan megszoktam a 3-at, sőt...

Tehát, elkezdtem tanulmányozgatni a 3-as Bootstrapet, de valahogy mindig kevésnek bizonyult. Akárhogy designolod, mindig megvan az a tipikus, 1-2 kattintás után érezhető Bootstrap-feeling. Elkezdtem vadászni a neten és ekkor találtam rá a Foundation-re. A ZURB által készített keretrendszer első ránézésre kicsit többet adott, mint a konkurencia. Tehát akkor kicsit összefoglalom, hogy melyik rendszer pontosan mit ad hozzá az élményhez. Persze, mint mindennek ezeknek is megvan a saját előnye és hátránya. Egyik rendszerhez sem húzok igazán, így talán reálisabb képet tudok felállítani.

GRID rendszer

Egy weboldal készítésekor talán ez az elsődleges szempont, könnyen lehessen felépíteni a weboldalt, minél kevesebb elemmel. Erre mindkét rendszer elég egyszerű html kódot készített. Könnyen és gyorsan lehet összeállítani a gridet.

Mindkét keretrendszer a 12 részes gridet választotta. Ezt az elosztást majdnem minden oldalon alkalmazni lehet, főleg, ha a grafikus is megérti, hogy 12 oszlopban kell gondolkodnia. Ennek nagy előnye, hogy egyrészt bárhogyan kombinálhatod az oszlopokat (1-1-10, 2-2-8, 5-7, stb), másik pedig, hogy a 12-nek elég sok osztója van (1, 2, 3, 4, 6, 12). Ami a legtöbbször gondot okoz, hogy 5 részre nem tudsz osztani, ha az alap gridet alkalmazod. Ilyenkor mindig le kell generálni egy 5-ös gridet is, hogy a grafikus által megálmodott elrendezés kijöjjön. Nah de nem ez a lényeg.

A két grid rendszer között van némi különbség:

A Foundation Gridje 5 darab em alapú media-query-t használ

≤ 40em /small/
≥ 40.063em /medium/
≥ 64.063em /large/
≥ 90.063em /xlarge/
≥ 120.063em /xxlarge/

A Bootstrap Gridje 4 darab px alapú media-query-t használ

< 768px /extra small - xs/
≥ 768px /small - sm/
≥ 992px /medium - md/
≥ 1200px /large - lg/

Tehát a Foundation relatív mértékegységeket használ. Ezzel a böngésző támogatottsága kicsit kisebb, csak IE9-től használható. Míg a Bootstrap már IE8-tól.

A Foundation xLarge és xxLarge felbontását alapértelmezetten kikapcsolták, így valójában csak 3 media-query van, és ha ezeket a felbontásokat használni akarod, akkor ezt engedélyezned kell, amit megtehetsz, a _settings.scss fájban, ha kikommentezed és az értékét true-ra állítod a $include-xl-html-grid-classes és $include-xl-html-block-grid-classes változóknak.

Igen itt jön egy másik fontos dolog, amit a Foundation javára írhatunk, a block grid. Ennek a lényege, hogy egy számozatlan lista vagy rendezetlen lista (egyik helyen így, másik helyen úgy hivatkoznak rá), azaz <ul> elemeit (<li>) egyenlően rendezi el egymás mellett. Ennek előnye, hogy minimális markup mellett hozhatók létre, azonos méretű oszlopok. A Foundation példája például egy képgalériát mutat be.

Struktúra

Mindkét rendszer alapértelmezetten a 12 oszlopra osztott gridet használja. És szerencsére mindkét rendszer tudja alkalmazni az egymásba ágyazott grideket.

Itt egyetlen változás van a két rendszer működése között, mikor több vagy kevesebb oszlopot használsz, mint 12.

Foundation minta

Bootstrap minta

Tehát a Foundation az utolsó oszlopot alapértelmezetten jobbra igazítja, míg a Bootstrap balra. Foundationnél ezt meg lehet egyszerűen oldani, ha az utolsó elemnek az end classt adjuk: módosított Foundation minta. Ekkor ugyanúgy működik, mint a Bootstrapben megszokhattuk.

Egyéb jellemzők

A Foundation alapértelmezetten kapott egy Abide nevű form-validátort. A Bootstapben nincs ilyen funkció, de ez már részletkérdésnek számít egy design felépítésénél.

A Foundation másik specialitása az Interchange, ami media-query alapján tölti be a megfelelő reszponzív tartalmat. Ezzel szemben a Bootstrap csak reszponzív képeket használ.

A Foundation javára írható még a Jobbról-balra olvasás támogatása, az Off-canvas menük, az oldal bemutatása funkció vagy az ártáblák használata.

Támogatás, közösség

Ha a közösségi támogatás szempontjából vizsgáljuk a két rendszert, egyértelműen a BS javára írhatjuk a pontot. Sokkal nagyobb a követői bázisa a sitebuilderek és designerek körében is. Így ha problémád adódik, a Bootstrapben, könnyebben kapsz rá választ a közösségtől.

Azt remélem nem kell mondani, hogy a Bootstrap mögött a Twitter két korábbi munkatársa, Mark Otto - @mdo és Jacob Thornton - @fat áll. Míg a Foundation mögött a ZURB, egy kreatív ügynökség áll, akiknek azért nem kis nevek vannak a porfóliójában: Facebook, eBay, Pixar vagy National Geographic.

Böngésző támogatottság, sebesség

Ezt már feljebb is említettem, de itt is jó, ha le van írva. Tehát a Foundation relatív méretezést használ, ezáltal az IE8 és alatta kiesik a támogatott böngészők listájából, míg a Bootstrap pixel alapú méretezést használ, így az IE8-től már használható.

Sebesség terén a két rendszer közel azonos teljesítményt nyújt, így ebben nem tudunk különbséget tenni. Természetesen mivel a CSS és a JS is felhasználói oldalon "fut", így a teljesítményt nagyban befolyásolja a feldolgozó számítógép és a böngésző sebessége.

Melyiket válasszam, összegzés

A kérdés nem egyszerű. Mindkét rendszer javára billenhet a mérleg, főleg attól függ, hogy a programunk szempontjából mit tartunk fontosnak. A Bootstrap rengeteg kiegészítővel rendelkezik, így sokkal jobban bővíthető, de ezek egy része már alapból benne van a Foundationben.

Jelenleg a kérdést nyitva hagyom, még én sem tudtam eldönteni, melyik rendszert használnám alapértelmezéként a szoftvereimben. Már a Bootstrappel elég régóta foglalkozok, de mint említettem, számomra vannak hiányosságai. Ezzel ellentétben a Foundationben pedig nem látom azt, hogy ezt nekem mindenképp használnom kellene.

A kérdés főleg attól függ, hogy melyikben érzed azt, hogy jobban kielégíti az igényeidet. A két rendszer használata közel azonos. Ha a rengeteg előre elkészített design mintát vesszük figyelembe, akkor a Bootstrap nyer. Ha a relatív (rem-alapú) méretezést vesszük a pixel alapú méretezéssel szemben, akkor a Foundation nyer. Ha az Internet Explorer 8 is benne van a támogatási listádban a Bootstrap felé billen a mérleg. De ha a mobile-first design készítés a fő szempontod, akkor jobban jársz a Foundationnel. Ha jobb közösségi támogatást preferálod, akkor pedig a Bootstrap a te keretrendszered.

Tehát nincs abszolút nyertes a kérdésben. Mindkét rendszert jól tudod használni, minden attól függ, hogy melyikben érzed magad otthonosabban.