The Ushahidi Platform Facebook bot

Changing UI styles: introduction to the pattern library

The Platform Client uses the Pattern Library to standardize the styles and have them available in a single place that can be edited by frontend developers without advanced knowledge of AngularJS.

The Pattern Library runs as a dependency of the web client, it's included in the package.json file and is just a regular npm library. Please note that unless you specifically need to change the layout beyond what's possible in the client's codebase, or want to change styles (such as colors, fonts, etc) the pattern library will not need to be setup as a stand alone project.

Use cases for editing (or not) the pattern library

Use case: adding a new view to the client

To add new views in the Platform Client, we recommend you first check if you can compose those views with pre-existing patterns from our pattern library.

You can see the available patterns here:

Use case: changing the color palette

To change the color palette, you will need to modify the pattern library's color variables. The good thing is that all colors are defined here, and you can easily change them and see the results in the patterns before moving forward with applying the changes to the client.

Changing other styles like icons, fonts, or adding layouts

When you need completely new layouts with new styles, you will need to add or modify the pattern library.

We recommend you review the different structures in the pattern library before starting:

Setting up the pattern library for development

Find the setup guide in

Working with the pattern library

Continue reading in this chapter to get a full introduction to the pattern library.