Create a New Component from Scratch
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.
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).
- 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.
Sass files are structured using the same methodology as above.