The goal is to walkthrough and understand the fundamental principles of atomic-design.

• For the learning path we are following along to create two Forms.

  1. ContactsForm
  2. SignUpForm

• For creating both of these forms we are going to illustrate and utilize atomic principles, including a demo.

• The atomic-design principle is based on three core things, atoms, molecules, and organisms.

  • Atoms are single un-diveable component which can not be further divided.
  • Molecules are higher order atoms, grouped together to create meaningful components.
  • Organisms create meaning to all the collection of these molecules which completes a component as a whole.

• In case of forms, what we generally require is a Button, Text, Input, TextArea. These can be considered as our Atoms, which can not be further dived/divided into.

• Moving onto Molecular portion of the design we require a checkbox field, Input field, Textarea field.

• Finally, we can jump into creating Organisms through our molecules component, the ContactsForm and the SignUpForm.

• Now, it is time to test the components that we build using the atomic-design principle.

• We can see that we have not provided any designs, but the goal to achieve atomic-design pattern is successful.

• Moreover what we learned was the principle to go deeper and emerging back on higher order components