POC: Dynamische stijling

Workshop : Proof of Concept

Aanleiding

Vanuit de iteratieve design fase zijn ontwerpen  gekomen die met kleine aanpassingen de complete look en feel van een pagina kunnen veranderen. Met het aanpassen van beeld, kleuren en typografie verander je de gehele look in slecht enkele minuten. Dit is Adobe XD getest hoe dit in zijn werk  gaat, er is onderzoek gedaan hoe dit in code het beste kan. Echter moet nu nog alleen getest worden hoe dit daadwerkelijk in zijn werking treed.

 

https://github.com/Casie150/horecaartje

Onderzoeksvraag:
Hoe bouw je een tool waar de look & feel gemakkelijk aanpasbaar is?

Doelen

  • ACF gebruiken om stijling aan te passen
  • HEX naar HSL script

Resultaten

Hoe bouw je CSS code op zodat de look en feel gemakkelijk aanpasbaar is in de back-end? Het antwoord daarop is voor de meeste onderdelen heel simpel, namelijk ACF. Met ACF kan je zelf variables aanmaken die je via de backend kan aanpassen. Deze roep je dan aan via PHP in je HTML-code op. Een goed voorbeeld hiervan is het inladen van andere lettertypes. Hieronder een code voorbeeld hoe dit is opgebouwd.

<!-- Google Font URL dynamisch aanpassen -->
<?php $horekaartjeFont = get_field('google_font_link', 'option'); ?>
<?php if( $horekaartjeFont ) : ?>
   <link href="<?php the_field('google_font_link', 'option'); ?>" rel="stylesheet">
<?php endif; ?>

<!-- CSS var aanroepen met de fontnaam -->
<style>
body{
   <?php $horekaartjeFontName = get_field('google_font_name', 'option'); ?>
      <?php if( $horekaartjeFontName ) : ?>
         --header-font: <?php the_field('google_font_name','option'); ?>;
      <?php endif; ?>
   }
</style>


<!-- CSS var root om altijd een fallback font te hebben -->
:root{
--header-font: 'merriweather';
}

<!-- CSS var aanroepen in SCSS zodat hij in de code meeveranderd -->
$header-font:  var(--header-font) !default;

Het aanpassen van kleuren bleek een stukje complexer te zijn, daarom   leg ik het liever uit via een video. Waarin ik de complexiteit beschrijf. Onder de video zal ik de code toevoegen zat deze ingezien kan worden.

// Strip Highlight Saturation vanuit de HEX


function hexToHsl($hex){
    $red = hexdec(substr($hex, 0, 2)) / 255;
    $green = hexdec(substr($hex, 2, 2)) / 255;
    $blue = hexdec(substr($hex, 4, 2)) / 255;


    $cmin = min($red, $green, $blue);
    $cmax = max($red, $green, $blue);
    $delta = $cmax - $cmin;


    if ($delta == 0) {
        $hue = 0;
    } elseif ($cmax === $red) {
        $hue = (($green - $blue) / $delta);
    } elseif ($cmax === $green) {
        $hue = ($blue - $red) / $delta + 2;
    } else {
        $hue = ($red - $green) / $delta + 4;
    }


    $hue = round($hue * 60);
    if ($hue < 0) {
        $hue += 360;
    }


    $lightness = (($cmax + $cmin) / 2);
    $saturation = $delta === 0 ? 0 : ($delta / (1 - abs(2 * $lightness - 1)));
    if ($saturation < 0) {
        $saturation += 1;
    }


    $lightness = round($lightness*100);
    $saturation = round($saturation*100);


     return "${hue}, ${saturation}%";


}


// strip HUE vanuit de HEX


function lightness($hex){
    $red = hexdec(substr($hex, 0, 2)) / 255;
    $green = hexdec(substr($hex, 2, 2)) / 255;
    $blue = hexdec(substr($hex, 4, 2)) / 255;


    $cmin = min($red, $green, $blue);
    $cmax = max($red, $green, $blue);
    $delta = $cmax - $cmin;


    if ($delta == 0) {
        $hue = 0;
    } elseif ($cmax === $red) {
        $hue = (($green - $blue) / $delta);
    } elseif ($cmax === $green) {
        $hue = ($blue - $red) / $delta + 2;
    } else {
        $hue = ($red - $green) / $delta + 4;
    }


    $lightness = (($cmax + $cmin) / 2);



    $lightness = round($lightness*100);


     return "${lightness}%";


}

In de header wordt het variable dan overschreven door de nieuwe kleur code uit het CMS.

<style>
            body{
                <?php $horekaartjeFontName = get_field('google_font_name', 'option'); ?>
                <?php if( $horekaartjeFontName ) : ?>
                    --header-font: <?php the_field('google_font_name','option'); ?>;
                <?php endif; ?>
                --global-color: <?php $hex = get_field('horecaartje_theme_color', 'option'); $hex = str_replace('#', '', $hex); echo hexToHsl($hex); ?>;
                --lightness: <?php $hex = get_field('horecaartje_theme_color', 'option'); $hex = str_replace('#', '', $hex); echo lightness($hex);  ?>;
                --theme-color: hsl(var(--global-color), var(--lightness));  
                --theme-color-darker: hsl(var(--global-color), calc(var(--lightness) - 10%));
                --theme-color-lighter: hsl(var(--global-color), calc(var(--lightness) + 10%));
            }
</style>

In de SCSS variables worden deze van uiteindelijk via een CSS var toegevoegd om de code in de SCSS aan te passen zonder dat de SCSS opnieuw gerunt moet worden.

:root{
    --theme-color: 34, 32%, 55%;
    --header-font: 'merriweather';
}


$theme-color            : var(--theme-color) !default;
$theme-color-lighter    : var(--theme-color-lighter) !default;
$theme-color-darker     : var(--theme-color-darker) !default;

Conclusie

Via een paar simpele ACF variables kunnen teksten en lettertypes door het gehele systeem aangepast worden. De kleuren worden nu omgezet naar HSL zodat de donkere en lichte kleuren vanuit het ontwerp dynamisch meegenomen worden in de webpagina.