The information in this wiki hasn't been maintained for a good while. Some of the projects described have since been deprecated.

In particular, the "Ushahidi Platform v3.x" section contains information that is often misleading. Many details about this version of Platform have changed since.

This website is an extraction of the original Ushahidi wiki into a static form. Because of that, functions like logging in, commenting or searching will not work.

For more documentation, please refer to

Skip to end of metadata
Go to start of metadata

The Ping App Design Guide

PING'S UI is based on the all inclusive, crossbrowser, front-end framework Foundation and utilizes Sass, which compiles to CSS via Compass. Foundation provides Sass mixins, which are an intergral part of PING'S grid and design.

How to get started

  1. Download Ping

  2. Follow these directions to install Foundation and Compass on your machine. *NOTE: Both Ruby and RubyGems Library are required before installation*.
  3. HTML/PHP markup files are located in 'application/views'
  4. SASS files are located in 'httpdocs/media/scss'

Updating files

** To make style changes … Do not edit the `.css` files directly **

  1. In your terminal navigate to the `media` folder and run `compass watch` (this will compile all `.scss` files into `css/app.css` upon save)
  2. Make all style changes within the individual `.scss.` files, creating new ones and importing them into `app.scss` as needed
  3. Now when you save your changes, your `.scss` files will compile to `css/app.css` and changes will take effect upon browser refresh


PING is a responsive, device agnostic app, meaning it is flexible and optimized for usability regardless of the device. It looks good on desktop, mobile phones and everything in between.

It is important to know that the PING grid is semantic, meaning it is controlled via the `.scss` files, **not the HTML**. If you need to adjust or add to the grid, please do so via Sass mixins provided by Foundation. Keep the grid out of the markup and in the CSS.

When in doubt reference the existing code and the Foundation docs.


If you have any questions feel free to contact seth(at) or leave comments below.

  • No labels