Folder structure

• Components: Contains standalone components for reuse on multiple pages
• Views: Contains web pages

CSS Styling Rules

• Use CSS modules
• Use alphabetical ordering of properties
• Use lowercase for all hex colour variables
• Style components from left to right, top to bottom
• Style pages from left to right, top to bottom

CSS Naming Conventions

• Use descriptive enough names - Use the component name + child (eg. HeaderLogo), page name + section (eg. HomepageHero).

Media Queries

• Employ desktop-first design
• Apply media queries for screen-widths in decreasing order (eg. 1024px, 768px, 465px)
• All media queries should be at the bottom of css files

Making Changes

The dev branch is the live branch of the website. DON’T PUSH CODE DIRECTLY TO THE DEV BRANCH. Use the feature branch for the development of new features. Don’t create new branches. Once the changes have been made, create a pull request to merge to the dev branch. Once the code has been reviewed and the necessary changes have been made, merge the feature branch to the dev branch, merge the dev branch to the feature branch, pull the changes from the feature branch to your development machine and continue work on other features. DON’T delete the feature branch after merging.

Adding a new page

• Create a folder in the src/application/views folder with the Page’s name as the folder name
• Create two files in the folder - [Page name].jsx and styles.module.css