Share We understand that it is extremely important for marketers to be able to deliver a consistent brand experience, both offline and online. That’s why our highest priority is to customize and extend the UI of Mercury components down to the lowest level.

This article gives insight into component designs and how they can be extended.  

React

Mercury components are built using React. React is a JavaScript framework built by Facebook, for the platform itself. Now it is one of the most popular JavaScript frameworks and is gaining traction every day. Read more about why we use React in this article.  
 

Atomic design

Mercury UI components adhere to the Atomic design methodology. This gives them a consistent look and feel, but also greatly facilitates reuse and extensibility. In short, the atomic design methodology organizes the components into three groups: 
 
  • Atoms
  • Molecules
  • Organisms 

Atoms

Atoms are the building blocks for other components. These are the low-level elements that are used across the molecules. Think of elements such as form fields, labels and components for displaying information like the product title and description.  
 

Molecules

Molecules group atoms together to realize a focused piece of functionality. An example of a molecule is the component that displays an individual product in the product list. This molecule uses atoms like the product title and description to display the product. 
 

Organisms

Organisms use molecules to implement a higher-level piece of functionality. Product molecules described above are used by the product lister organism to display a list of products. 

Atomic design organisms
 

Extensibility

Mercury components are designed to be as granular as possible. This reduces the chance that you will need to replace a complete component. Added to this, Mercury offers a client API to replace components.

Most of the time, components that need to be replaced will be on the molecular level. For example, in the product list, you might want to display additional fields, for which you can easily replace the product molecule. The molecules often don’t contain a lot of logic and group atoms together. The atoms are exposed through the API, so you can use these in your own molecules. 
 

Related articles

Articles related to this topic

Share a Tweet
Mercury components are customizable down to the lowest levels to ensure marketers of a consistent brand experience http://bit.ly/2HbkKjl #SITECORE # ATOMIC # CUSTOMIZABLE  Share
or
Mercury UI components adhere to the #Atomic methodology. Giving them a consistent look and feel, but also greatly facilitates reuse and extensibility. http://bit.ly/2HbkKjl #SITECORE # ATOMIC # CUSTOMIZABLE  Share