11 januari, 2016

Bootstrap biedt Synetic de handvatten om onze Drupal projecten zo efficiënt mogelijk te designen. De release van Bootstrap 4 biedt ons hierin nog meer mogelijkheden, vooral op het gebied van mobile design.

Wat is Bootstrap?

Bootstrap is het bekendste en meest gebruikte framework binnen front-end development en werkt direct out-of-the-box.

Het is een zeer handige tool om CSS elementen van een website mee te bouwen en volledig aan te passen. Het Bootstrap framework stelt ons zodoende in staat om heel efficiënt front-end onderdelen voor onze Drupal projecten te ontwikkelen. Denk aan:

  • Grid lay-outs
  • Pagina lay-outs
  • JavaScript functionaliteiten
  • User Interface

Bootstrap 4 Drupal lay-out

Wat is er nieuw in Bootstrap 4?

Op 19 augustus 2013 werd Bootstrap 3 gereleased en sindsdien door Synetic bij de meeste projecten gebruikt. Een vraag die de afgelopen tijd steeds vaker door onze klanten werd gesteld was de keuzevrijheid in het tonen van de website op mobiele apparaten. Zeker omdat Drupal 8 een zogeheten ‘mobile first’ platform is.

Bootstrap 3 bood hier niet direct een oplossing voor, maar met het uitbrengen van Bootstrap 4 op 20 augustus 2015 (in alpha) krijgen wij hiervoor de juiste handvatten.

Bootstrap 4 geeft bijvoorbeeld nog meer mogelijkheden hoe elementen worden getoond op mobiele apparaten. Zowel voor de front-end als de back-end levert dit een verbeterde gebruikerservaring op. 

Zo is er in Bootstrap 4 een extra breekpunt bijgekomen. Dit betekent dat er nog meer verschillende lay-outs gebruikt kunnen worden om een website op mobiele apparaten te tonen. Een website wordt daardoor op mobiele apparaten zowel staand als liggend op de juiste manier getoond en de volledige breedte optimaal benut.

Bootstrap 4 vs Bootstrap 3 Drupal

Geen ondersteuning IE8

Bootstrap 4 ondersteunt niet langer Internet Explorer 8. Dit betekent dat websites in deze browser nog wel getoond worden, maar dit verre van optimaal is.

De reden dat Bootstrap 4 IE8 niet langer ondersteunt is dat het gebruik van de browser het afgelopen jaar fors is gedaald en alleen maar verder zal afnemen door de komst van Microsoft’s nieuwe browser Edge.

Ook Drupal 8 ondersteunt IE8 (en lager) niet meer en biedt Synetic onder meer de mogelijkheid om efficiëntere CSS en JavaScript codes te schrijven.

REM

Een andere belangrijke verandering in Bootstrap 4 is dat er niet langer wordt gewerkt met pixel of percentage gebaseerde meeteenheden. In plaats daarvan is overgestapt naar REM gebaseerde CSS eenheden.

REM wil zeggen dat de maat relatief is van de algemene grootte van de website. Stel dat een HTML-pagina 10 pixels is, dan krijgt de koptekst 1.4REM en wordt daardoor 14 pixels groot.

Mobiele apparaten hebben vaak een kleiner scherm en daardoor wil je dat alle designelementen ook op de juiste manier worden geschaald. Met REM kun je heel snel en eenvoudig aangeven dat, in plaats van een specifiek onderdeel, de pagina als geheel kleiner moet worden.

Bootstrap 4 Drupal Mobile

JavaScript plugins herschreven

In Bootstrap 4 zijn alle JavaScript codes voor plugins herschreven. Hierdoor is het framework sneller en gemakkelijker te gebruiken binnen websites. Dit zorgt het voor een significante verbetering in de gebruikerservaring.

SASS integratie

Een van de belangrijkste veranderingen voor Synetic is dat Boostrap 4 is omgeschreven naar SASS (Syntactically Awesome Stylesheets).

Dit is een CSS extensie die ervoor zorgt dat we sneller en gemakkelijker onderdelen kunnen designen met minder code. Daarnaast kan dezelfde code eenvoudig hergebruikt worden op andere plekken binnen de website. SASS zet daarbij de code om naar CSS, waardoor browsers de code kunnen lezen en ervoor zorgt dat een website op de juiste manier wordt getoond.

Synetic zet SASS al langere tijd in voor projecten en stelt ons in staat om nette en overzichtelijke code te schrijven. Doordat Bootstrap 4 is omgezet naar SASS zal Synetic dit bij nieuwe projecten volledig kunnen integreren binnen het thema. Hierdoor is er (nog) minder code aanwezig, wat onder meer de laadtijd van website verder verbetert.

Wachten op officiële release Bootstrap 4

Bootstrap 4 is vooralsnog in alpha, maar wij omarmen de veranderingen en kijken reikhalzend uit naar een stabiele release die wij optimaal kunnen gaan inzetten voor nieuwe projecten!

Heb je vragen over Bootstrap 4 en de mogelijkheden die het voor jouw Drupal website kan bieden? Neem dan gerust contact met ons op.