Skip to content

Latest commit

 

History

History
207 lines (147 loc) · 4.67 KB

readme.md

File metadata and controls

207 lines (147 loc) · 4.67 KB
Raw

logo

veel NPM version Js Standard Style

📦 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}
  />
)

Contents

Example

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

Example

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

  1. Create a fela renderer.
import { createRenderer } from 'veel'
const renderer = createRenderer()
  1. 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>
    )
  }
}
  1. 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>

      ...
    )
  }
}
  1. 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

<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