> For the complete documentation index, see [llms.txt](https://docs.ushahidi.com/platform-developer-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ushahidi.com/platform-developer-documentation/dev-legacy-v3/front-end-development/changing-ui-styles-introduction-to-the-pattern-library/pattern-library.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` 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>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.