The Ushahidi Platform front-end is served via the assets folder.

Production files are compiled via gulpfile.js.

HTML

The HTML is compiled from pattern-library to assets/html.

Basics

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

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

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

Blocks

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

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

Partials are files with blocks of code that appear in more than one place throughout the Pattern Library. Refer to this article to see how each partial is rendered via gulp-file-include.

Front-End Guidelines

The Front-end-guidelines are files specific to the docs you are currently reading.

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 style.scss file.

The Sass is then compiled from style.scss to style.css.

RTL (right to left) styles are generated via the _read-direction.scss mixin and compiled to rtl-style.css.

Javascript

Each Javascript pattern gets it's own .js file within the custom directory. Then Gulp compiles each file from custom into app.js, which is then called as the main JS file.

Directory Overview

                            
                                ├── assets               # Served assets (HTML, CSS, JS, images) & core Sass files
                                ├── bower_components     # Bower packages
                                ├── node_modules         # Node packages
                                ├── pattern-library      # HTML files (UI components, layouts, partials and front-end guideline docs)
                                - .arcconfig             # For use with Phabricator
                                - .arclint               # For use with Phabricator
                                - .editorconfig          # Project wide editor defaults
                                - .gitignore             # Files to ignore with pushing to Github
                                - .jshintignore          # Files to ignore when checking code via JSHint
                                - .jshintrc              # JSHint rules
                                - bower.json             # Bower settings and dependencies
                                - gulpfile.js            # Gulp plugins and tasks
                                - index.html             # Project home
                                - LICENSE-AGPL           # License terms
                                - LICENSE.md             # License copyright
                                - package.json           # Node settings and dependencies
                                - README.md              # Project instructions