CSS to CSS-in-JS (fela) exercises
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
webpack
.babelrc
.gitignore
.travis.yml
LICENSE
README.md
package.json
prettier.js
yarn.lock

README.md

Fela Workshop

Build Status

This repository is a collection of typical Fela examples. It uses some helper utilities from Cloudflare's cf-ui library but it's still plain Fela. To make the setup painless we maintain fine-tuned pre-configured set of Fela plugins, enhancers, breakpoints and colors. Everytime we start a new project, we just need to wrap its root with <StyleProvider> component and that's it! You probably want to fork it once you start building your own project.

We also use our own flavor of createComponent that automatically whitelists PropTypes in case we are styling an existing React component.

Note: This repository does not support server-side rendering but it is easy to set it up!

First ten examples cover all CSS syntax and its rewrite into CSS in JS. We will be adding more topics over time.

Content

  1. Basic Syntax
  2. Dynamic Styles
  3. Media Queries
  4. Fonts
  5. Selectors
  6. Prefixes
  7. Fallbacks
  8. Polished
  9. Gotchas
  10. Keyframes (w/o solution, it is a homework)
  11. Testing
  12. Integration
  13. Advanced
  14. Themes
  15. Composition

Prerequisites

Download and install node.js version 6+. I recommend to use Node Version Manager.

Download

git clone https://github.com/tajo/fela-workshop.git
cd fela-workshop
npm install

Development interactive mode

npm start
open http://localhost:8000

Production mode build with server

npm run build
npm run server
open http://localhost:8000