⚛️

Atomic Design

image
Notes

Components

  • Atoms[Elements...]
  • Molecules[Atoms...]
  • Organismes[Molecules...]
  • Templates[Organismes...]
  • Pages[Templates...]
  • Sites[Pages...]

Functions

Input(data) > Analyse(data) > Output(data)

Elements

  • Settings
    • Paths[Ipfs(), Https(), Host()...]
    • Programs[OnClick(), Find(), Open(), MoveTo()...]
    • Api[Get(), Head(), Post(), Put(), Patch(), Delete(), Connect(), Options(), Trace()...]
  • Medias
    • Text[H1, H2, H3, Paragraph...]
    • Images[jpg, png, gifs, svg...]
    • Video[mp4, mov, avi...]
  • Aspect
    • Space[Position(), Seize(), Margin()...]
    • Background[Solid(), Media(), iFrame()...]
    • Effects[Roundness(), Blur(), Shadow(), Transparency()...]

Components States

  • Open/Close
  • Pin/Unpin
  • Edit/Saved
Demo