Travis Beckham

designer Joined about 9 years ago

  • 0 stories
  • 1 comment
  • Posted to Who actually uses atomic design?, Apr 17, 2018

    I use a system that's close, but I don't use the naming convention, and I've added a few rules.

    The categories I use are Foundation, Elements, Components, Templates, and Pages.

    Foundation are just basic style properties. This includes font definitions, colors, grid structure, and vertical rhythm.

    Elements are the basic building blocks, such as icons, buttons, tabs and form controls. In Atomic Design terminology, they can be both Atoms or Molecules. They should never respond to page breakpoints, but can respond to their own size if absolutely necessary.

    Components are groups of Elements that form distinct sections of the interface, such as the main navigation, modal window, or a sortable content list. In Atomic Design terminology, these are the same as Organisms. They can respond to page breakpoints if necessary (like a modal window).

    Templates consist of mostly Components, but occasionally Elements. They represent the layout and functionality of a specific page type.

    Pages are specific instances of Templates.

    6 points
Load more comments