Layoutaanpassingen met behulp van CSS-variabelen II:
een uitgebreid voorbeeld

In het item Variabelen in CSS wordt uit de doeken gedaan wat CSS-variabelen zijn en wat je er mee kunt. Op deze pagina wordt een uitgebreid voorbeeld getoond van het gebruik ervan.

Deze code is overgenomen uit Webdesigner Magazine 99 (november 2017), pag. 72 e.v.
Dit blad wordt sinds eind november 2017 niet meer gemaakt.

Het voorbeeld zelf is gemaakt door Luke Harrison, een webdeveloper uit Sheffield, UK.

Het voorbeeld wordt getoond om de mogelijkheden te tonen, verder niet. De code is niet beschikbaar als download. Er wordt geen ondersteuning voor gegeven.

De voorbeeld-pagina heeft een palet van 5 kleuren. Bovenaan in het voorbeeld zie je vijf vierkante knoppen met de vijf kleuren van het palet. Daarnaast staat een 'Save'-knop. Als je op een vierkante knop klikt kun je die kleur aanpassen met een kleurenkiezer. Zie ook het item Over <input type="color">.
Na het veranderen van een kleur zie je dat direct.

Als je vervolgens op 'Save' klikt, worden de kleuren opgeslagen in de Local Storage van je browser. Als je de site de volgende keer opent, zijn de aangepaste kleuren onthouden. Defaults zijn #2f353e, #2b9bca, #f3583f, #e0e1e2 en #ffffff.
Zie het item Kleurcodes voor tekst, links en achtergrond voor meer info over kleuraanduidingen.

Local Storage wordt ook wel Web Storage genoemd. In het item HTML Web Storage: Wat het is en hoe je het kunt gebruiken vind je informatie over die techniek.

Er is ook een blok 'Colums'. met daarbij de cijfers 1, 2, 3 en 4. Daar kun je instellen in hoeveel kolommen de blokken met informatie worden gepresenteerd. De instelling wordt ook onthouden in Local Storage. Default is 3 kolommen.

Opmerking:
 
Een algemeen verhaal over CSS-variabelen vind je in het item Variabelen in CSS.
 
Een eenvoudigerer voorbeeld staat in het item Layoutaanpassingen met behulp van CSS-variabelen.