Who actually uses atomic design?

almost 4 years ago from Freckley Freckleson, UI Designer

  • Travis Beckham, almost 4 years ago

    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
    • Davey HollerDavey Holler, almost 4 years ago

      +1 — I follow the same almost exactly. The only difference being what you refer to as "Foundation" I refer to as "Fragments."

      1 point