Atomic Design
===

What's Atomic Design
---

Atomic design it's a frontend organization way based on an analogy with the
periodic table we have 5 (five) differents sections:

1. Atoms
2. Molecules
3. Organisms
4. Templates
5. Pages

Atoms
---

Atoms are the smaller elements of frontend composition, we have as example:

- buttons
- inputs
- labels

Molecules
---

Isolated atoms by itself it's not very useful, although merged can produce most
interesting elements, producing what we call as molecules - molecules must have
unique actions - we have as example:

- search bar

Organisms
---

Organisms how can you imagine are compounds of molecules, in this moment the
element pass to have a greater complexity being able to have multiples actions,
we have as example:

- header
- footer

Templates
---

Templates are predefined pieces and keeps a reusable code structure where it's
possible to perform "arguments injection" to build most embracing layouts

Pages
---

The final planned layout can be drawn through wireframes or other design
interface's techniques, using all above topics for this

Usage
---

For a basic usage example we can organize our component folder as following:


- components
    - atoms
        - button
    - molecules
        - searchbar
    - organisms
        - toolbar
        - form
- templates
    - post
    - product
- pages
    - login
    - home