Cloud Apps Style Guide

This Cloud Apps style guide is intended to provide users with a consistent experience across apps. Some of these styles are handled automatically by CSS included in the Cloud App project and by the Angular Material theme styles. Others will require you to take these guidelines into consideration when you build your app. Guidelines which must be implemented in your code include a code sample below.

Colors

Colors are set by the included CSS and theme.

Buttons

Button colors are set by the included CSS and theme. However, you should use the mat-flat-button attribute and indicate whether the color should be primary or secondary.

<button mat-flat-button color="primary">

Form Elements

Colors for form elements are set by the included CSS and theme. However, you should use the standard appearance for material form fields and use label position before for material checkboxes.

<mat-form-field appearance="standard">

<mat-checkbox labelPosition="before">

 

Typography

Fonts are handled by the included CSS.

Icons

We use the material icon library which can be browsed here.

Layout

Actions buttons should appear at the top of the layout. The included CSS has a cloudapp-actions class which provides for spacing and right-align. Primary button should be on the right.

<div class="cloudapp-actions">
  <button mat-flat-button color="secondary" [routerLink]="['/']">Cancel</button>
  <button mat-flat-button color="primary" (click)="update()">Update</button>
</div>

Cloud App Standard Layout

Cloud App Full Screen Layout

Loading

To provide and indication to the user that the page is loading, you can use a div with the provided class called loading-shade and a standard mat-progress-spinner control.

<div class="loading-shade" *ngIf="loading">
  <mat-progress-spinner mode="indeterminate" diameter="50"></mat-progress-spinner>
</div>

 

Assets & Images

When published to the Ex Libris platform, Cloud App are served under a sub-directory rather than the root directory. Therefore, assets such as images should be referenced with a relative link (./assets/...), such as:

<img src="./assets/my-image.png">