📦 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-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}
/>
)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>
)- 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!
<Box w={1}>Hello Veel!</Box>The core layout component. Take a look at styled-system for documentation on <Box /> props.
By default a <Box /> component will render out to a div. You can change the tag by providing an is property.
<Flex wrap center />View the example on how to use it.
Sets both alignItems and justifyContent to center.
Sets flexWrap to wrap.
Sets flexDirection to column.
CSS justifyContent property.
CSS alignItem property.
CSS order property.
By using fela you have a wide variety of plugins available. Check out the plugin list
fela-plugin-embedded- Inline keyframes and font-faces
<Box css={{
animationName: {
'0%': { color: 'red ' },
'100%': { color: 'blue' }
},
}} />
// -> { animationName: 'k1' }veel © Fabian Eichenberger, Released under the MIT License.
Authored and maintained by Fabian Eichenberger with help from contributors (list).