Cloud Apps Style Guide

Ex Libris Developer Network Ex Libris Cloud Apps Cloud Apps Documentation 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.

Click below to view a video on how to implement elements of the style guide:
12:19

Colors
Buttons
Form Elements
Typography
Icons
Layout
Dialogs
Alerts
Empty List
Footer
Loading
Assets & Images
Application Menu
Font Size

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">Update</button>

Form Elements

Colors for form elements are set by the included CSS and theme. Use label position before for material checkboxes. (Note: For apps created with version 0.3.0 of the CLI or greater, the appearance for material form fields is set by default. Older apps can use the standard appearance in mat-form-field .)

<mat-checkbox labelPosition="before">

Typography

Fonts are handled by the included CSS.

Icons

We use the icons from the ProQuest UX Framework, which can be browsed here. Icons can be used as follows:

<span class="uxf-icon uxf-list"></span>

When icons are used as buttons in a list, they should follow the rules as outlined in the style guide below. This functionality is encapsulated in the Cloud Apps library, and can be specified with the eca-button class.

<mat-list>
  <mat-list-item *ngFor="let item of items; index as i">
    {{item}}
    <i class="uxf-icon uxf-close eca-button" (click)="remove(i)"></i>
  </mat-list-item>
</mat-list>

Dialogs

Dialog or confirmation boxes should use the Material Dialog component, following the guidelines below.

Here’s a sample of how to implement a dialog component:

import { MatDialog } from '@angular/material/dialog';
@Component({
   ...
})
export class MyComponent {
  constructor(
    private dialog: MatDialog,
  ){}

  showDialog() {
    const dialogRef = this.dialog.open(ConfirmationDialog, { autoFocus: false });
    dialogRef.afterClosed().subscribe(result => {
      if (!result) return;
      // do something
    });
  }
}

@Component({
  selector: 'style-confirmation-dialog',
  templateUrl: 'confirmation-dialog.html',
})
export class ConfirmationDialog {
  constructor() {}
}

<h2 mat-dialog-title>Clear list</h2>
<mat-dialog-content>
  <p>Are you sure you wish to reset the list?</p>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-flat-button color="secondary" mat-dialog-close>No, keep list</button>
  <button mat-flat-button color="secondary" [mat-dialog-close]="true" cdkFocusInitial>Yes, reset list</button>
</mat-dialog-actions>

@NgModule({
  declarations: [
    ConfirmationDialog,
    ...
  ],
  entryComponents: [
    ConfirmationDialog,
  ]
})
export class AppModule { }

Alerts

Alerts appear in a dedicated space at the top of the app. The scaffolding and API include everything needed to show alerts. By default, success and info alerts disappear after 2 seconds, while error and warning alerts require the user to dismiss them. More information is available in the Alert Service documentation.

Empty List

For an empty list, use the following HTML sample:

<ng-template #emptyList>
  <div id="emptyList">
    <span class="uxf-icon uxf-list" style="font-size: 3em;"></span>
    <div>Add items to the list.</div>
  </div>
</ng-template>

#emptyList {
  max-width: 200px;
  margin: 0 auto;
  text-align: center;
}

A footer can be used in a Cloud App to show persistent navigation across pages. It should follow the guidelines below. A sample implementation is provided in this code sample:

<div id="page-container">
  <div id="content-wrap">
    This is my content.
  </div>
  <footer id="footer">
    <p>English | Español</p>
  </footer>
</div>

/* Footer */
#page-container {
  display: flex;
  min-height: 90vh;
  flex-direction: column;
}

#content-wrap {
  margin-bottom: 38px;
  flex-grow: 1;
}

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 38px;   
  background-color: #E5E5E5;
  padding: 5px 10px;
}

#footer p {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

#footer a {  
  cursor: pointer;
}

Layout

Actions buttons should appear at the top of the layout. The included CSS has a eca-actions class which provides for spacing and right-align. Primary button should be on the right. Content (including page title) appears below the buttons.

<div class="eca-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">

A Cloud App with multiple internal pages or sections can present a menu on the app home page. Each inner section should have a back button in the actions area (using the eca-actions class).

The Cloud App SDK includes a component that encapsulates this functionality:

<eca-menu>
  <eca-menu-item title="Roles" routerLink="pinyin" icon="uxf-icon uxf-users">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vulputate aliquet aliquet. </eca-menu-item>
  <eca-menu-item title="Permissions" icon="uxf-icon uxf-key">Praesent condimentum tincidunt nisi.</eca-menu-item>
  <eca-menu-item title="Details" icon="uxf-icon uxf-doc-inverse">Aliquam maximus mauris in hendrerit aliquet.</eca-menu-item>
</eca-menu>

import { MenuModule } from '@exlibris/exl-cloudapp-angular-lib';

@NgModule({
   imports: [
      ...
      MenuModule,
   ],
   ...
})