veel 
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-systemwhich 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
felarenderer.
import { createRenderer } from 'veel'
const renderer = createRenderer()- Wrap your application in a
StyleProviderso that eachveelcomponent 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).