> 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/create-a-new-component-from-scratch.md).

# Create a New Component from Scratch

Follow these steps when creating a new UI component.

## Where does the UI fit within the Pattern Library?

The Platform Pattern Library is modeled after Brad Frost's [Atomic Design](http://atomicdesign.bradfrost.com/), where smaller UI elements make up bigger elements which are then combined to create full pages. In [Atomic Design](http://atomicdesign.bradfrost.com/) **Atoms** are used to create **Molecules**, which create **Organisms**, which create **Templates**, all of which come together to create **Pages**. In the Pattern Library we follow the same methodology but with **Basics**, **Fragments**, **Modules**, and **Blocks** being used to create **Layouts**.

So the first thing that needs to be determined is where the new UI fits withing this methodology. Is it a small compenent? Or is it a bigger component made up of other smaller components? Once the appropriate structure is determined, you will be able to create the HTML and Sass accordingly.

## HTML

Each UI component exists in either [**Basics**](http://preview.ushahidi.com/platform-pattern-library/master/assets/html/1_basics/), [**Fragments**](http://preview.ushahidi.com/platform-pattern-library/master/assets/html/2_fragments/), [**Modules**](http://preview.ushahidi.com/platform-pattern-library/master/assets/html/3_modules/), or [**Blocks**](http://preview.ushahidi.com/platform-pattern-library/master/assets/html/4_blocks/) with each having their own [index.html file](https://github.com/ushahidi/platform-pattern-library/tree/master/pattern-library/1_basics) *(links to basic's index.html)*.

### Creating the HTML for a new component

* add the new html component to the appropriate file above.
* add a link in that page's nav and link it to the new html component on that page.
* use that page's existing html and nav as a guide.

### Creating a new layout template.

[**Layouts**](http://preview.ushahidi.com/platform-pattern-library/master/assets/html/5_layouts/) are compiled via [Handlebars](https://handlebarsjs.com/).

* create a new file [here](https://github.com/ushahidi/platform-pattern-library/tree/master/pattern-library/5_layouts). *(use existing html files as a guide)*
* create a handlebars file [here](https://github.com/ushahidi/platform-pattern-library/tree/master/assets/templates). 
* add the appropriate html for the layout to the new .hbs file.
* link to the new layout .html file [here](https://github.com/ushahidi/platform-pattern-library/blob/master/pattern-library/5_layouts/index.html).

## Sass

The Platform Pattern Library uses [Sass](https://sass-lang.com/) to compile Css.

### Styling the new component

Sass files are structured using the same methodology as above.

* create a new .scss file in the[ Sass directory](https://github.com/ushahidi/platform-pattern-library/blob/master/assets/sass).
* @import that file to [/assets/sass/**style.scss**](https://github.com/ushahidi/platform-pattern-library/blob/master/assets/sass/style.scss)\*\*\*\*


---

# 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/create-a-new-component-from-scratch.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.