Style and UI Guide

For better design, development, and User Experience.

Technologies

Across our projects we use:

For now our breakpoints are defined in app-config.ts. We use standards from common device resolutions. They are subject to change.

breakpoints: {
    // breakpoint convention: smallest to largest
    xs: 415,
    sm: 640,
    md: 760,
    lg: 1024,
  }

While we are not currently using Tailwind CSS they have good standards on breakpoints for better UI that we reference.

Note: Currently the Reporting Hub renders responsive views by changing the inital-scale property via the meta tag: <meta></meta>

For better development we want to make a note here on the difference between: screen.width and window.innerHeight

window.innerHeight value changes as the viewport changes and is true to the viewport scale.

screen.width is the value of the actual screen width.

Our Angular Applications use Angular Material, check out their docs on themeing

We also use SCSS:

.scss files to familiarize yourself with: