Skip to main content

Styles Scaffolding

For global SCSS only.

A styles folder on the root of the project should contain the following files and folders:

Fonts​

Where all font-faces are defined. If you need to import a new font you should add the definition here.

Functions​

Where all global helper functions are defined. For example we have set all the typography helpers that convert px to rem or em.

Mixins​

Where all global custom mixins should be defined.

Utilities​

Where all custom css classes should be defined to help you to standardize the styles of your app.

Variables​

Where all variables should be defined. e.g.: colors, breakpoints, etc.

Vendor​

Where all 3rd party styles files should be imported.

index.scss​

Where all global styles should be imported. This is the entry point of the global styles. It's imported just once, and encapsulates every other scss file.

shared.scss​

Where all shared styles should be imported. This is imported automatically in each component so you should add here scss that doesn't generate css until used. This file is imported multiple times.