Helpful information for those new to component-driven design
- Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.
- Molecules are where things start to get more tangible as we start combining atoms together. Example, a search form comprised of a label, input and submit button.
- Organisms allow us to combine molecules into something relatively complex, such as a distinct section of the interface. Example, the header or footer of a site.
- Templates consist mostly of groups of organisms stitched together to form pages. It’s here where we start to see the design coming together and start seeing things like layout in action. Example, article node page.
- Pages are specific instances of templates. Here, placeholder content is replaced with real representative content to give an accurate depiction of what a user will ultimately see.
- 1.Structure: All components (all HTML, CSS, JS) are housed in the
- 2.Global mixins, code: Code that is global belongs in
components/00-base. By default, there are files for mixins, variables, breakpoints, layout, and more.
components/01-atoms/links/link/link.twigis a good example of a simple link component. Please store all code for a component together inside the component's directory.
- 4.Storybook Specific: Storybook allows you to use YAML or JSON files to insert data in your components (we use YAML by default). It also allows you to easily add variations for a component. See
components/01-atoms/buttons/buttons.stories.jsfor a an example.
- 5.Drupal-related: There are other files in the prototyping system specific to Drupal, which you can ignore while prototyping as they have no effect on building the components in Storybook (e.g., the