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
  1. Front-end development
  2. Changing UI styles: introduction to the pattern library

Using the changed styles in platform-client

PreviousHow to Apply to the PlatformNextSyntax and Formatting

Make the changes you need in the css in the Pattern Library.

  1. If you have made changes to the html or added new classes, you need to make those changes in the html in the Platform Client as well

  2. Commit and push to your fork of the Pattern Library.

  3. In the directory where you cloned the platform-client repository for local development, go to package.json.

  4. Find the entry for ushahidi-pattern-library

  5. Change to the url to the new repository + the new pattern library commit id in this format: "ushahidi-platform-pattern-library":"git://github.com/{your-own org}/ushahidi-platform-pattern-library-sivico.git#{commit}"

  6. Do npm install in the platform-client

  7. Go to platform-client/node_modules/ushahidi-pattern-library

  8. Run npm install there too (this step is normally made by npm when using the Ushahidi-release so you need to do it yourself when using your own code)

  9. Now the Pattern Library is available in the platform-client development environment. To make the changes visible in your development environment, run gulp build in the platform-client again.

  10. The css changes should be visible in the client now .

Pattern Library: publishing a new version in your npm account and using it in the platform web client

Please note, the complete, most up to date information on how to publish and use npm is available in the npm documentation, .

  1. Go to package.json in your version of the Pattern Library

  2. Change the name of the package to something else (for example "YourProjectName-Pattern-Library")

  3. Keep the version number unless you already made changes. If you made any changes, you should bump the version number.

  4. Publish the package to npm through npm publish

  5. In platform-client, go to the file: package.json

  6. Find “ushahidi-pattern-library” and change to "YourProjectName-Pattern-Library": "v3.12.4" (substitute version number to the one you published)

  7. Do npm-install and gulp build again

  8. Each time the pattern-library is updated:

    1. Change the version-number in YourProjectName-Pattern-Librarys package.json

    2. Do npm publish

    3. Update to the new version-number in package.json in platform-client

  9. Do npm install and gulp build in the platform-client again.

https://docs.npmjs.com