@avsync.live/formation

Formation

Formation is styled component library based around the Unimpeded Interface design system.

The Unimpeded Interface Philosophy

Formation is a Styled Components library that conforms to the Unimpeded Interface Philosophy.

Core principals

• No right clicks
• Touchscreen-first
• Allow for hold-to-drag, but also allow for tap/click-only alternatives
• Responsive from the smallest of phones to the largest of multi-window 4K monitors.
• Animations should be minimal or avoided, as they can degrade performance and make interactions feel less responsive.
• Easily modify the styling using interchangeable themes.
• Prefer a small inline dropdown over a context-dominating modal popup.

Implementation

• Surface-based background-color system
• CSS variables
• React Styled-components
• Use of storybook to manage and visualize components outside of an application
• Code sandbox examples for all components