Styling

We used Angular Material to generate the website's theme and basic components. This page lists some general advice for keeping the styling consistent.

Components

For information on the various material components we use, look at the documentation here

Layout

For layout we generally use css grid and css flexbox

Colors

The material theme is defined in the file client/src/virtual-np-theme.scss. To access theme colors in an scss file, first import the theme:

@import 'src/virtual-np-theme.scss';

Then use the color you want with the mat-color (which accepts a color and an integer representing the shade of the color) function for primary, warning, and accent colors, e.g.

color: mat-color($virtual-np-primary, 600);

Or by just accessing the color directly for foreground and background colors:

color: $virtual-np-foreground;