Stylord
Javascript styles made easy.
Stylord provides a simple way to declare your stylesheets inside the JavaScript files without worrying about the CSS global scope.
- Declare your CSS as simple Object literals.
- Works like a charm with any framework or just vanilla JavaScript.
- Full support of pseudo-classes like
:hover
and pseudo-elements like::after
. - Autoprefixer out-of-box.
- Easy to use media queries, keyframes animation and font-face.
Table of Contents
Install
This project uses node and npm. Go check them out if you don't have them locally installed.
$ npm install --save-dev stylord
Usage
import createStyles from 'stylord'import React Component from 'react' const style = { return <div => Hello World </div> }
Media queries
import createStyles from 'stylord'import React Component from 'react' const style = { return <div => Hello World </div> }
Pseudo-classes and pseudo-elements
import createStyles from 'stylord'import React Component from 'react' const style = { return <div => Hello World </div> }
Keyframes animation
import createStyles createKeyframes from 'stylord'import React Component from 'react' // Animation taken from https://github.com/daneden/animate.css/blob/master/source/attention_seekers/bounce.cssconst animations = const style = { return <div => Hello World </div> }
Font-face
import createStyles createFontFace from 'stylord'import React Component from 'react' const style = { return <div => Hello World </div> }
Globals
Stylord provide a simple way to handle global css rules, it's a very useful feature to reset any unwanted default css properties. But with great power comes great responsibility, so use it wisely.
import createStyles createGlobals from 'stylord'import React Component from 'react' const style = { return <div => Hello World </div> }
Support
API
createStyles
Create a stylesheet and inject it to the head of the application.
Parameters
rules
Object CSS rules to be rendered.
Examples
// returns {modal: 'modal_hgdfgf', button: 'button_guyhg'}
Returns Object the class names of the css modules created.
createKeyframes
Create a keyframe animation and inject it to the head of the application.
Parameters
rules
Object CSS keyframe to be create.
Examples
// returns {fade: 'fade_hgdfgf'}
Returns Object the names of the keyframes created.
createFontFace
Create a font-face and inject it to the head of the application.
Parameters
rules
Object CSS font-face rules to be rendered.
Examples
createGlobals
Create a global css and inject it to the head of the application.
Parameters
rules
Object CSS global rules to be rendered.
Examples
Contributing
See the contributing file.