Bootstrap versus Foundation: Welk framework is beter?

Home / Blog / Achtergronden / Bootstrap versus Foundation: Welk framework is beter?

Als je een web designer bent die op zoek is naar een mooi simpel en responsive front-end framework, dan ben je waarschijnlijk wel bekend met Bootstrap en Foundation, aangezien dat de twee meest populaire frameworks zijn op dit moment. Maar waarschijnlijk denk je ook wel eens, welke van de twee kan ik nu het beste gebruiken? Welk framework is beter? Welke van de twee geeft me een goed functionerende nieuwe website op de meest efficiënte wijze? Dat bespreken we in dit blog.

Voor we verder inzoomen op de details van elk framework, weet dat beide frameworks hun voors en tegens hebben. Aan het eind van dit artikel kun je een keuze maken welk framework beter voor jou is, gebaseerd op jouw unieke situatie, jouw behoeftes en jouw vertrouwdheid met code.

Bootstrap werd gemaakt door voormalige Twitter medewerkers terwijl Foundation het geestelijk kind is van ZURB, een bedrijf in Interaction Design dat eBay, Facebook en zelfs NYSE tot zijn klanten mag rekenen. Het is belangrijk om het laatste nieuws over beide frameworks te kennen om een weloverwogen keuze te maken voor je webdesign projecten.

Het Grid System

Het meest opvallende deel van een front-end framework is het grid system. Met dat grid system kunnen designers diverse layouts prototypen en dan de nodige aanpassingen doen. Foundation maakte aanvankelijk naam met het grid systeem, zijnde niet alleen de eerste van de twee genoemde frameworks die responsive ging maar het gaf ook echt invulling aan de mobile-first aanpak.

Na een tijdje haalde Bootstrap zijn achterstand in en sloot het gat tussen de twee. Met andere woorden; de kleine voorsprong die Foundation aan het begin nog had met zijn grid system is nu verleden tijd. Toch zijn er nog enkele specifieke grid features in Foundation die het waard zijn genoemd te worden. Het heet block grid en het helpt designers om content van ongeordende lijsten efficiënt te verdelen in een gelijkmatig verdeeld raster. Foundation maakt het daarnaast een peulenschilletje om snel kolommen te laten verdwijnen en marges te laten vervallen.

Designers hebben de mogelijkheid om gelijkwaardige code snippets te maken in beide frameworks die op bijna dezelfde manier werken. Toch kan de syntax om rasters te bouwen een beetje anders zijn, wat inhoudt dat je persoonlijke voorkeur hier de doorslag geeft.

We zijn aangekomen bij flexibele en vooraf-gedefinieerde grids. Zowel Bootstrap als Foundation hebben een standaard grid system dat je geheel zelf kunt aanpassen met respectievelijk Less en Sass. Bootstraps standaard grid mode is gekoppeld aan breakpoints. Maar als designers de class .row-fluid gebruiken, is de breedte gebaseerd op percentages (net als in Foundation).

Sizing Units
Wanneer het gaat om het berekenen van typografie, breedtes en eigenlijk al het andere, is Bootstrap gekoppeld aan pixels terwijl Foundation gebruik maakt van rems (als je meer van rems wilt weten is dit een interessant artikel). Ondanks dat er duidelijke verschillen zijn tussen de twee, kunnen ze beide dezelfde resultaten genereren. Ook hier geldt; je persoonlijke voorkeur speelt hier een grote rol.

Terwijl pixels misschien vertrouwder voelen voor webdesigners en grafici zonder veel ervaring, kunnen rems designers helpen om meer over properties na te denken. Je moet pixels zien als absolute units terwijl je rems moet zien als relatieve units.

Breek je hoofd niet bij de keuze over het ‘beste’ framework. De verschillen zijn minimaal en het komt toch vooral neer op je persoonlijke voorkeur en comfort: als je een fan bent van het werken met pixels, dan ga je voor Bootstrap. Als je pixels gebruikt zul je specifiek je breedte, hoogte, padding en marges van componenten in moeten stellen voor elk doelapparaat en scherm waar je mee werkt.

Features

Voor iemand die net beide front-end frameworks leert kennen, kan het lijken alsof beiden een bijna identieke collectie pre-built features hebben. Zoals wel vaker het geval is: schijn bedriegt. Daarom is het belangrijk jezelf vertrouwd te maken met de kleine maar zeer belangrijke verschillen tussen de twee frameworks.

Foundation wordt geleverd met een ingebouwde vormvalidatie van Abide. Bootstrap heeft dat niet, maar dat is geen probleem aangezien de keuze voornamelijk gebaseerd wordt op persoonlijke voorkeur en persoonlijk gemak. Interchange is nog een unieke feature van Foundation: het beroept zich op media queries om responsive content te laden die geschikt is voor verschillende browsers. Off-canvas navigatie, tours, pricing tables en right-to-left support sluiten de lijst van features in Foundation.

Aan de andere kant komt Bootstrap met features die meer compleet en doordacht voelen vanuit het standpunt van een designer. Je moet het zo zien: de features die vooraf ingebouwd zijn bij Bootstrap, zijn veel meer bevorderlijk om designers up and running te krijgen met hun doel om een functionele website met een thema te bouwen. Dus als je waarde hecht aan productiviteit, zal Bootstrap het framework van jouw keuze zijn.

De mogelijkheid om te customizen
Bootstrap haalt de frictie van je werkpad zodat je een website kan maken op de meest efficiënt mogelijke wijze en die up and running krijgen. Foundation daarentegen heeft de neiging om iets meer opties te bieden om te customizen als het aankomt op uiterlijk vertoon, iets dat je wellicht wat kan vertragen in je proces en minder efficiënt laat werken. Als je een website in Bootstrap maakt, en dit klinkt als een open deur, zal je website eruit zien alsof hij ontworpen is met Bootstrap. Dat wil zeggen, de standaard Bootstrap-look zal zichtbaar zijn in je design. Dit kan je echter voorkomen door een thema toe te voegen of wat tijd te besteden aan custom styling. Als je dus niet wilt dat mensen weten dat je je site met Bootstrap gebouwd hebt, zul je dus nog wel wat extra handelingen uit moeten voeren en je wat verder verdiepen in de custom styling features. Je dank voor de Bootstrap look mag naar de vroege populariteit van Bootstrap (het is populairder dan Foundation). Ter vergelijking: Foundation heeft een standaard look die veel dichter komt bij hoe je browser eruit zou zien, in veel gevallen althans. Als gevolg is het dan ook een beetje makkelijker om dat te tweaken tot een meer individueel en uniek ontwerp.

Als het om thema’s gaat is Bootstrap niet te verslaan; het heeft meer thema’s in het assortiment dan Foundation. Natuurlijk zijn Foundation thema’s ook beschikbaar maar niet in zulke overvloed zoals bij Bootstrap het geval is. En tenzij je een designer bent die graag al zijn websites er min of meer hetzelfde uit wil laten zien, zal je waarschijnlijk de grotere variëteit aan thema’s van Bootstrap wel waarderen.

Mobiel

Vanwege het belang van responsive design en het toegenomen mobiele gebruik van websites, zou je wel gek zijn om een site te ontwerpen die niet geschikt is voor mobiele apparaten. Daarom zullen we hier verder bespreken hoe beide frameworks omgaan met het mobiele vraagstuk.

De aanpak van Foundation is om designers aan te moedigen het mobiele vraagstuk frontaal te tackelen; head first, door middel van hun simpele, gemakkelijk te volgen regel:

“Anything not under a media query is going to be considered as mobile.”

Mocht een designer nou willen dat iets er anders uitziet op een computer of tablet, dan moet ie dat specificeren in de media query. Dit is ook wel bekend als ‘mobile-first CSS development’.

Bootstrap behandelt het mobiele vraagstuk vanuit een geheel andere invalshoek. Mocht een designer een design voor mobiele apparaten willen, dan zullen ze dat in de media query moeten specificeren. Het is dus niet ‘mobiel als de standaard’ zoals Foundation dat doet. Als designers niet eerst ontwerpen voor mobiel, dan zullen de mobiele gebruikers gewoon moeten worstelen met de desktop versie op het mobiele apparaat.

Browser Support and Performance

Browser support and performance zijn beide prima te noemen voor Bootstrap en Foundation, met daarin één uitzondering: Foundation ondersteunt Internet Explorer 8 niet. Sommige designers voelen zich beperkt door die dat gebrek aan support en andere designers maakt het niet uit.

Als je het puur hebt over prestaties bij Bootstrap versus Foundation, dan zijn de verschillen klein. Natuurlijk zijn er minimale prestatie verschillen, maar deze zijn grotendeels gebaseerd op specifieke features (framework componenten, browser omgevingen, etc.) die designers ondersteunen, in tegenstelling tot problemen omtrent de front-end frameworks zelf.

Community en Support

Als er dan toch een categorie is waar één framework beter is dan het andere, dan is het wel de community, waar Bootstrap het duidelijk wint van Foundation. Bootstrap heeft een grote groep aanhangers van designers en ontwikkelaars wat er voor zorgt dat het waarschijnlijker is dat je hulp krijgt als je tegen problemen aanloopt.

Daarnaast zijn er een boel plug-ins en widgets die kunnen worden verbonden aan het framework, wat de functionaliteit van Bootstrap verder uitbreidt voor efficiënter web development.

De Winnaar?

Ondanks dat we nu alle voors en tegens van beide frameworks hebben opgesomd, is de keuze voor een framework niet evident. Welk framework beter is, hangt toch nog steeds voornamelijk af van de persoonlijke voorkeur van de designer en zijn niveau van comfort met de technieken.

Als je het fijn vindt om een grote selectie thema’s tot je beschikking te hebben, dan is Bootstrap de weg die je op wilt gaan. Als je rems boven pixels verkiest, is Foundation een passend framework. Als je echter de support voor Internet Explorer 8 essentieel vindt, kan je beter bij Bootstrap blijven. Als het ontwerpen met de mobile first approach belangrijk is, is Foundation je vriend aangezien Foundation de nadruk legt op mobiele functionaliteit. Maar als community support en meer keuze in plug-ins en widgets essentieel voor je zijn kan je toch weer niet om Bootstrap heen. Dus stel jezelf de vraag welke functionaliteiten het belangrijkst zijn voor je en baseer daar je keuze op. We hopen dat we je met de verschillen tussen de frameworks een beetje hebben kunnen helpen een framework te kiezen dat het beste bij jou past.