@iagows/universe

Universe

Work in progress. Please don't download.

Based on

atomic design by brad frost

Flutter by google

What is

Atomic Design - simple definition

Brad Frost gives many guidelines of how to create a project in a way everything (or most of it) is reusable (among other things).

1. atoms: basic building blocks
2. molecules: combined atoms
3. organisms: molecules joined together
4. templates: organisms stitched together
5. pages: intances of templates

Universe - simple definition

Based on Brad Frost's atomic design, I re-imagined in such a way that programmers can also 'break' their project in small pieces.

1. quarks: non visual elements that defines everything
   1. VoidCallback
2. small forces: non visual elements, but that defines how other components works together
   1. CrossAxisAlignment
   2. MainAxisAlignment
3. atoms: basic building blocks
   1. Label
   2. Icon
   3. Text
4. molecules: combined atoms
   1. Button (Label + button + Icon)
   2. Input (input + icon)
5. tissues: molecules joined together
   1. LabelButton (Label + Button)
6. organs: some tissues used to achieve something in common (eg. form validators)
   1. FormButton (LabelButton + validation)
7. organisms: organs working together to make different things at the same place (eg. some providers like a theming one)
8. big forces: how organisms interact with others (eg. communications from/to some other page) (maybe won't be created here)
9. environment: full sites (maybe won't be created here)

Usage

TO DO!

Helping guidelines

1. Comments everywhere. Not everyone knows what's on your mind.
2. Test everything. No one likes to use broken things.
   1. Storybook all visual component. Everyone wants to see your art.

Documentation

Someday I'll configure a way auto create docs.

References

• atomic design
• Flutter
• npm package