Style Guide

This page gathers guidelines, conventions and best practices about the style/design for geli's web frontend. We default to following Material Design's style guide (required reading).

Helpful Resources

• Angular Style Guide: https://angular.io/guide/styleguide
• Material Design components for Angular: https://material.angular.io/
• Material Design Website: https://material.io/
• Material Icons Guide: https://google.github.io/material-design-icons/

Action Buttons

• Every primary action button should be blue (color="primary"):

<button mat-raised-button color="primary" (click)="somePrimaryActionFunction()" ...>Some primary action</button>

• Every action that destroys/deletes something should be red (color="warn"):

<button mat-raised-button color="warn" (click)="someDeleteActionFunction()" ...>Some delete action</button>

• Every other action button should have no color:

<button mat-raised-button (click)="someOtherActionFunction()" ...>Some other action</button>

• Cancel buttons should be to the right of the primary action
• Raised buttons (mat-raised-button) should be preferred to plain buttons
• Plain buttons (mat-button) should be used in menu bars or when containing an icon

Mobile First

We are using the "mobile first"-scheme, this means we style the website for small viewports (currently about 320px width) first. Then you can apply different stylings for wider viewports.

Example:

// Import breakpoints-scss
@import '../breakpoints';

.my-div {
  // Style for mobile
  max-width: 100%;

  @include bp(md) {
    // Style for intermediate viewports
    max-width: 60%;
  }

  @include bp(bg) {
    // Style for big viewports
    max-width: 30%;
  }
}

Styles which are used in several components

... should be implemented in one of the following places:

• https://github.com/h-da/geli/tree/develop/app/webFrontend/src/app/shared
• https://github.com/h-da/geli/tree/develop/app/webFrontend/src/styles

Nighttheme

Use default background and text color, or add an appropriate color to nighttheme.

.nightTheme {
  @include angular-material-theme($app-night-theme);
  background-color: #303030;
  color: #ffffff;

  a:link:not(.mat-button):not(.logo) {
    color: map-get($app-night-primary, A100)
  }

  a:visited:not(.mat-button):not(.logo) {
    color: map-get($app-night-primary, A200)
  }

  mat-option.mat-selected {
    color: map-get($app-night-primary, A100) !important;
  }

  .answers{
    background-color: map-get($mat-grey, 800) !important;;
  }
}

https://github.com/h-da/geli/tree/develop/app/webFrontend/src/styles.scss