@avsync.live/formation
Advanced tools
@avsync.live/formation - npm Package Compare versions
Comparing version 0.9.12 to 0.9.13
@@ -7,4 +7,4 @@ { | ||
| }, | ||
| "version": "0.9.12", | ||
| "description": "A component library utilizing React, Styled Components, and CSS variables.", | ||
| "version": "0.9.13", | ||
| "description": "A comprehensive component library built on React, Styled Components and CSS variables.", | ||
| "keywords": [ | ||
@@ -11,0 +11,0 @@ "react", |
@@ -7,4 +7,10 @@ # Formation | ||
| Formation is a component library based on React, Styled Components and CSS variables. | ||
| Formation is a comprehensive component library built on [React](https://reactjs.org/docs/getting-started.html), | ||
| [Styled Components](https://styled-components.com/docs) and [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). | ||
| - Dynamically bind all page structure and styles to your data | ||
| - Easily customize colors, sizing, and typography using CSS variables | ||
| - Powerful dev environment and living documentation using [Storybook](https://avsync-live.github.io/formation) | ||
| - Useful hooks and utilities included | ||
| ## Installation | ||
@@ -20,3 +26,3 @@ | ||
| [CodeSandbox](https://codesandbox.io/s/formation-minimal-example-xmir9o) | ||
| [Edit on CodeSandbox](https://codesandbox.io/s/formation-minimal-example-xmir9o) | ||
@@ -87,2 +93,4 @@ ```jsx | ||
| [View all customiziable CSS variables](https://avsync-live.github.io/formation/?path=/story/theme--theme) | ||
| ### Icons | ||
@@ -115,21 +123,10 @@ Formation uses [FontAwesome v6](https://fontawesome.com/v6/search?m=free) and supports both pro and free icons. | ||
| ## Why Formation? | ||
| - Easily modify styling using css variables | ||
| - Responsive from 5" mobile touchscreens to 4K TVs | ||
| - 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 | ||
| - Prefer a small inline dropdown over a context-changing modal popup. | ||
| ## Next.js | ||
| ## Implementation | ||
| - [React](https://reactjs.org/docs/getting-started.html) | ||
| - [Styled Components](https://styled-components.com/docs) | ||
| - [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) | ||
| - Surface-based background-color system | ||
| - Use of Storybook to develop, manage, and visualize components outside of an application | ||
| - [TODO] Code sandbox examples for all components | ||
| - [TODO] Design system guide similar to [Material Design documentation](https://material.io/design/environment/elevation.html) | ||
| Formation integrates well with Next.js, the popular React framework. | ||
| [View formation-next-example on GitHub](https://github.com/AVsync-LIVE/formation-next-example) | ||
| The example project above includes the proper configuration for server-side rendering styled-components. | ||
| ## Philosophy | ||
@@ -139,2 +136,9 @@ | ||
| Formation adheres to the Unimpeded Design System philosophy, 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. The user is only limited physically by their reaction time. | ||
| Formation adheres to the Unimpeded Design System philosophy, 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. The user is only limited physically by their reaction time. | ||
| - 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 | ||
| - Prefer a small inline dropdown over a context-changing modal popup |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.04%
531040
- Number of lines in readme file
- increased by2.96%
139
No dependency changes