Customisation

cwf-lite uses css variables with defaults, this means that it will work out for the box (but won’t look very good). However, should you wish to change a css property you can update the variable in your project css. There are three main ways of doing this:

In the css selector

.elementclass {
  --element-background: red;
}

In the :root

:root {
  --element-background: red;
}

In the css selector as an explicit style

Not recommended!

Whilst this approach will work, it’s not very modern and is a bit of a blunt instrument.

.element {
  background: red;
}

Adding Styles

You can also build on the basic styles laid out in cwf-lite, for example, in your project you might have a css file that adds styles to the basic .button class.

<button class="button" type="button">Standard button</button>
<button class="button button--success" type="button">Success button</button>

.button {
  &.button--success {
    --button-background: hsl(141deg 71.3% 47.8%);
    --button-border-color: hsl(141deg 71.3% 47.8%);
    --button-border-radius: 2rem;
    --button-color: #fff;

    --button-hover-background: hsl(141deg 71.7% 42.9%);
    --button-hover-border-color: hsl(141deg 71.7% 42.9%);
    --button-hover-color: #fff;

    --button-focus-background: hsl(141deg 71.7% 42.9%);
    --button-focus-border-color: hsl(141deg 71.7% 42.9%);
    --button-focus-box-shadow: 0 0 0 0.25em hsl(141deg 71.3% 47.8% / 0.125);
    --button-focus-color: #fff;

    --button-active-background: hsl(141deg 71.7% 42.9%);
    --button-active-border-color: hsl(141deg 71.7% 42.9%);
    --button-active-box-shadow: 0 0 0 0.25em hsl(141deg 71.3% 47.8% / 0.25);
    --button-active-color: #fff;
  }
}