CSS dynamisch aanpassen

Biebonderzoek : Literature Study

Aanleiding

In de iteratieve design fase is er al  gekeken hoe het Koffiekaartje ontwerp snel omgebouwd kan worden naar een nieuw Horekaartje concept. Doormiddel van het aanpassen van simpele visuele elementen zoals: beeld, typgrafie of kleur veranderd de gehele look and feel van de website. Middels een Proof of Concept moet er gekeken worden hoe dit gemakkelijk in een online omgeving gebouwd kan worden zodat dit goed aanpasbaar is. Om niet teveel tijd kwijt te zijn met onnodige development gaat er via een literature study gekeken worden wat de beste mogelijke oplossing is om dit te realiseren.

Onderzoeksvraag:
Hoe kan je een website dynamische CSS laten inladen?

Doelen

  • Diverse methodes onderzoeken
  • Voor- en nadelen documenteren

Resultaten

Dynamic CSS PHP stylesheet
Het is mogelijk om binnen een CSS stylesheet PHP variables toe te passen. Het is dan mogelijk om zelf hexcodes via een back-end in te laden. Deze variant werkt helaas niet met SASS/SCSS. SASS wordt lokaal al gegenereerd terwijl PHP een server side proces is. Dit zou je eventueel met CSS variables wel kunnen oplossen omdat deze aanpasbaar blijven, dit zou echter wel getest moeten worden in de POC. Het nadeel is ook dat deze methode niet goed werkt met oudere browsers.

WordPress variables PHP customizer
WordPress heeft ook eigen PHP kleuren variabless die in te laden zijn. Dit moet dan echter wel via inline-css. Zoekmachines waarderen deze manier van coderen echter niet. Dit is slecht voor de indexering en het codeert rommelig. Ook moet dit via een widget ingeladen worden, widgets zitten altijd erg verstopt binnen WordPress dit werkt negatief voor de gebruiksvriendelijkheid in het CMS.


ACF kleur variables

Advanced Custom Fields een CMS  toevoeging op WordPress heeft de optie om een hexcode color picker via PHP aan te maken. In combinatie met een CSS variables binnen SASS zou dit de beste optie zijn denk ik. Met een CSS variables kan je een standaard kleur aangeven en deze erna overschrijven door iedere kleur mogelijk. Omdat SASS is omgezet naar CSS code voor het live gaat is dit niet gemakkelijk aanpasbaar, je moet dan opnieuw de SASS code runnen. Door een CSS variables toe te voegen blijft dit ten alle tijden aanpasbaar, zelfs online.

Conclusie

Om CSS kleuren aan te passen via de backend zijn er meerdere oplossingen mogelijk. Echter heeft iedere mogelijkheid zijn eigen technische implicaties. Daarom is er eerst een klein onderzoek gemaakt om de mogelijke opties af te wegen. Hieronder vertel ik per methode de voor-en nadelen om op het einde de gekozen oplossing toe te lichten. ACF lijkt me voor nu de beste optie, de WordPress optie zit te ver verstopt binnen WordPress dit gaat ten koste van de gebruiksvriendelijkheid. De PHP stylesheet optie viel gelijk af omdat hij maar door enkele browsers ondersteunt wordt. Het volgende probleem wat in de POC opgelost moet worden is om te onderzoeken hoe ik kleuren donkerder of lichter kan maken met code maar dat het toch aanpasbaar blijft in het CMS. In het ontwerp zitten namelijk donkere en lichte varianten van de themakleur verwerkt.