Important

You are browsing documentation for version 5.0 of OroCommerce, supported until January 2025. Read the documentation for version 6.0 (the latest LTS version) to get up-to-date information.

See our Release Process documentation for more information on the currently supported and upcoming releases.

Principles 

The Atomic Design approach is used in the structure of the user interface, which means that all functional elements consist of:

  • Atoms - the smallest elements that cannot be separated and that serve as elementary blocks of the interface (colors, typography, buttons, icons, etc.)

  • Molecules - groups of atoms that form relatively simple functional interface elements (pop-up, button with dropdown, navigation menu)

  • Organisms - groups of molecules that form the relatively complex parts of the interface (header, footer, sidebar)

  • Templates - help place components in the layout and demonstrate the content structure underlying the design

  • Pages - help apply real content to templates displaying the final interface

Principle of the atomic design approach