Follow these steps when creating a new UI component.
The Platform Pattern Library is modeled after Brad Frost's Atomic Design, where smaller UI elements make up bigger elements which are then combined to create full pages. In Atomic Design 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.
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.
create a new file here. (use existing html files as a guide)
create a handlebars file here.
add the appropriate html for the layout to the new .hbs file.
link to the new layout .html file here.
The Platform Pattern Library uses Sass to compile Css.
Sass files are structured using the same methodology as above.