GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → robinweser → Fela

robinweser / Fela

Licence: mit
State-Driven Styling in JavaScript

Programming Languages

javascript
184084 projects - #8 most used programming language
reason
219 projects

Labels

cssreactcomponentscss-in-jsstylingatomic-cssstate-driven

Projects that are alternatives of or similar to Fela

tsstyled
A small, fast, and simple CSS-in-JS solution for React.
Stars: ✭ 52 (-97.52%)
Mutual labels:  components, styling, css-in-js
Styletron
⚡ Toolkit for component-oriented styling
Stars: ✭ 3,217 (+53.41%)
Mutual labels:  css-in-js, atomic-css
Reactackle
Open-source components library built with React and Styled-Components.
Stars: ✭ 278 (-86.74%)
Mutual labels:  components, css-in-js
Jss
JSS is an authoring tool for CSS which uses JavaScript as a host language.
Stars: ✭ 6,576 (+213.59%)
Mutual labels:  components, css-in-js
Further
🦄🌈🍄 algebraic style composition for functional UIs
Stars: ✭ 254 (-87.89%)
Mutual labels:  styling, css-in-js
Smart-Inspector
Fluent re-take on Unity Inspector UX. Packed with QoL improvements.
Stars: ✭ 680 (-67.57%)
Mutual labels:  components, styling
Design System
Priceline.com Design System
Stars: ✭ 604 (-71.2%)
Mutual labels:  components, css-in-js
Filbert Js
A lightweight(~1kb) css-in-js framework
Stars: ✭ 167 (-92.04%)
Mutual labels:  styling, css-in-js
Horror
😱 React HTML elements with CSS-in-JS
Stars: ✭ 78 (-96.28%)
Mutual labels:  components, css-in-js
Polished
A lightweight toolset for writing styles in JavaScript ✨
Stars: ✭ 7,074 (+237.34%)
Mutual labels:  styling, css-in-js
Otion
Atomic CSS-in-JS with a featherweight runtime
Stars: ✭ 563 (-73.15%)
Mutual labels:  styling, css-in-js
Css In Js
A thorough analysis of all the current CSS-in-JS solutions with SSR & TypeScript support for Next.js
Stars: ✭ 127 (-93.94%)
Mutual labels:  styling, css-in-js
Styled System
⬢ Style props for rapid UI development
Stars: ✭ 7,126 (+239.82%)
Mutual labels:  styling, css-in-js
Nano Style
React functional CSS-in-JS
Stars: ✭ 85 (-95.95%)
Mutual labels:  components, css-in-js
Torus
Torus is an event-driven model-view UI framework for the web, focused on being tiny, efficient, and free of dependencies.
Stars: ✭ 136 (-93.51%)
Mutual labels:  components, css-in-js
Styled Bootstrap
💅🏻 A styled-component implementation of Bootstrap
Stars: ✭ 154 (-92.66%)
Mutual labels:  css-in-js
Gatsby Theme Superstylin
💅 A Gatsby Theme with styled-components
Stars: ✭ 165 (-92.13%)
Mutual labels:  css-in-js
Gwt Polymer Elements
Polymer Web Components for GWT. A collection of Material Design widgets for desktop and mobile.
Stars: ✭ 153 (-92.7%)
Mutual labels:  components
Goober
🥜 goober, a less than 1KB 🎉 css-in-js alternative with a familiar API
Stars: ✭ 2,317 (+10.49%)
Mutual labels:  css-in-js
Terra Core
Terra offers a set of configurable React components designed to help build scalable and modular application UIs. This UI library was created to solve real-world issues in projects we work on day to day.
Stars: ✭ 167 (-92.04%)
Mutual labels:  components
View All Similar Projects ➔

Fela

Fela is a small, high-performant and framework-agnostic toolbelt to handle state-driven styling in JavaScript.
It is dynamic by design and renders your styles depending on your application state.

It generates atomic CSS and supports all common CSS features such as media queries, pseudo classes, keyframes and font-faces. Fela ships with a powerful plugin API adding e.g. vendor prefixing or fallback value support.

Fela can be used with React or with any other view library. It even supports React Native.

Bundlephobia npm downloads Spectrum

Support Us

Support Robin Weser's work on Fela and its ecosystem directly via GitHub Sponsors.

Benefits

  • Predictable Styling
  • Scoped Atomic CSS
  • Minimal Bundle Size
  • No Specificity Issues
  • No Naming Conflicts
  • Framework-Agnostic
  • Huge Ecosystem
  • RTL Support

Read more about the benefits!

The Gist

Fela's core principle is to consider style as a function of state.
The whole API and all plugins and bindings are built on that idea.
It is reactive and auto-updates once registered to the DOM.

The following example illustrates the key parts of Fela though it only shows the very basics.

import { createRenderer } from 'fela'

// a simple style rule is a pure function of state
// that returns an object of style declarations
const rule = (state) => ({
  textAlign: 'center',
  padding: '5px 10px',
  // directly use the state to compute style values
  fontSize: state.fontSize + 'pt',
  borderRadius: 5,
  // deeply nest media queries and pseudo classes
  ':hover': {
    fontSize: state.fontSize + 2 + 'pt',
    boxShadow: '0 0 2px rgb(70, 70, 70)',
  },
})

const renderer = createRenderer()

// fela generates atomic CSS classes in order to achieve
// maximal style reuse and minimal CSS output
const className = renderer.renderRule(rule, {
  fontSize: 14,
}) // =>  a b c d e f

The generated CSS output would look like this:

.a { text-align: center }
.b { padding: 5px 10px }
.c { font-size: 14pt }
.d { border-radius: 5px }
.e:hover { font-size: 16pt }
.f:hover { box-shadow: 0 0 2px rgb(70, 70, 70) }

Primitive Components

If you're using Fela, you're most likely also using React.
Using the React bindings, you get powerful APIs to create primitive components.

Read: Usage with React for a full guide.

import * as React from 'react'
import { useFela } from 'react-fela'

const rule = ({ fontSize }) => ({
  textAlign: 'center',
  padding: '5px 10px',
  // directly use the props to compute style values
  fontSize: fontSize + 'pt',
  borderRadius: 5,
  ':hover': {
    fontSize: fontSize + 2 + 'pt',
    boxShadow: '0 0 2px rgb(70, 70, 70)',
  },
})

function Button({ fontSize, children }) {
  const { css } = useFela({ fontSize })

  return <button className={css(rule)}>{children}</button>
}

Check this example on CodeSandbox

Examples

Documentation

Workshop

If you are coming from CSS and want to learn JavaScript Styling with Fela, there is a full-feature fela-workshop which demonstrates typical Fela use cases. It teaches all important parts, step by step with simple examples. If you already know other CSS in JS solutions and are just switching to Fela, you might not need to do the whole workshop, but it still provides useful information to get started quickly.

Talks

Posts

Ecosystem

There are tons of useful packages maintained within this repository including plugins, enhancers, bindings and tools that can be used together with Fela. Check the Ecosystem documentation for a quick overview.

Community

Apart from all the packages managed within this repository, there are many community third-party projects that are worth mentioning:

Support

Got a question? Come and join us on Spectrum!
We'd love to help out. We also highly appreciate any feedback.
Don't want to miss any update? Follow us on Twitter.

Who's using Fela?

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

Contributing

This project exists thanks to all the people who contribute.

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

License

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].