nicholasanthony / fela

Fast & Dynamic Styling in JavaScript

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.

Try it on JSFiddle!

Installation

npm i --save fela

Assuming 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>

Usage

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)

Documentation

• Introduction

• Basics
• Advanced
• Usage Guides
• API Reference
• Troubleshooting
• FAQ
• Feedback
• Thanks

Examples

• Vanilla JavaScript (source)
• Fela + React (source)
• Fela + Angular 2 (source)
• Fela + Inferno (source)

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.