Fela is a fast and modular library to handle styling in JavaScript.
It is dynamic by design and renders your styles depending on your application state.
npm i --save felaAssuming you are using npm as your package mananger you can npm install all packages.
Otherwise we also provide UMD builds for each package within the dist folder. You can easily use them via npmcdn.
<!-- Fela (Development): Unminified version including all warnings -->
<script src="https://npmcdn.com/[email protected]/dist/fela.js"></script>
<!-- Fela (Production): Minified version -->
<script src="https://npmcdn.com/[email protected]/dist/fela.min.js"></script>import { createRenderer, render } from 'fela'
// rules are just plain functions of props
// returning a valid object of style declarations
const rule = props => ({
fontSize: props.fontSize + 'px',
marginTop: props.margin ? '15px' : 0,
color: 'red',
lineHeight: 1.4,
':hover': {
color: 'blue',
fontSize: props.fontSize + 2 + 'px'
},
// nest media queries and pseudo classes
// inside the style object
'@media (min-height: 300px)': {
backgroundColor: 'gray',
':hover': {
color: 'black'
}
}
})
// Creates a new renderer to render styles
const renderer = createRenderer()
// Rendering the rule returns a className reference
// which can be attached to any element
const className = renderer.renderRule(rule, { fontSize: 12 }))
console.log(className) // => c0 c0-aw22w
// renders all styles into the DOM
render(renderer, mountNode)Join us on Gitter. We highly appreciate any contribution.
We also love to get feedback.
Fela is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann and all the great contributors.