Awesome
Consider using
nano-css
instead. It is smaller, tested and actively maintained.
freestyler
5<sup>th</sup> generation React styling library — it is lightning fast, lean, and with gazillion features.
Yeah, straight from the top of my dome
As I rock, rock, rock, rock, rock the microphone
Yeah, straight from the top of my dome
As I rock, rock, rock, rock, rock the microphone...
- Bomfunk MC's — Freestyler
feat.
- fifth generation, lightweight, lightning fast, JIT CSS, code splitting, dead code elimination, JavaScript variables
CSS Templates
- Scoped styles without selectors
- Nested selectors
- Mixins
- Atoms
- Media queries, keyframes, ...
- Global styles
- Global entry and exit animations
- CSS resets
- Theming
Reference
- Terminology
- Generations
- Interfaces
- Generic Low-level API
- Generic 3<sup>rd</sup> Generation Interfaces
rule()
InterfaceStyleSheet.create()
Interface with lazy renderinghyperstyle()
styleName
Interface
- React.js 4<sup>th</sup> Generation Interfaces
- React.js 5<sup>th</sup> Generation Interfaces
- Environment Variables
- Server-side Rendering
- How it Works?
Installation
<pre> npm i <a href="https://www.npmjs.com/package/freestyler">freestyler</a> --save </pre>Usage
import {
css,
styled,
rule,
StyleSheet,
Component,
hoc,
jsxstyle
} from 'freestyler';
import hyperstyle from 'freestyler/lib/react/hyperstyle';
import {styleit, Styleit} from 'freestyler/lib/react/styleit';
Decorate stateful components.
@css({
border: '1px solid tomato',
})
class App extends Component {
render () {
return <div>Hello world!</div>;
}
}
Or, create "styled" stateless components.
const Bordered = styled.div({
border: '1px solid tomato',
});
const App = () =>
<Bordered>Hello world!</Bordered>;
License
Unlicense — public domain.
<div style="text-align:center"><center><i>Are you a freestyler?</i></center></div>