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.
- Basic Syntax
- Dynamic Styles
- Media Queries
- Keyframes (w/o solution, it is a homework)
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