Formation
Formation is a comprehensive React component library that uses Styled Components and CSS variables.
View Source on GitHub
View Package on NPM
View Components in Storybook
Note: This library is still actively in development and should not be used for production projections yet.
Installation
yarn add @avsync.live/formation
Usage
import React from 'react'
import { Button } from '@avsync.live/formation'
const MyComponent = () => {
return <Button text='Click me'>
}
Icons
Formation uses FontAwesome v6 and supports both pro and free icons.
Theming
Theming is based on CSS variables.
Core principals
- Responsive from the smallest of phones to the largest of multi-window 4K monitors
- Touch-first
- No reliance on right clicks
- No reliance on hover states
- Allow for hold-to-drag and swiping, but also provide tap/click-only alternatives
- Minimal use of animations
- Easily modify the styling using interchangeable themes
- Prefer a small inline dropdown over a context-changing modal popup.
Implementation
Philosophy
The name Formation expresses both the form embodied by the user interface, and the process by which user interaction forms the desired outcome of the application. The layout of the document is also composed of a formation of components.
Formation adheres to the Unimpeded Design System, where users do not have to wait for animations to complete, or for the app to finishing changing modes in order to proceed with their task.