FOR ARCHIVAL PURPOSES ONLY

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 https://docs.ushahidi.com

Skip to end of metadata
Go to start of metadata

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

Install Dependencies

Compass

Follow these directions to install Compass on your machine.

NOTE: Both Ruby and RubyGems Library are required before installation.

Install Grunt and grunt plugins

You'll need nodejs and npm installed.

In terminal run:

cd modules/UshahidiUI
npm install -g grunt-cli
npm install

Install Ushahidi 3.0

Follow the install instructions

Directory Structure

  • All design files are located in modules/UshahidiUI/media

  • HTML files are located in modules/UshahidiUI/media/js/app/templates

  • Sass files are located in amu/modules/UshahidiUI/media/scss

How to make style changes?

IMPORTANT!! - Do not edit the .css files directly. Always make style changes within the scss directory

  • In your terminal, navigate to the UshahidiUI folder and run grunt watch (this Grunt command will use Compass to compile all .scss files into css/style.css upon saving your documents).

  • Then make all style changes within the individual .scss files, creating new ones and importing them into style.scss as needed. (Reference current css/style.css for @import structure).

  • Now when you save your changes to your document, Grunt will run Compass to compile all of your .scss files into css/style.css. Your changes will take effect upon browser refresh.

Semantic HTML Grid

IMPORTANT!! - "Semantic Grid" means that the grid code is in the Sass/CSS and stays out of the HTML, making the HTML markup more semantic

Ushahidi 3.0 is a responsive, device agnostic application, 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 Ushahidi 3.0 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. Please keep the grid out of the markup and in the CSS.

When in doubt reference Ushahidi 3.0's existing codebase and the Foundation docs.

If you have any questions feel free to contact Seth Hall

  • @middle8media on Twitter
  • middle8media on Skype
  • seth(at)ushahidi.com
  • No labels

3 Comments

Hide/Show Comments

  1. David Kobia

    csslint might be missing, so run:

    1. Seth Hall

      I installed that library to help debug css in dev. It is there to use as needed or can be deleted.

      1. Robbie Mackay

        I say just remove csslint in future.