Getting started with Clarity Design System

Posted on by Roger Versluis.

Introduction

We will have a look at the VMWare Clarity Design System and how to implement a basic layout in our web application.

Clarity Design System

In this series we will be looking at a relative new framework designed by VMWare called the Clarity Design System.

Project Clarity is an open source design system that brings together UX guidelines, an HTML/CSS framework, and Angular components. Clarity is for both designers and developers.

Clarity consists of various high performance native Angular components and a full design spec, you can use the Sketch libraries to sketch out your app before doing any coding.

In comparison with other popular design systems, Clarity is more opinionated and has strong UX guidelines. This allows us to create an application with a nice looking UI in a matter of seconds.

Getting Clarity

To start using Clarity in our web application open the client folder in VSCode and open the terminal. Now execute the following:

ng add @clr/angular

What this will do is not only install the correct NPM packages but also add the correct modules to the app.module.ts file and make the necessary changes to your angular.json file.

Run the application with

ng serve

and see that nothing has changed yet!

Setting up a basic layout

Clarity describes a basic layout very in the documentation so we will use parts of this boilerplate for our app.

We will leave our index.html and app.component.html as is and start by generating a new main navigation component. You can see this component as our master layout page which only contains navigation items.

ng g c main-nav

This command does: g for generate c for component and main-nav to create a MainNavComponent.

Angular will take care of scaffolding and adding the module to your app.module.ts.

After generating replace /app/home/main-nav.component.html with:

<div class="main-container">
  <header class="header-6">
    <div class="branding">
      <a [routerLink]="['/']" class="nav-link">
        <clr-icon shape="vm-bug"></clr-icon>
        <span class="title">My Angular Project</span>
      </a>
    </div>
    <div class="header-nav">
      <a [routerLink]="['/']" routerLinkActive="active" class="nav-link nav-text" [routerLinkActiveOptions]="{exact:true}">Home</a>
      <a [routerLink]="['/random']" routerLinkActive="active" class="nav-link nav-text">Random Number</a>
    </div>
    <div class="header-actions">
      <clr-dropdown>
        <button class="nav-text" clrDropdownTrigger>
          Logged in name goes here
          <clr-icon shape="caret down"></clr-icon>
        </button>
        <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
          <a [routerLink]="['/myaccount']" clrDropdownItem>My Account</a>
          <a clrDropdownItem>Log out</a>
        </clr-dropdown-menu>
      </clr-dropdown>
    </div>
  </header>
  <router-outlet></router-outlet>
</div>

After saving the browser will automatically refresh (if ng serve is still running) and you will be presented with a new layout.

For now it just displays a navigation without any content. Notice the <router-outlet></router-outlet> HTML tag? That’s a part of the Angular routing module which will display our content.

Adding some content

Let’s add 2 pages to our application to test with.

The first component is our Home component, this will be a static page without any logic.

ng g c home

Lets open /app/home/home.component.html and replace the content with the following:

<div class="content-container">
  <div class="content-area">
    <h1>Welcome to my Angular App!</h1>
  </div>
</div>

For our second component:

ng g c random-number

This will generate the RandomNumberComponent.

Lets give random-number.component.html some styling:

<div class="content-container">
  <div class="content-area">
    <h1>Press to generate a random number</h1>
    <button (click)="generate();">Generate</button>
    <h2>{{randomNumber}}</h2>
  </div>
</div>

And add some code to random-number.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-random-number',
  templateUrl: './random-number.component.html',
  styleUrls: ['./random-number.component.scss']
})
export class RandomNumberComponent implements OnInit {

  public randomNumber: number;

  constructor() { }

  ngOnInit() {
  }

  public generate(): void {
    this.randomNumber = Math.round(Math.random() * 10);
  }
}

This component generates a random number between 0 and 10 every time the button is pressed. In a future article we will get this random number from the server instead of generating it on the client.

Now we have to setup a bit of routing to make Angular understand which routes point to which components.

Open app-routing.module.ts and add the following to the routes array:

{
  path: '',
  component: MainNavComponent,
  children: [
    {
      path: '',
      component: HomeComponent
    },
    {
      path: 'random',
      component: RandomNumberComponent
    }
  ]
}

Make sure that you add MainNavComponent, HomeComponent, and RandomNumberComponent to the import list on top of the page. You can use VSCode by highlighting the component name and hitting Ctrl+Period.

After saving and running ng serve you will see your home component and the menu should take you to the random page.

Conclusion

In this article we installed the Clarity Design System and added a very basic layout with two test components. In the next article we will hook up our backend to our frontend.

To get a better feel of what Clarity all entails, browse through the documentation of Clarity to see what it all contains.