Internet Archive Design System

Adding New Components

Before adding new components, please make sure you have read and understood the Fractal user guide.

Adding a Normal Component

Create a new folder within the components/ directory and within the appropriate subdirectory (based on the Tier that your component falls into) and follow the instructions in the Fractal user guide. Use existing components as guides for how to set up your markup and data.

Any CSS and JavaScript that should be distributed as part of the design system code library should go inside the CSS and JS files in the src/ directory. Markup is not distributed as part of the library so it should live in Handlebars templates in Fractal.

Important: Every component should have a README.md file with complete documentation of how to use it (see template below).

Adding a Legacy Component

If the component was designed before the existence of the design system and its code is not easy to move into the design system, you can add it as documentation only on the Legacy Components page.

As with normal components, use the template below for the documentation.

New Component Template

This is where you describe what the component is and how it works. For legacy components that don’t have code in the design system repository, include at least one screenshot.

Include a screenshot of the component here

Sub-Components

  • List (and link to) components that are composed together to create the component.
  • Tier 1 components and some Tier 2/3 components can omit this section.

Do

  • List things designers and developers should do with the component.
  • Provide guidance around typography, colors, accessibility, etc.

Don’t

  • List things designers and developers should not do with the component.
  • Include specific examples of incorrect usage if necessary.
  • Include things in this section if they should never or almost never be done.

Caution

  • List information designers and developers should keep in mind when using the component.
  • Include things in this section if it’s acceptable for someone to do them as long as they’re careful about it.

See Also

  • List related or similar components.

TODO

  • List tasks that should be done in the future to continue design and development of this component.