Bootstrap-alternatieven: een overzicht van de beste frontend-frameworkssites
Inhoudsopgave
Usability en de frontend van je webproject
Wie een frontend voor een webproject wil maken, staat voor diverse uitdagingen: de interface moet er goed uitzien, maar daarbij mag de usability nooit uit het oog worden verloren. De verschillende apparaten en browsers waarmee gebruikers tegenwoordig websites bezoeken, maken het noodzakelijk dat de gekozen visuele en technische elementen bovendien op alle platforms werken. Toegankelijkheid en een goede SEO-basis zijn evenzeer vereisten voor een frontend-programma.
Waarom alternatieven voor Bootstrap soms betere oplossingen bieden
Om bij de ontwikkeling van een webinterface niet helemaal bij nul te hoeven beginnen, maken veel programmeurs gebruik van UI-frameworks (User Interface). De keuze valt daarbij vaak op het door Twitter ontworpen Bootstrap. De componenten van dit framework zijn geoptimaliseerd voor mobiele toestellen en voor alle gangbare browsers en kunnen eenvoudig worden aangepast aan de eigen wensen. Echter, doordat Bootstrap zo veelvuldig wordt gebruikt, zijn er op internet veel websites die met behulp van de standaard Bootstrapcodes zijn gebouwd en dus erg op elkaar lijken. Een ander nadeel is tevens de complexiteit van het frontend-framework dat sterk gebaseerd is op CSS en JavaScript en bovendien de HTML-markup uitgebreider maakt, wat o.a. effect kan hebben op de laadsnelheid van het webproject.
Het is weliswaar mogelijk om gereduceerde script- en CSS-bestanden te downloaden die alleen de benodigde Bootstrapcomponenten bevatten, maar daarvoor zal je je intensief met deze materie bezig moeten houden. Het gebruik van een framework zou eenvoudig en tijdbesparend moeten zijn, maar dat gaat in een dergelijk geval grotendeels verloren. Menig ontwikkelaar heeft het helemaal niet zo op het gebruik van het UI-framework, waardoor het zinvol is om na te denken over alternatieven voor Bootstrap. Door de enorme keuze is dit echter bijna net zo’n lastige onderneming.
De beste alternatieven voor Bootstrap: een beknopt overzicht
Hieronder presenteren we vijf frontend-frameworks die je in plaats van Twitter Bootstrap kan gebruiken om een volledige en functionele frontend te ontwikkelen. We leggen de voor- en nadelen uit en de verschillen ten opzichte van Bootstrap. Daarnaast lees je over de omvang van de codeverzamelingen en voor welk type ontwikkelaar ze in het bijzonder geschikt zijn. Tevens beantwoorden we de vraag hoe goed je met het betreffende Bootstrap-alternatief een frontend kan ontwikkelen.
ZURB Foundation
Het modulair opgebouwde Foundation-framework was van oorsprong een style guide die het webdesignbureau ZURB eerst alleen gebruikte voor projecten van zijn klanten. Later combineerde en publiceerde ZURB de vele HTML-, CSS- en JavaScript-componenten in het opensource-framework. Het belangrijkste deel, een flexibele grid lay-out van 12 kolommen, maakt het mogelijk om een responsive lay-out vorm te geven die zich automatisch aanpast aan verschillende displayformaten en resoluties van de verschillende toestellen. Naast het gridsysteem biedt Foundation o.a. de volgende templates:
- Slider
- Buttons
- Typografie
- Menubalken en menu’s
- Media container
- Geïntegreerde float en visibility classes
Foundation is net als Bootstrap vanaf versie 4 gebaseerd op Sass, een stylesheettaal die het maken en bewerken van de CSS-bestanden aanzienlijk vereenvoudigt, maar dit ZURB-framework wordt, in tegenstelling tot Bootstrap, niet ondersteund door Less (ook een stylesheettaal). Terwijl er nauwelijks verschil zit in de omvang van JavaScript plug-ins en CSS-snippets, zijn er voor Foundation aanzienlijk minder templates en is de ondersteuning door andere platforms ook duidelijk minder.
Het framework van ZURB overtreft Bootstrap echter zeker als het gaat om de individualiteit van ontwikkelde frontends: de onderliggende CSS-code geeft toegang tot een compact design dat gemakkelijk kan worden aangepast aan je eigen wensen. Sommige classes zijn – anders dan in Bootstrap – direct gelinkt, zonder dat je deze eerst moet toevoegen. Een ander voordeel: ZURB biedt verschillende cursussen en persoonlijke support voor je frontend-project en tevens een speciale versie van het framework voor het ontwerpen van e-mailnieuwsbrieven.
Wanneer je Foundation wilt gebruiken om je webinterface te ontwikkelen, kan je de complete set of een individueel samengesteld pakket met de gewenste componenten gratis downloaden van de officiële website.
| Voordelen | Nadelen |
|---|---|
| compacte programmeercode | slechts weinig templates beschikbaar |
| geïmplementeerde CSS-classes | problemen met oudere (of verouderde) versies van Internet Explorer |
| support mogelijk | geen Less-ondersteuning |
Pure.CSS
Medio 2013 publiceerde Yahoo met Pure.CSS een basisstructuur voor de ontwikkeling van web-frontends. Dit is een goed alternatief voor Bootstrap, maar kan ook in combinatie met het Twitter-framework worden gebruikt. Pure is gebaseerd op de Scalable and Modular Architecture for CSS, kortgezegd SMACSS, die ervoor zorgt dat terugkerende elementen als tabellen, buttons of formulieren gescheiden zijn van het basisdesign (lettertype, lay-out, enz.) en eigen conventies kunnen hebben. In het Yahoo-framework heeft daarom elke module een standaard class name met het prefix “pure-” voor het reguliere design en een aanvullende class name voor specifieke regels die gelden voor submodules. Je kan in Pure.CSS bijvoorbeeld een formulier integreren waarbij alles onder elkaar staat door de standaard class name “pure-form” en de sub-class name “pure-form-stacked” aan te geven.
Het frontend-framework dat kan worden gedownload in een responsive en een non-responsive versie bevat de volgende zes modules die in een gecomprimeerde, gezipte vorm samen ongeveer een grootte van 4 KB (unzipped 16 KB) hebben:
- Base (base-min.css): frameworkbasis inclusief regels
- Grids (grids-responsive-min.css): flexibel, responsive gridsysteem
- Forms (forms-min.css/forms-nr-min.css): formulieren
- Buttons (buttons-min.css): verschillende knoppen
- Tables (tables-min.css): tabellen
- Menus (menus-min.css/menus-nr-min.css): menu’s
Alle modules zijn, zoals de componenten van Bootstrap en vele andere CSS-frameworks, gebouwd op het opensourcestylesheet Normalize.css. Deze stylesheet vervangt de standaard styles van HTML-elementen door geoptimaliseerde cross-browserstyles. In vergelijking met het frontend-framework van Twitter bevat het equivalent van Yahoo echter geen JavaScript-applicaties, hoewel je die natuurlijk wel zelf kan integreren. Pure.CSS is niet zozeer een kant-en-klare frontend die alleen nog hoeft te worden aangepast aan je eigen wensen, maar eerder een startpunt voor je project en biedt daarmee dan ook een veel grotere vrijheid.
Yahoo host het framework op zijn eigen, vrije Content Delivery Network (Yahoo CDN), zodat je het met behulp van een eenvoudige link kan integreren in de -sectie van je project. Je kan Pure.CSS natuurlijk ook downloaden en zelf hosten. De actuele link naar het CDN en de downloadbestanden vind je op de officiële website purecss.io.
| Voordelen | Nadelen |
|---|---|
| minimalistisch design | zeer weinig templates beschikbaar |
| eersteklas browsercompatibiliteit | geen JavaScript-snippets |
| hoeft niet zelf te worden gehost | geen support van Less/Sass |
| SMACSS-architectuur |
Semantic UI
In 2013 publiceerde programmeur Jack Lukic zijn framework-oplossing voor frontend development onder de naam Semantic UI. Het doel van deze codeverzameling is om het schrijven van HTML-code te vereenvoudigen door gebruikersvriendelijke, makkelijke conventies. Hiervoor heeft Semantic UI ruim 3.000 semantische CSS-classes die gemakkelijk in gebruik zijn en het ontwikkelingsproces optimaliseren. Terwijl het basispakket van Bootstrap slechts een enkel theme bevat, biedt Semantic UI meer dan 20 verschillende designtemplates in de standaardversie. De omvang is wat complexer dan bij het Twitter-framework: naast de elementaire CSS- en JavaScriptbestanden bevat het basispakket Fonts, de PHP-packagemanager Composer, de webfilemanager Bower en de JavaScript-task runner Gulp.
De afzonderlijke componenten zijn ingedeeld in de volgende zes sectoren:
- Globals: styledefinities gebaseerd op normalize.css; typografie- en designbases
- Elements: algemene frontend-componenten, zoals buttons, iconen, containers e.d.
- Collections: structurele content, zoals het gridsysteem, menu’s, tabellen of formulieren
- Views: interactieve elementen, zoals commentaarvelden, newsfeeds of reclamebanners
- Modules: widgets, zoals keuzelijsten, pop-upvensters of checkboxen
- Behaviors: interfaces voor de JavaScript-programmering
Voor beginners is het namensysteem van Semantic UI eerst merkwaardig en het duurt een tijd om er bekend mee te raken. Later loont deze extra moeite, omdat de HTML-code van je web-frontend veel makkelijker te lezen is dan bij vergelijkbare frameworks als Twitter Bootstrap, wat vooral een voordeel kan zijn bij latere revisies. Semantic UI bestaat naast de CSS- ook in een Less-versie; inmiddels bestaat tevens een Sass-versie, wat het semantische framework op dit punt vergelijkbaar maakt met Bootstrap. Een groot nadeel van dit Bootstrap-alternatief is het feit dat veel componenten afhankelijk zijn van JavaScript en zonder die scripttaal niet werken.
Je kan Semantic UI downloaden in de downloadsectie van de officiële homepage, de bestanden via een link integreren met het Content Delivery Network JSDELIVR of toegang krijgen tot de afzonderlijke codesnippets in het GitHub-repository van het framework.
| Voordelen | Nadelen |
|---|---|
| ruim 3.000 semantische CSS-classes | zeer complex |
| ondersteunt Sass en Less | het merendeel van de CSS-componenten functioneert alleen met JavaScript |
| uitstekende integratiemogelijkheden (React, Ember, Meteor, PHP-packagemanager, Gulp) |
UIkit
UIkit is een opensource-oplossing voor de programmering van een frontend. Het is ontwikkeld door het bedrijf YOOtheme uit Hamburg, Duitsland, dat veel expertise heeft op het gebied van webapplicaties en themes ontwikkelen voor WordPress, Joomla en hun eigen websitebuilder YOOtheme Pro. De uitgebreide verzameling van HTML-, CSS- en JavaScriptcomponenten valt onder de vrije MIT-licentie en kan zodoende gemakkelijk worden gebruikt en veranderd. Alle CSS-snippets bestaan in zowel een Less- als een Sass-versie, zodat het aanpassen van de style-templates voor ervaren programmeurs verrassend eenvoudig is. Dit Bootstrap-alternatief heeft ruim 30 kernmodules die zijn gebouwd op normalize.css, net als de voorgaande Bootstrap-alternatieven, en het framework van Twitter. Daarom hebben gangbare internetbrowsers geen enkel probleem met de weergave van Ulkit-webprojecten.
De belangrijkste componenten zijn onderverdeeld in de volgende zes categorieën:
- Defaults: basis voor de normalisatie van HTML-elementen waarmee de cross-browsermogelijkheid wordt gerealiseerd en tevens sommige basic stylevoorschriften
- Layout: tools voor het design van de frontend, bijv. het gridsysteem, contentboxes en nuttige CSS-classes voor het onderscheiden van terugkerende content
- Navigations: alle elementen die de bezoeker helpen bij het verkennen van jouw webinterface; er zijn o.a. modules voor pagination (paginanummering) en klassieke navigatiebalken
- Elements: styles voor opzichzelfstaande content, zoals tabellen, lijsten en formulieren
- Common: componenten die je gewoonlijk binnen je content gebruikt, bijv. buttons, iconen, badges of animaties
- JavaScript: hoofdzakelijk JavaScript-based modules voor de implementatie van interactieve elementen
Ulkit bevat diverse responsive classes om content voor te bereiden op de verschillende displayformaten. De voorgedefinieerde breakpoints – bijv. 1.200 pixels voor zeer grote beeldschermen of 479 pixels voor kleine smartphonedisplays – kan je voor elk theme naar wens aanpassen met behulp van de online customizer. Om complicaties met andere CSS-snippets resp. -frameworks te vermijden, zijn alle classes aangeduid met het prefix “uk-“. Niet in het core framework geïntegreerd, maar optioneel selecteerbaar zijn aanvullende CSS- en JavaScript-elementen die je nodig hebt voor het realiseren van complexe webinterfaces wanneer deze bijvoorbeeld een administrator-sectie hebben inclusief login, HTML-editor en file-uploadfunctie.
Ondanks de aanzienlijk uitgebreide functies is de bestandsgrootte van de afzonderlijke componenten en van het gehele framework verrassend klein. Dit kan worden aangevuld met een zeer gedetailleerde documentatie die in het begin enorm kan helpen – zelfs al is Bootstrap iets verder wat betreft de selectie van themes en het aanbod aan tutorials. Toch heeft UIkit al rond 1.500 forks op GitHub, waar je alle modules van het frontend-framework kan vinden en downloaden. Het complete pakket kan ook worden gedownload van de officiële homepage. Het is echter niet mogelijk om vooraf modules te deselecteren, waardoor je die pas later in de unzipped directory kan verwijderen.
| Voordelen | Nadelen |
|---|---|
| optionele aanvullende componenten voor complexe webinterfaces | relatief onbekend |
| ondersteunt Sass en Less | |
| theme customizer |
Materialize
Materialize is een CSS-framework dat gebaseerd is op de principes van “material design” dat Google in 2015 introduceerde en inmiddels in de meeste apps wordt gebruikt. Het designconcept is gebouwd op kaartachtige surfaces die in principe minimaal ontworpen zijn (“flat design”), maar toch met veel animaties en schaduw de aandacht kunnen trekken. De diepte-effecten die op deze wijze worden bereikt, helpen de gebruiker van de webinterface om belangrijke informatie en interactieve elementen eenvoudig in zich op te nemen. Dit UI-framework met MIT-licentie is ontwikkeld door Alvin Wang, Alan Chang, Alex Mark en Kevin Louie – vier studenten aan de Carnegie Mellon University in Pennsylvania.
Het Bootstrap-alternatief dat net als het Twitter-framework een gridsysteem van 12 kolommen heeft, bevat diverse CSS- en JavaScript-componenten, ruim 700 officiële material design-symbolen in een icoonfont en Roboto, het standaard lettertype van het Google designconcept. Naast de gebruikelijke CSS-bestanden in normale en geminimaliseerde versies heb je, net als bij Bootstrap, toegang tot SCSS-bronbestanden die in Sass zijn geschreven, wat het individuele design van je webinterface vereenvoudigt. Ongeacht je selectie heb je de beschikking over ongeveer 30 elementen:
- CSS: de elementaire CSS-feature is net als bij Bootstrap en de andere UI-frameworks het responsive gridsysteem. Het biedt de basis voor een webinterface die werkt op alle apparaten. Het Materialize-grid bevat drie voorgedefinieerde displayformaten – minder dan 600 pixels voor mobiele toestellen tot 992 pixels voor tablets en meer dan 992 pixels voor desktop-pc’s. Andere CSS-snippets zijn een kleurenpalet dat is gebaseerd op de basiskleuren van material design, het reeds genoemde lettertype Roboto en verschillende classes, die in Materialize ”helpers” heten en die je helpen bij het inrichten van content.
- Components: components zijn de bestanddelen van de frontend-frameworks die je nodig hebt om navigatie-elementen en interactieve secties te realiseren. Naast typische componenten als codes voor het integreren van pagina’s, formulieren, navigatiebalken en iconen, vind je hier ook enkele modules die van wezenlijk belang zijn voor de uitvoering van het concept van material design. Daartoe behoren bijvoorbeeld “Cards” (de voor Google kenmerkende objectboxen voor de presentatie van content) of de symbolische “Chips” waarmee tags of contacten kunnen worden getoond.
- JavaScript: wat betreft JavaScript-applicaties is Materialize zonder twijfel een van de beste Bootstrap-alternatieven. Of je nu afbeeldingen wilt tonen in de carousel view, interactieve dialoogvensters wilt toevoegen, accordeonelementen wilt inbouwen of de interface interessanter wilt maken met het parallax-effect, de corresponderende JavaScript-snippets heb je altijd binnen handbereik. Daarmee kan je ideaal een webinterface ontwerpen die zeer gebruikersvriendelijk is op zowel mobiele apparaten als op desktop-pc‘s.
De bestanden van het Materialize-project kan je downloaden van Github of van de homepage van Materialize. Daar vind je ook de twee beschikbare templates “Starter” en “Parallax” en de markupcode cdnjs voor de verwijzing van projectbestanden via het Content Delivery Network.
| Voordelen | Nadelen |
|---|---|
| is gebouwd op Google Material Design | slechts weinig templates en extensions beschikbaar |
| grote keuze aan moderne componenten | ondersteunt alleen de nieuwste browserversies |
| Sass-versie beschikbaar | zeer strikte designspecificaties |
Samenvatting: zo vind je een passend Bootstrap-alternatief
De besproken alternatieve oplossingen hebben over het algemeen veel overeenkomsten met het Twitter-framework: de centrale component is steeds een gridsysteem dat zich onderscheidt door flexibiliteit en dat een grote rol speelt in het succesvol realiseren van cross-device webinterfaces. De voorgedefinieerde minimale en maximale afmetingen voor de verschillende displays verschillen van framework tot framework, maar normaal gesproken heb je hierbij als ontwikkelaar veel vrijheid om aanpassingen te doen. Dat geldt niet alleen voor grids, maar tevens voor de andere CSS-elementen die soms ook heel makkelijk kunnen worden geïntegreerd, wat bij Bootstrap niet altijd het geval is.
Er bestaan tevens verschillen in het class-systeem van de Bootstrap-alternatieven, waarbij in het bijzonder Semantic UI opvalt. In plaats van typische CSS-classes heeft dit UI-framework ruim 3.000 eigen semantische classes geïntegreerd, wat codeprogrammeren nog makkelijker moet maken. Vereenvoudiging bij het coderen bieden de meeste verzamelingen bovendien door het ondersteunen van de stylesheettalen Less en Sass, waarmee je de stylesheets van je webinterface eenvoudig kan aanpassen voor je ze converteert in het gebruikelijke CSS-formaat. Zo kunnen ze door de internetbrowser van de bezoekers goed worden gelezen en geïnterpreteerd. Pure.CSS maakt geen gebruik van beide CSS-preprocessors, maar heeft met de Scalable and Modular Architecture for CSS (SMACSS) een interessante benadering voor het gebruik van CSS.
De verschillende alternatieven voor Bootstrap hebben allemaal hun voors en tegens, waardoor het ook niet mogelijk is om een perfecte oplossing te bieden voor frontend-programmeren. Maak daarom in eerste instantie je keuze op basis van de eisen van je webproject en stel jezelf daarbij de volgende vragen:
- Zijn de componenten op een aansprekende manier gestructureerd?
- Biedt het gridsysteem de gewenste opties?
- Hoe belangrijk is de ondersteuning van oudere browserversies?
- Voldoet de verscheidenheid aan CSS- en JavaScript-modules aan de eisen?
- Is de omvang van de codes (gecomprimeerd en niet-gecomprimeerd) in verhouding?
- Heb je grote vrijheid nodig bij het bewerken van de codes? Zo ja, welke mogelijkheden biedt het UI-framework?
- Hecht je waarde aan een grote community (verder ontwikkelen, extensions, templates, fora, tutorials, enz.)?
Als je twijfelt tussen verschillende Bootstrap-alternatieven is een blik in de online handleidingen aan te bevelen. Daar zijn de modules vaak op een rij gezet met duidelijke codevoorbeelden. Nog sneller kan je de mogelijkheden van de verschillende providers ontdekken door ze zelf uit te proberen met de online tool Codeply. Daar kan je de componenten van de diverse UI-frameworks direct in de browser testen zonder dat je bestanden hoeft te hebben gedownload.
Ben je benieuwd welke mogelijkheden er naast frontend-programma's nog meer zijn, bijvoorbeeld wat betreft contentmanagementsystemen en frameworks? Lees dan eens onze artikelen over CodeIgniter, Spring (voornamelijk backend), Contao, Django en alternatieven voor Dreamweaver.