Fela Workshop

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