Skip to content

Atomic Design concept

Atomic Design is a methodology consisting of five separate stages cooperating with each other to create interface design systems in a more thoughtful and hierarchical way. Five stages of atomic design are:

  • Atoms
  • Molecules
  • Organisms
  • Templates
  • Pages

The nuclear project is not a linear process, but rather a mental model that helps us think about our user interfaces both as a coherent whole and the set of parts at the same time.Each of the five stages plays a key role in the hierarchy of our interface design systems.

Riupress UI extends the above set of stages by another three:

  • Bosons
  • Quarks
  • Protons

They play a special role in the design system based on Tailwind and Vue.

Bosons

Bosons are an integral part of any atom, proton, molecule and can also be an element of the body. They contain information on how the setting (props) in the component affects the formatting of the presentation layer, because the selected set of component settings provides a specific set of Tailwind classes.

Bosons are placed in a component folder and created on a base of globally defined.

Tailwind, collecting information about the classes that should be in the final CSS file, downloads them from bosons.

DANGER

Dynamic creation of Tailwind classes usingprops It is not possible in an efficient way from the version 3.x.

Quarks

It's nothing more than composable type components. The quark does not have a layer of presentation, but only the part responsible for performing some operation. If we need to use a function many times in many components, a quark should be created. Most often it is a function.

WARNING

The quarks are not exported and installed globally in the application in which Riupress UI is used. The quark is imported, for example, Import { useOpacity } from '@riupress/ui' where it is useOpacity is the name of the composable function was created from the prefix use and the names of the quark.

Atoms

They contain basic HTML elements, such as form labels, input data, buttons and others that cannot be further spread without loss of functionality.Each interface atom has its own unique properties, such as the dimensions of the main image or the main header font size.These innate properties affect the way each atom in a wider user interface system.

Protons

WARNING

It is assumed that one atom cannot be part of the other.In practice, such situations can happen, for example, an icon in Button.You can then accept the convention that the atom that may become part of another atom is called proton.

Molecules

In molecule interfaces, they are relatively simple groups of user interface (atoms) elements functioning together as an unit. For example, the form label, search input data and the button can connect to create a search form molecule.

Creating simple components helps designers and programmers of user interfaces observe the principle of single responsibility, facilitates testing, encourages reuse and promotes consistency in the entire interface.

Organisms

Organisms are relatively complex components of the user interface consisting of molecules and/or atoms and/or other organisms.These organisms form separate sections of the interface.

Building from molecules to more complex organisms provides designers and programmers an important sense of context.Organisms demonstrate these smaller, simpler components in action.

Templates and pages

Templates and pages are nothing but a set of organisms that make up one complete page.The only difference between templates and pages is that the templates place components in the system and demonstrate the basic structure of the project content, and the parties use real content to the templates and articulate variations to demonstrate the final user interface and test the resistance of the design system (e.g. E2E tests).

Sources of knowledge