gugutz/stylord

Javascript styles made easy

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
• Usage
  • Media Queries
  • Pseudo-classes and pseudo-elements
  • Keyframes animation
  • Font-face
  • Globals
• Support
• API
• Contributing
• License

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 = createStyles({
  app: {
    color: 'blue',
    fontSize: '20px'
  }
})

class App extends Component {
  render() {
    return <div className={style.app}>
      Hello World
    </div>
  }
}

Media queries

import {createStyles} from 'stylord'
import React, {Component} from 'react'

const style = createStyles({
  app: {
    color: 'blue',
    '@media screen and (min-width: 300px)': {
      color: 'red'
    },
    '@media screen and (min-width: 600px)': {
      color: 'pink'
    },
    '@media screen and (min-width: 900px)': {
      color: 'yellow'
    }
  }
})

class App extends Component {
  render() {
    return <div className={style.app}>
      Hello World
    </div>
  }
}

Pseudo-classes and pseudo-elements

import {createStyles} from 'stylord'
import React, {Component} from 'react'

const style = createStyles({
  app: {
    color: 'blue',
    position: 'relative'
    ':hover': {
      color: 'red'
    },
    '::before': {
      backgroundColor: 'green',
      content: '""', // You must provide the content as it will be in the css
      display: 'block',
      left: 0,
      position: 'absolute',
      top: 0
    }
  }
})

class App extends Component {
  render() {
    return <div className={style.app}>
      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.css
const animations = createKeyframes({
  bounce: {
    'from, 20%, 53%, 80%, to': {
      animationTimingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',
      transform: 'translate3d(0,0,0)'
    },
    '40%, 43%': {
      animationTimingFunction: 'cubic-bezier(0.755, 0.050, 0.855, 0.060)',
      transform: 'translate3d(0, -30px, 0)'
    }
    '70%': {
      animationTimingFunction: 'cubic-bezier(0.755, 0.050, 0.855, 0.060)',
      transform: 'translate3d(0, -15px, 0)'
    },
    '90%': {
      transform: 'translate3d(0,-4px,0)'
    }
  }
})

const style = createStyles({
  app: {
    animationDuration: '1s',
    animationFill-mode: 'both',
    animationName: animations.bounce,
    transformOrigin: 'center bottom'
  }
})

class App extends Component {
  render() {
    return <div className={style.app}>
      Hello World
    </div>
  }
}

Font-face

import {createStyles, createFontFace} from 'stylord'
import React, {Component} from 'react'

createFontFace({
  fontFamily: 'Roboto',
  fontStyle: 'normal',
  fontWeight: 400,
  src: 'local("Roboto"), local("Roboto-Regular"), url(path/to/font/roboto.woff2) format("woff2")'
})

const style = createStyles({
  app: {
    color: 'blue',
    fontSize: '20px',
    fontFamily: '"Roboto", sans-serif'
  }
})

class App extends Component {
  render() {
    return <div className={style.app}>
      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'

createGlobals({
  '*': {
    border: 0,
    margin: 0,
    padding: 0
  },
  '*, *::after, *::before': {
    boxSizing: border-box
  }
})

const style = createStyles({
  app: {
    color: 'blue',
    fontSize: '20px'
  }
})

class App extends Component {
  render() {
    return <div className={style.app}>
      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'}
createStyles({
  modal: {
    width: '100%'
  },
  button: {
    borderRadius: '2px'
  }
})

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'}
stylord({
  fade: {
    from: {
      opacity: 1
    },
    to: {
      opacity: 0
    }
  }
})

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

createFontFace({
  fontFamily: 'MyHelvetica',
  src: 'local("Helvetica Neue Bold"), url(MgOpenModernaBold.ttf)',
  fontWeight: 'bold'
})

createGlobals

Create a global css and inject it to the head of the application.

Parameters

• rules Object CSS global rules to be rendered.

Examples

createGlobals({
  '*': {
    border: 0,
    boxSizing: 'inherit',
    margin: 0,
    padding: 0,
    outline: 0,
    verticalAlign: 'baseline'
  },
  body: {
    boxSizing: 'border-box',
    lineHeight: 1.5
  }
})

Contributing

See the contributing file.

License

MIT License © Gustavo P Borges