Which UI elements can be identified as molecules?
Using the concepts from the previous lesson, it's possible to find shared components in even the most complex codebases. Let's walk through an advanced UI example and identify the different elements of Atomic Design:
Here is a UX example from the Azure SQL database portal:
Using Atomic Design we can identify:
Shared color palette
Font and typography
Consistent spacing values
Select and autocomplete components
Common header layout
Side-by-side pairing of labels and form inputs
The page layout which includes a header, title, description, breadcrumbs, content, and footer
The individual list and add pages
The elements listed as molecules would make shared components that are flexible enough to be used in a wide variety of scenarios.
Our demo codebase is a showcase for components that are used in common application experiences. It includes custom styling built with SASS that we will be migrating to our shared component library. The components we will implement include: