File-structure
File Structure
The Ushahidi Platform front-end is served via the assets folder. Production files are compiled via gulpfile.js.
HTML/Handlebars
HTML templates are compiled via Handlebars. A .html template must be created in the pattern-library/_layouts directory, then a .hbs template must be created in the assets/templates directory. Handlebars will then compile the production html into the assets/html directory.
Warning: Assets/html displaying "page not found" error
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 CSS is then compiled from assets/sass/style.scss to assets/css/style.css.
Javascript
Each Javascript pattern gets it's own .js file within the custom directory.
The Javascript is then compiled from assets/js/custom to assets/js/app.js.
PL specfic javascript follows the same pattern but originates from assets/js/pattern-library
Structure of templates
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 are made up of more than one html element, but usually do not stand on their own. Fragments are combined to create modules.
Modules are standalone UI blocks, each of them complete and serving a unique purpose. Multiple modules can create a block.
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 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 are files with blocks of code that appear in more than one place throughout the Pattern Library.