9. Css rules

Overview

This document goes over the SCSS guidelines used in this project. Following these instructions and tips ensures clarity in our development process. All the files related to styling can be found from src/app/_styles.

Themes

Inside the themes folder one can find dark.scss, light.scss and main.scss files. Please use the variables from main.scsswhen defining colors and other attributes to maintain consistency troughout the website. dark.scss and light.scssfiles are deprecated for now so do not use them.

Variables

Inside the variables folder one can find _mixins.scss and global.scss. Here are some instructions on what each of their purpose is and what they contain.

Globals

Global styles define universal design elements that apply across an entire application. They ensure consistency in appearance and behavior by centralizing style rules, including typography, colors, layout dimensions, and more. The :root selector applies the variables globally, making them accessible in any SCSS file in the project. The global.scss file contains static syles and values which are globally accessible.

Changes to this file will cascade throughout the application, impacting all components and pages. global.scssis the backbone of styling in this project, so be careful if you need to make changes to this file.

Mixins

_mixins.scss serves as a repository for reusable styles and patterns that can be applied across the application. By centralizing style logic in mixins, this file promotes code efficiency, maintainability, and consistency. Mixins allow you to encapsulate complex styling rules that are often hard to maintain if repeated throughout the codebase. For example breakpoints are an important part of the mixins. If the styling varies based on certain conditions (e.g., type of element or screen size), _mixins.scss is the right choice.

Breakpoints

You can find the breakpoints used in this project from the _mixins.scss file. Breakpoints are specific screen widths at which a website layout adjusts to provide an optimal viewing experience on different devices. To dynamically generate breakpoint values used in media queries, use SCSS functions.

Fonts

In Figma Design we only use DM_Sans and MarkoOne-Regular, but never Urbanist.

Usage examples in SCSS:

• DM_Sans font: var(--font-dm-xl);
• DM_Sans Bold font: var(--font-dm-bold-xl);
• MarkoOne font: var(--font-sw-xl);

See global.scss for all variables.

Note:

• In some edge-cases, override font-size values and choose the visually closest variable to the Figma Design.
• In some edge-cases the font-line may cause issues where its acceptable to be overridden.