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
  • Setting up the pattern library for development
  • But how do I test my new styles in the Platform?
  • Further reading
  1. Development & Code
  2. Setup Guides

Setting up the Pattern Library for development

PreviousMigration from AngularJSNext[API & Client] Bundled release install

Setting up the pattern library for development

The pattern library holds all styles for the platform-client and its here changes to the css is made.

Note: If you are not planning to change the css for the Platform-client, you do not need to follow this guide.

Clone the pattern library

git clone https://github.com/ushahidi/platform-pattern-library.git;

Install the dependencies.

cd platform-pattern-library;
npm install;

Run gulp build to generate the fonts and compile the sass the first time.

gulp build

Start the pattern library in by running:

gulp

Once the pattern-library is running, the front-end guidelines and a guide on how to work with the pattern-library and its structure can be found on

But how do I test my new styles in the Platform?

The pattern-library is installed as a npm-package in the Platform Client. For development, it is not suitable to publish a package for each change, and luckily, there is hack you can do to test the styles locally instead.

  1. Make sure the Pattern-library is built through running gulp build in the terminal

  2. Copy all contents in the "assets" folder

  3. Go to your Platform-client folder

  4. Navigate to node_modules/ushahidi-platform-pattern-library folder

  5. Remove the contents in the "assets" folder

  6. Paste the contents you copied from the assets-folder in the pattern-library

  7. Done! Now you should be able to see the changes in the Platform Client

Further reading

After setup, please read the guidelines when working with the Platform Pattern Library.

http://localhost:8000
http://localhost:8000/assets/html/front-end-guidelines/introduction.html
Platform Pattern Library