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
  • Where does the UI fit within the Pattern Library?
  • HTML
  • Creating the HTML for a new component
  • Creating a new layout template.
  • Sass
  • Styling the new component
  1. Front-end development
  2. Changing UI styles: introduction to the pattern library

Create a New Component from Scratch

PreviousIconsNextRead Direction

Follow these steps when creating a new UI component.

Where does the UI fit within the Pattern Library?

The Platform Pattern Library is modeled after Brad Frost's , where smaller UI elements make up bigger elements which are then combined to create full pages. In Atoms are used to create Molecules, which create Organisms, which create Templates, all of which come together to create Pages. In the Pattern Library we follow the same methodology but with Basics, Fragments, Modules, and Blocks being used to create Layouts.

So the first thing that needs to be determined is where the new UI fits withing this methodology. Is it a small compenent? Or is it a bigger component made up of other smaller components? Once the appropriate structure is determined, you will be able to create the HTML and Sass accordingly.

HTML

Each UI component exists in either , , , or with each having their own (links to basic's index.html).

Creating the HTML for a new component

  • add the new html component to the appropriate file above.

  • add a link in that page's nav and link it to the new html component on that page.

  • use that page's existing html and nav as a guide.

Creating a new layout template.

are compiled via .

  • create a new file . (use existing html files as a guide)

  • create a handlebars file .

  • add the appropriate html for the layout to the new .hbs file.

  • link to the new layout .html file .

Sass

Styling the new component

Sass files are structured using the same methodology as above.

The Platform Pattern Library uses to compile Css.

create a new .scss file in the.

@import that file to ****

Atomic Design
Atomic Design
Basics
Fragments
Modules
Blocks
index.html file
Layouts
Handlebars
here
here
here
Sass
Sass directory
/assets/sass/style.scss