Stylesheets

The app is styled using scss, and based on the Bootstrap 5 components.

You can find out more about the Bootstrap 5 components here. Specifically, the examples currently in use use react-bootstrap which is a great library for quickly adding the Bootstrap components.

Custom SCSS

To add custom SCSS, you can design how you want you app to look using any good Bootstrap Builder. This is a good place to start for example.

Inspiration can be found on the Bootswatch pages, and if you want to use one as a base, you can click on 'Free Themes' on the builder above, and choose to customise the theme you like.

Once you are happy with the styling, you should click 'Export Theme' to download the 2 required files:

1. _variables.scss
2. custom.scss

These should be placed in app/frontend/src/scss to overwrite the existing _variables.scss and custom.scss files there. They will be picked up, and combined with the bootstrap styling in the global.scss file, which is already imported into the main app.