Platform Contributor Guide
[Legacy v3] Platform
[Legacy v3] Platform
  • 👋[Legacy v3] Welcome | README
  • Contributing | Getting Involved
    • Specific tasks needed for COVID19-support
    • Add code to Ushahidi
    • Encouraging contribution from non-developers
  • Frequently Asked Questions
  • Join the Ushahidi community
  • Contributors ✨
  • 🛣️ The Ushahidi Platform Roadmap
    • V2-V3+ Migration tool
  • Privacy and security best practices
    • Security as a user
    • Security for deployment admins
    • Security for deployment hosts
  • Development & Code
    • Development: Overview
    • How to get the source code
    • Setup Guides
      • Installing for production environments
      • Development environment with XAMPP
      • Development environment setup with Vagrant
      • [Client] Setting up the Platform Client for development
        • Migration from AngularJS
      • Setting up the Pattern Library for development
      • [API & Client] Bundled release install
    • Add code to Ushahidi
    • Development process
    • Coding Standards
    • Track and submit issues in Github
    • Upgrading Ushahidi
      • Upgrading to latest release
      • Upgrading from V3.x.x to V4.x.x
    • ⚙️ Installation Helper‌
  • Tech Stack
    • API Documentation
    • Third party app development
      • Web hooks
    • Database | Tables overview
    • Database | Database Schema Diagram
    • Database | Table details
    • 📐Architecture
    • Use case internals
  • QA & Testing
    • The QA process
    • How to run QA tests
    • Defect Management
    • How to write QA test scripts
    • Hotfixes
  • Front-end development
    • Changing UI styles: introduction to the pattern library
      • File-structure
      • Installing new packages
      • How to Apply to the Platform
      • Using the changed styles in platform-client
      • Syntax and Formatting
      • Grid, Breakpoints, & Media Queries
      • Variables
      • Mixins
      • Helpers
      • Icons
      • Create a New Component from Scratch
      • Read Direction
  • Design
    • 🎨Design: overview
    • 'Best practice' design
    • Ushahidi Platform 'Sticker Sheet'
    • User testing process
    • User testing script examples
    • Synthesising user testing results examples
      • Synthesis example 1
      • Synthesis example 2
      • Synthesis example 3
      • Synthesis recommendations example 1
      • Synthesis recommendations example 2
    • Open Source Design
  • Documentation
    • Documentation
    • Contributing docs via GitHub
  • Translation
    • Localization and Translation
  • The Ushahidi Platform Facebook bot
    • The Facebook bot
      • Installing the bot
      • The bot script
  • Hackathon and events
    • Installathon, May 2019
      • Welcome to the hackathon!
    • Write/Speak/Code 2019
    • Open Design: Bangalore
    • Open Design: Taipei
    • 📑Google season of docs
    • 💻Google Summer of Code
      • GSoC 2024
  • Enhancement Proposals
    • Exchange Format
    • Importing data from previous versions
Powered by GitBook
On this page
  • Use cases for editing (or not) the pattern library
  • Use case: adding a new view to the client
  • Use case: changing the color palette
  • Changing other styles like icons, fonts, or adding layouts
  • Setting up the pattern library for development
  • Working with the pattern library
  1. Front-end development

Changing UI styles: introduction to the pattern library

PreviousHotfixesNextFile-structure

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 . 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.

Setting up the Pattern Library for development
regular npm library
The Ushahidi Platform Pattern Library
The Ushahidi Platform Pattern Library
The Ushahidi Platform Pattern Library