Rasty

npm install rasty

Rasty provides you yet another styling way in JS.

Use Rasty with React.

Features

• Style mixin
• States (eg.:hover) supported
• Media queries supported
• Keyframes supported

Usage

Basic

Define style

const style = Rasty.define({
  display: 'block',
  marginTop: '30px',
  fontSize: '1.2em'
});

Set className to HTML element

render() {
  return (
    <p className={style.className()}>
      Lorem ipsum
    </p>
  );
}

Using states

Define style

const style = Rasty.define({
  opacity: 0,
  transition: 'opacity .3s',
  ':hover': {
    opacity: 1
  }
});

Set className to HTML element

render() {
  return (
    <p className={style.className()}>
      Lorem ipsum
    </p>
  );
}

Using className modifier

Define style

const style = Rasty.define({
  display: 'block',
  '.isHidden': {
    display: 'none'
  }
});

Set className to HTML element

render() {
  return (
    <p className={style.className({isHidden: this.state.isHidden})}>
      Lorem ipsum
    </p>
  );
}

Using media queries

Define style

const style = Rasty.define({
  display: 'block',
  '@media screen and (max-width:320px)': {
    display: 'none'
  }
});

Set className to HTML element

render() {
  return (
    <p className={style.className()}>
      Lorem ipsum
    </p>
  );
}

Also, you can generate media query

ES6 syntax

const devices = {
  mobile: Rasty.mediaQuery({
    type: 'screen',
    maxWidth: '320px'
  }),
  desktop: Rasty.mediaQuery({
    type: 'screen',
    minWidth: '1050px'
  })
}
 
const style = Rasty.define({
  color: 'white',
  [devices.mobile]: {
    color: 'green'
  },
  [devices.desktop]: {
    color: 'blue'
  }
});

Nesting style

Define style

const style = Rasty.define({
  color: 'white',
  opacity: 0,
  '.isFoo': {
    color: 'red'
  },
  '.isBar': {
    opacity: 1,
    '.isFoo': {
      color: 'yellow'
    }
  }
});

Set className to HTML element

render() {
  return (
    <p className={style.className({isFoo: this.state.isFoo, isBar: this.state.isBar})}>
      Lorem ipsum
    </p>
  );
}

Keyframes

const keyframes = Rasty.keyframes({
  '0%': {width: '10%'},
  '50%': {width: '50%'},
  '100%': {width: '10%'}
});
 
const style = Rasty.define({
  animation: `${keyframes} 3s ease 0s infinite`
});