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
  • File Structure
  • HTML/Handlebars
  • Sass/CSS
  • Javascript
  • Structure of templates
  1. Front-end development
  2. Changing UI styles: introduction to the pattern library

File-structure

PreviousChanging UI styles: introduction to the pattern libraryNextInstalling new packages

File Structure

The Ushahidi Platform front-end is served via the . Production files are compiled via .

HTML/Handlebars

HTML templates are compiled via Handlebars. A .html template must be created in the directory, then a .hbs template must be created in the directory. Handlebars will then compile the production html into the directory.

Warning: Assets/html displaying "page not found" error

Sass/CSS

Each UI pattern gets it's own .scss file, then each of those files are organized by their respective sections (Basics/Fragments/Modules etc...) and @imported within the file.

The CSS is then compiled from to assets/css/style.css.

Javascript

Each Javascript pattern gets it's own .js file within the directory.

The Javascript is then compiled from to assets/js/app.js.

PL specfic javascript follows the same pattern but originates from

Structure of templates

Basics are the components that make up fragments. Oftentimes, a basic can't even stand on its own as a UI element (for example, a color) but it is required to create other things. All basics are just one html element.

Fragments are made up of more than one html element, but usually do not stand on their own. Fragments are combined to create modules.

Modules are standalone UI blocks, each of them complete and serving a unique purpose. Multiple modules can create a block.

Blocks are full components that can be combined to create layouts. While a block can contain multiple modules, including repeating modules, a block is never repeated in a layout.

Layouts are the structures in which blocks are placed to create pages. Each layout can be reused to create unique pages, depending on what blocks are placed in them.

Partials are files with blocks of code that appear in more than one place throughout the Pattern Library.

assets folder
gulpfile.js
pattern-library/_layouts
assets/templates
assets/html
style.scss
assets/sass/style.scss
custom
assets/js/custom
assets/js/pattern-library
Basics
Fragments
Modules
Blocks
Layouts
Partials