5th generation React styling library
npm install freestyler[![][npm-badge]][npm-url] [![][travis-badge]][travis-url]
5th generation [React styling library][npm-url] —
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
- fifth generation, lightweight, lightning fast, JIT CSS, code splitting, dead code elimination, JavaScript variables
- __Scoped__ styles without selectors
- __Nested__ selectors
- __Mixins__
- __Atoms__
- __Media queries__, keyframes, ...
- __Global__ styles
- Global entry and exit animations
- CSS __resets__
- __Theming__
- Terminology
- Generations
- Interfaces
- __Generic__ Low-level API
- __Generic__ __3rd Generation Interfaces__
- rule() Interface
- StyleSheet.create() Interface with lazy rendering
- hyperstyle() styleName Interface
- __React.js__ __4th Generation Interfaces__
- styled()() Component Interface
- @css Static Class Decorator Interface
- @css() Class Decorator Interface
- @css() .render() Decorator Interface
- Component Class Interface
- hoc()() Higher Order Component Interface
- __React.js__ __5th Generation Interfaces__
- styleit() and Interfaces
- jsxstyle(), , , , , and Interfaces
- Environment Variables
- Server-side Rendering
- How it Works?
npm i freestyler --save
`js
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.
`jsx`
@css({
border: '1px solid tomato',
})
class App extends Component {
render () {
return Hello world!;
}
}
Or, create "styled" stateless components.
`jsx``
const Bordered = styled.div({
border: '1px solid tomato',
});
const App = () =>
Unlicense — public domain.
-------
[npm-url]: https://www.npmjs.com/package/freestyler
[npm-badge]: https://img.shields.io/npm/v/freestyler.svg
[travis-url]: https://travis-ci.org/streamich/freestyler
[travis-badge]: https://travis-ci.org/streamich/freestyler.svg?branch=master