Awesome
veel
:package: 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.
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 eachveel
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.<br> Authored and maintained by Fabian Eichenberger with help from contributors (list).