Fela
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.
It generates CSS and therefore supports all common CSS features such as media queries, pseudo classes, keyframes and font-faces. It also renders on server-side with ease and ships with a powerful plugin API adding e.g. automatic vendor prefixing or fallback value support.
Fela can be used with React or with any other view library. It even supports React Native.
Installation
npm i --save felaAssuming you are using npm as your package manager 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 unpkg.
<!-- Fela (Development): Unminified version including all warnings -->
<script src="https://unpkg.com/fela@4.3.1/dist/fela.js"></script>
<!-- Fela (Production): Minified version -->
<script src="https://unpkg.com/fela@4.3.1/dist/fela.min.js"></script>Features
- Dynamic styling
- Universal rendering
- Dead code elimination
- High performance
- Minimal CSS output
- Framework-agnostic
- Pseudo classes & Media queries
- Child & Attribute selectors
- Vendor prefixing
- Component theming
- Many useful plugins
- Local namespace
The Gist
Fela is all about rendering styles, especially so called rules. A universal renderer will help us to render styles of all kind. Once rendered into a DOM node, a change listener will subscribe to changes and automatically add new rules.
The following example illustrates the key parts of Fela though it only shows the very basics.
import { createRenderer } from 'fela'
import { render } from 'fela-dom'
// 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 })
// it uses atomic css design to reuse styles
// on declaration base and to keep the markup minimal
console.log(className) // => a b c d e f h
// renders all styles into the DOM
render(renderer, mountNode)Documentation
Posts
Examples
- Vanilla JavaScript (source)
- Fela + React (source)
- Fela + React Native (source)
- Fela + Preact (source)
- Fela + Inferno (source)
- Fela + Angular 2 (source)
- Fela + Next
Community
- Aesthetic - React style and theme layer with Fela support
- Este - Starter kit for universal full–fledged React apps build with Fela
Packages
This repository is made of several separate packages including the core package. For convenience sake, we keep the package versions in sync. Therefore every package gets updated along with the core package, even if nothing changed within a particular package.
The following list shows a quick overview of all existing packages.
Support
Join us on Gitter. We highly appreciate any contribution.
We also love to get feedback.
License
Fela is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann and all the great contributors.