Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

CSS to CSS-in-JS (fela) exercises

Topics

Resources

License

Releases

No releases published
You can’t perform that action at this time.