@avsync.live/formation - npm Package Compare versions

Comparing version 0.9.0 to 0.9.1

package.json

		@@ -7,3 +7,3 @@ {
		},
		"version": "0.9.0",
		"version": "0.9.1",
		"description": "A component library utilizing React, Styled Components, and CSS variables.",
		@@ -10,0 +10,0 @@ "keywords": [

README.md

		@@ -17,2 +17,37 @@ # Formation

		The following is a minimal example for [Create React App](https://create-react-app.dev/docs/getting-started).

		[CodeSandbox](https://codesandbox.io/s/formation-minimal-example-xmir9o)

		```jsx
		// App.js
		import React from 'react'

		import '@avsync.live/formation/dist/index.dark.css' // or index.light.css

		import '@fortawesome/fontawesome-svg-core/styles.css'
		import { library } from '@fortawesome/fontawesome-svg-core'
		import { faHeart } from '@fortawesome/free-solid-svg-icons'
		library.add(faHeart)

		import { Page, StyleHTML, Button } from '@avsync.live/formation'

		export default function App() {
		return (
		<Page>
		<StyleHTML>
		<h1>Formation</h1>
		<p>This is a minimal example for Create React App</p>
		</StyleHTML>
		<Button
		text='Like'
		icon='heart' // name of the icon without the 'fa' and in kebab-case
		iconPrefix='fas' // fas, far, fal, etc
		/>
		</Page>
		)
		}

		```

		### CSS and Customization
		@@ -22,3 +57,3 @@

		You should import Formation's CSS index file. It is available in both dark and light themes.
		You must import Formation's CSS index file. It is available in both dark and light themes.

		@@ -30,3 +65,3 @@ ```jsx

		To modify these properties, you can overwrite them in your project's global style sheet.
		To modify these properties, overwrite them in your project's global style sheet.

		@@ -40,8 +75,7 @@ ```css
		### Icons

		Formation uses [FontAwesome v6](https://fontawesome.com/v6/search?m=free) and supports both pro and free icons.

		```jsx
		// in your app entrypoint (_app.tsx, App.js, etc)
		import '@fortawesome/fontawesome-svg-core/styles.css' // add FontAwesome
		// in your app's entrypoint (_app.tsx, App.js, etc)
		import '@fortawesome/fontawesome-svg-core/styles.css'
		import { library } from '@fortawesome/fontawesome-svg-core'
		@@ -52,21 +86,5 @@ import { faHeart } from '@fortawesome/free-solid-svg-icons'

		### Usage

		```jsx
		// in your component
		import React from 'react'
		import { Button } from '@avsync.live/formation'

		const MyComponent = () => {
		return <Button
		text='Like'
		icon='heart' // name of the icon without the "fa" and in kebab-case
		iconPrefix='fas' // fas, far, fal, etc
		/>
		}
		```


		## Why Formation?
		- Responsive from the smallest of phones to the largest of multi-window 4K monitors
		- Easily modify styling using css variables
		- Responsive from 5" mobile touchscreens to 4K TVs
		- Touch-first
		@@ -77,3 +95,2 @@ - No reliance on right clicks
		- Minimal use of animations
		- Easily modify the styling using css variables
		- Prefer a small inline dropdown over a context-changing modal popup.
		@@ -80,0 +97,0 @@

@avsync.live/formation - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics