Home

Awesome

Consider using nano-css instead. It is smaller, tested and actively maintained.

libreact logo

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...

feat.

Typing and autocompletion

CSS Templates

Reference

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>