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
Download Ping
Code Block language bash git clone https://github.com/ushahidi/pingapp.git
- Follow these directions to install Foundation and Compass on your machine. *NOTE: Both Ruby and RubyGems Library are required before installation*.
- HTML/PHP markup files are located in 'application/views'
- SASS files are located in 'httpdocs/media/scss'
Updating files
** To make style changes … Do not edit the `.css` files directly **
- In your terminal navigate to the `media` folder and run `compass watch` (this will compile all `.scss` files into `css/app.css` upon save)
- Make all style changes within the individual `.scss.` files, creating new ones and importing them into `app.scss` as needed
- Now when you save your changes, your `.scss` files will compile to `css/app.css` and changes will take effect upon browser refresh
Important!!
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.
...