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, 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.

HTML

Each UI component exists in either Basics, Fragments, Modules, or Blocks with each having their own index.html file (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 are compiled via Handlebars.

  • 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.

Sass

The Platform Pattern Library uses Sass to compile Css.

Styling the new component

Sass files are structured using the same methodology as above.

PreviousIconsNextRead Direction