Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/queckezz/veel
Base react styling components using fela with a design system
https://github.com/queckezz/veel
css-in-js design-systems fela react styled-system
Last synced: about 1 month ago
JSON representation
Base react styling components using fela with a design system
- Host: GitHub
- URL: https://github.com/queckezz/veel
- Owner: queckezz
- License: mit
- Created: 2017-07-04T09:24:27.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2017-08-31T13:35:15.000Z (about 7 years ago)
- Last Synced: 2024-05-16T21:21:28.462Z (4 months ago)
- Topics: css-in-js, design-systems, fela, react, styled-system
- Language: JavaScript
- Homepage:
- Size: 515 KB
- Stars: 26
- Watchers: 2
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- Contributing: contributing.md
- License: license
Awesome Lists containing this project
README
# veel [![NPM version][version-image]][version-url] [![Js Standard Style][standard-image]][standard-url]
:package: Base React styling components using [`Fela`](http://fela.js.org) with a [design system](https://github.com/jxnblk/styled-system)
* **Low-Level** - Exposes only a few components which can be used as a base layer to build your UI components upon
* **Consistency** - Uses `styled-system` which encourages consistency of spacing, typography and color
* **Universal** - By using fela it's really easy to prerender your styles on the server or anywhere
```
npm install veel
```
```js
const Badge = (props) => (
)
```
## Contents
* [Example](#example)
* [Usage](#usage)
* [Components](#components)
+ [Box](#box)
+ [Flex](#flex)
* [Plugins](#plugins)
+ [Recommend plugins](#recommend-plugins)
* [Author](#author)
## Example
The following renders a responsive row with two equally divided divs collapsing on mobile.
```js
const CenteredBox = props => (
)
const App = () => (
1
2
)
```
## Usage
1. Create a [`fela`](http://fela.js.org/docs/api/fela-native/createRenderer.html) renderer.
```js
import { createRenderer } from 'veel'
const renderer = createRenderer()
```
2. Wrap your application in a `StyleProvider` so that each `veel` component has access to the renderer and the optional theme.
```js
import { StyleProvider, Box } from 'veel'
class App extends React.Component {
render() {
return (
Application
)
}
}
```
3. Now you need some way of injecting the generated css into the html. There are many ways to do it, each with their positive and negative aspects.
**Injecting the css dynamically**
```js
require('inject-css')(renderer.renderToString())
```
**Render to a sheet list ([Next.js](http://ghub.io/next) example)**
This makes the most sense when you create the document skeleton with JSX.
```js
import Document, { Head } from 'next/document'
class CustomDocument extends Document {
static getInitialProps ({ renderPage }) {
const page = renderPage()
const sheets = renderer.renderToSheetList()
renderer.clear()
return { ...page, sheets }
}
render () {
const sheets = this.props.sheets
return (
{sheets.map(({ type, media, css }) => (
{css}
))}
...
)
}
}
```
4. You're done!
## Components
### Box
```js
Hello Veel!
```
The core layout component. Take a look at [`styled-system`](https://github.com/jxnblk/styled-system/blob/master/README.md) for documentation on `` `props`.
#### `Box.is`
By default a `` component will render out to a `div`. You can change the tag by providing an `is` property.
### Flex
```js
```
[View the example](./demo/src/index.js) on how to use it.
#### `Flex.center`
Sets both `alignItems` and `justifyContent` to `center`.
#### `Flex.wrap`
Sets `flexWrap` to `wrap`.
#### `Flex.column`
Sets `flexDirection` to `column`.
#### `Flex.justify`
CSS `justifyContent` property.
#### `Flex.align`
CSS `alignItem` property.
#### `Flex.order`
CSS `order` property.
## Plugins
By using fela you have a wide variety of plugins available. Check out the [plugin list](http://fela.js.org/docs/introduction/Ecosystem.html#plugins)
### Recommend plugins
* [**`fela-plugin-embedded`**](https://github.com/rofrischmann/fela/tree/master/packages/fela-plugin-embedded) - Inline keyframes and font-faces
```js
// -> { animationName: 'k1' }
```
## Author
**veel** © [Fabian Eichenberger](https://github.com/queckezz), Released under the [MIT](./license) License.
Authored and maintained by Fabian Eichenberger with help from contributors ([list](https://github.com/queckezz/veel/contributors)).
> GitHub [@queckezz](https://github.com/queckezz) · Twitter [@queckezz](https://twitter.com/queckezz)
[version-image]: https://img.shields.io/npm/v/veel.svg?style=flat-square
[version-url]: https://npmjs.org/package/veel
[standard-image]: https://img.shields.io/badge/code-standard-brightgreen.svg?style=flat-square
[standard-url]: https://github.com/feross/standard