veel

📦 Base React styling components using Fela with a design 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

const Badge = (props) => (
  <Box
    m={2}
    fontSize={2}
    bg='tomato'
    css={{ textDecoration: 'underline' }}
    {...props}
  />
)

Example
Usage
Components
- Box
- Flex
Plugins
- Recommend plugins
Author

Example

The following renders a responsive row with two equally divided divs collapsing on mobile.

const CenteredBox = props => (
  <Box
    p={2}
    w={[1, 0.5]}
    css={{ height: '50%' }}
    {...props}
  />
)

const App = () => (
  <Flex
    wrap
    align='center'
    css={{ height: '100vh' }}
  >
    <CenteredBox bg='lightblue'>1</CenteredBox>
    <CenteredBox color='white' bg='blue'>2</CenteredBox>
  </Flex>
)

Usage

Create a fela renderer.

import { createRenderer } from 'veel'
const renderer = createRenderer()

Wrap your application in a StyleProvider so that each veel component has access to the renderer and the optional theme.

import { StyleProvider, Box } from 'veel'

class App extends React.Component {
  render() {
    return (
      <StyleProvider={renderer}>
        <Box is='h1' fontSize={2}>Application</Box>
      </StyleProvider>
    )
  }
}

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

require('inject-css')(renderer.renderToString())

Render to a sheet list (Next.js example)

This makes the most sense when you create the document skeleton with JSX.

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 (
      <Head>
        {sheets.map(({ type, media, css }) => (
          <style data-fela-type={type} media={media}>{css}</style>
        ))}
      </Head>

      ...
    )
  }
}

You're done!

Components

Box

<Box w={1}>Hello Veel!</Box>

The core layout component. Take a look at styled-system for documentation on <Box /> props.

`Box.is`

By default a <Box /> component will render out to a div. You can change the tag by providing an is property.

Flex

<Flex wrap center />

View the example 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

Recommend plugins

fela-plugin-embedded - Inline keyframes and font-faces

<Box css={{
  animationName: {
  '0%': { color: 'red ' },
  '100%': { color: 'blue' }
  },
}} />

// -> { animationName: 'k1' }

Author

veel © Fabian Eichenberger, Released under the MIT License.
Authored and maintained by Fabian Eichenberger with help from contributors (list).

GitHub @queckezz · Twitter @queckezz

queckezz/veel