ComponentLanding

CCF-UI Component Hierarchy

Use the ComponentTemplate to create new components.

Big List of Components listed here.

How do I add a screenshot?

Atomic Design Resources

Quick Reference

• Atoms are UI elements that can’t be broken down any further and serve as the elemental building blocks of an interface.
• Molecules are collections of atoms that form relatively simple UI components.
• Organisms are relatively complex components that form discrete sections of an interface.
• Templates place components within a layout and demonstrate the design’s underlying content structure.
• Pages apply real content to templates and articulate variations to demonstrate the final UI and test the resilience of the design system.

Links

• The original: https://bradfrost.com/blog/post/atomic-web-design/
• The book (chapter 2 especially): https://atomicdesign.bradfrost.com/chapter-2/
• Molecule vs Organism: https://bradfrost.com/blog/link/making-sense-of-atomic-design-molecules-and-organisms/
  • https://www.futurelearn.com/info/blog/atomic-design-molecules-organisms
• An example storybook that uses the design pattern: https://gamut.codecademy.com/?path=/docs/gamut--page