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

yarn add fela

You may alternatively use npm i --save fela.

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)

Documentation

Posts

Style as a Function of State
- by @rofrischmann
CSS in JS: The Argument Refined
- by @steida

Examples

Workshop

fela-workshop - demonstrates typical Fela usage, side by side examples of CSS and Fela, a playground project

Community

Aesthetic - React style and theme layer with Fela support
cf-ui - Cloudflare UI Framework
Este - Starter kit for universal full–fledged React apps build with Fela
Kilvin - Primitive React Layout Components with Fela
Tel Aviv - React Universal Rendering

Contributing

We highly appreciate any contribution. For more information follow the document Contributing.
Also, please read our code of conduct.

Support

Join us on Gitter.
We love to get feedback.

Who's using Fela?

Your company is using Fela, but is not listed yet? Add your company / organisation

License

Fela is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann and all the great contributors.

mehdivk/fela