open-index/open-npm huggingface dataset:
npm package: @iagows/universe
Description: Work in progress. Please don't download.
Author: Iago Alves
Latest version: 0.0.1

# Universe

Work in progress. Please don't download.

## Based on

[_atomic design_](https://bradfrost.com/blog/post/atomic-web-design/) by **brad frost**

[_Flutter_](https://flutter.dev/) 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
1. molecules: combined atoms
1. organisms: molecules joined together
1. templates: organisms stitched together
1. 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_](https://bradfrost.com/blog/post/atomic-web-design/)
- [_Flutter_](https://flutter.dev/)
- [npm package](https://www.codementor.io/@dhananjaykumar/build-and-publish-an-npm-typescript-package-1jklrmbf2g)