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.
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:
npm install -g grunt-cli
Install Ushahidi 3.0
Follow the install instructions
All design files are located in
HTML files are located in
Sass files are located in
How to make style changes?
IMPORTANT!! - Do not edit the
.css files directly. Always make style changes within the
In your terminal, navigate to the
UshahidiUIfolder and run
grunt watch(this Grunt command will use Compass to compile all
css/style.cssupon saving your documents).
Then make all style changes within the individual
.scssfiles, creating new ones and importing them into
style.scssas needed. (Reference current
css/style.cssfor @import structure).
Now when you save your changes to your document, Grunt will run Compass to compile all of your
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