As Minted Wedding Websites moved from the legacy Hitched Up app to React, it gave me to opportunity to create a responsive component library from the ground up. This library has allowed our team build consistently, launch new features at a faster pace, and reduce internal miscommunication.
The building blocks are broken down into four categories:
Foundation contains the abstract properties such as font definitions, colors, grid structure, and spacing.
Elements contain all the individual pieces of the interface, such as icons, buttons, tabs, and form controls. Most elements are built so that the width is controlled by the parent container, and they can not contain any external spacing.
Components are groups of Elements that form distinct sections of the interface, such as the main navigation, modal window, or a sortable content list. They can respond to page breakpoints, and can specify external spacing.
Templates consist mostly of Components, but occasionally Elements. They represent the layout and functionality of a specific page type.
Pages are instances of Templates, with placeholder content replaced with real content. They are the closest representation of what the user will see, and provide a way to test the integrity of the building blocks.