1 class

variabelen voor Kleuren

                    
        body {
            --veronica-primary: #0091FF;
            --veronica-secondary: #E60063;
            --veronica-neutral: #ffffff;

            --slam-primary: #000000;
            --slam-secondary: #E60063;
            --slam-neutral: #222222;

            --sublime-primary: #1A1E1D;
            --sublime-secondary: #CCFFA3;
            --sublime-neutral: #1A1E1D;

            --honderdp-primary: #000000; 
            --honderdp-secondary: #10A637;
            --honderdp-neutral: #FAFAFA;
        }

buttons voor elke radiozender

Veronica

                    
        .veronica-button {
            background-color: var(--veronica-secondary);
            border: 1px solid var(--veronica-secondary);
    
            cursor: pointer;
        }
        
        .veronica-button:hover {
            background-color: var(--veronica-neutral);
            color: var(--veronica-secondary);
        }

Slam

                    
        .slam-button {
            background-color: var(--slam-secondary);
            border: 1px solid var(--slam-secondary);
    
            cursor: pointer;
        }

        .slam-button:hover {
            background-color: var(--slam-neutral);
            color: var(--slam-secondary);
        }

Sublime

                    
        .sublime-button {
            background-color: var(--sublime-secondary);
            border: 1px solid var(--sublime-secondary);
    
            cursor: pointer;
        }

        .sublime-button:hover {
            background-color: var(--sublime-neutral);
            color: var(--sublime-secondary);
        }

100%.nl

                    
        .honderdp-button {
            background-color: var(--honderdp-secondary);
            border: 1px solid var(--honderdp-secondary);
    
            cursor: pointer;
        }

        .honderdp-button:hover {
            background-color: var(--honderdp-neutral);
            color: var(--honderdp-secondary);
        }

Voorbeeld in werking

2 classes

Classes maken en gebruiken

Dit zijn de CSS classes die alleen de kleuren hebben

classes voor veronica

                    
        .veronica-primary {
            --brand-primary: #0091FF;
        }
        
        .veronica-secondary {
            --brand-secondary: #E60063;
        }

        .veronica-neutral {
            --brand-neutral: #ffffff;
        }

classes voor slam

                    
        .slam-primary {
            --brand-primary: #000000;
        }
        
        .slam-secondary {
            --brand-secondary: #E60063;
        }

        .slam-neutral {
            --brand-neutral: #222222;
        }

classes voor sublime

                    
        .sublime-primary {
            --brand-primary: #1A1E1D;
        }
        
        .sublime-secondary {
            --brand-secondary: #CCFFA3; 
        }

        .sublime-neutral {
            --brand-neutral: #1A1E1D; 
        }

classes voor 100%.nl

                    
        .honderdp-primary {
            --brand-primary: #000000; 
        }
        
        .honderdp-secondary {
            --brand-secondary: #10A637;
        }

        .honderdp-neutral {
            --brand-neutral: #FAFAFA;
        }

Dit zijn de classes met CSS properties om de HTML elementen aan te passen

classes met CSS properties

                    
        .primary {
            background-color: var(--brand-primary);
        }
        
        .secondary {
            background-color: var(--brand-secondary);
        }

        .neutral {
            background-color: var(--brand-neutral);
        }
`

Hoe geef je een achter grond kleur aan een element?

2 classes in gebruik

                    
        /*primaire achtergrond kleur*/
        <header class="primary veronica-primary">
        </header>

        /*Secundair achtergrond kleur*/
        <div class="secondary veronica-secondary">
        </div>

Hoe werkt dit?

De classes die eindigen op 'primary' hebben allemaal dezelfde variabelenamen, maar hebben allemaal een andere kleur opgeslagen. de classes primary, secondary en neutral hebben alleen een CSS property, 'background-color'

- classes met de benaming veronica-primary, slam-primary, honderdp-primary en sublime-primary. hebben alleen de kleuren opgeslagen

- en de classes primary, secondary en neutral hebben alleen een CSS property

- Om een achtergrond kleur aan te passen moet de class primary aanwezig zijn. De tweede class kan dan veronica-primary, slam-primary, honderdp-primary of sublime-primary zijn.

Waarom werkt dit?

- De class primary accepteert alleen var(--brand-primary) als variabel

- Deze variabel komt voor in veronica-primary, slam-primary, honderdp-primary en sublime-primary

- Als primary veronica-secondary ingevoerd wordt, dan gebeurt er niks. Omdat de class veronica-secondary alleen var(--brand-secondary) als variabel accepteerd

- Dus als je veronica-secondary wilt gebruiken, dan moet je dat zo aangeven: secondary veronica-secondary

Waarom is dit handig?

Als ik nu een button wil toevoegen dan heb ik de kleuren al opgeslagen in classes. En omdat elke class dezelfde variabel heeft, is het mogelijk om 1 button te maken die voor alle 4 radiozenders zal werken

nieuwe button met hover maken

                    
        .button-highlight {
            background-color: var(--brand-secondary);
            border: 1px solid var(--brand-secondary);
        
            cursor: pointer;
        }

        .button-highlight:hover {
            background-color: var(--brand-neutral);
            color: var(--brand-secondary);
        }

Voorbeeld in werking

nieuwe hover kleur voor de button

Om de hover achtergrond kleur van zwart naar wit te veranderen. is het niet nodig om de class button-highlight of button-highlight:hover in CSS aan te passen

In CSS je kan een nieuwe class maken met var(--brand-neutral) en een witte kleur

                    
        .btn-highlight {
            --brand-neutral: #ffffff;
        }

in HTML moet je dan alleen slam-neutral veranderen naar btn-highlight