Style Guide

Defining CSS Variables

If you want to add a new color you need to add it in 2 places

• assets/css/variables.css
• uno.config.js

Css variables are defined in 2 places inside the assets/css/variables.css file and inside the uno.config.js file. They are defined twice so that we can manipulate them with-in other styles sheets allowing us to create themes, being in the uno config allows us to use them to create dynamic colors for buttons, borders, backgrounds etc.

Dark Mode

The reason we have the variables inside the assets/css/variables.css is that we can apply a class of .dark-mode to the document and it will update all the variables within the style-sheet.

Css Components

All components live inside assets/css or are defined as shortcuts inside the uno.config.

Any selector that is used inside components folder cannot have more than one level of specificity. To allow for regular styling we use :where() selectors through out as they do not carry specificity.

Why do we do this? Its allows us to define nested styles that can then be overwritten by utility classes

Icons

Currently all font-awesome icons are placed inside the /public/fa/ folder and just imported directly in. I think there should be a better way of doing this.