# File-structure

## File Structure

The Ushahidi Platform front-end is served via the [assets folder](https://github.com/ushahidi/platform-pattern-library/tree/master/assets). Production files are compiled via [gulpfile.js](https://github.com/ushahidi/platform-pattern-library/blob/master/gulpfile.js).

### HTML/Handlebars

HTML templates are compiled via Handlebars. A .html template must be created in the [pattern-library/\_layouts](https://github.com/ushahidi/platform-pattern-library/tree/master/pattern-library/5_layouts) directory, then a .hbs template must be created in the [assets/templates](https://github.com/ushahidi/platform-pattern-library/tree/master/assets/templates) directory. Handlebars will then compile the production html into the [assets/html](https://github.com/ushahidi/platform-pattern-library/tree/master/assets/html) directory.

{% hint style="danger" %}
Warning: Assets/html displaying "page not found" error
{% endhint %}

### 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](https://github.com/ushahidi/platform-pattern-library/blob/master/assets/sass/style.scss) file.

The CSS is then compiled from [assets/sass/style.scss](https://github.com/ushahidi/platform-pattern-library/blob/master/assets/sass/style.scss) to assets/css/style.css.

### Javascript

Each Javascript pattern gets it's own .js file within the [custom](https://github.com/ushahidi/platform-pattern-library/tree/master/assets/js/custom) directory.

The Javascript is then compiled from [assets/js/custom](https://github.com/ushahidi/platform-pattern-library/tree/master/assets/js/custom) to assets/js/app.js.

PL specfic javascript follows the same pattern but originates from [assets/js/pattern-library](https://github.com/ushahidi/platform-pattern-library/tree/master/assets/js/pattern-library)

### Structure of templates

#### [Basics](https://github.com/ushahidi/platform-pattern-library/tree/master/pattern-library/1_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](https://github.com/ushahidi/platform-pattern-library/tree/master/pattern-library/2_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](https://github.com/ushahidi/platform-pattern-library/tree/master/pattern-library/3_modules)

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

#### [Blocks](https://github.com/ushahidi/platform-pattern-library/tree/master/pattern-library/4_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](https://github.com/ushahidi/platform-pattern-library/tree/master/pattern-library/5_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](https://github.com/ushahidi/platform-pattern-library/tree/master/pattern-library/partials)

Partials are files with blocks of code that appear in more than one place throughout the Pattern Library.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ushahidi.com/platform-developer-documentation/dev-legacy-v3/front-end-development/changing-ui-styles-introduction-to-the-pattern-library/pattern-library.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.