0.0.13 • Published 10 years ago

rasty v0.0.13

Weekly downloads
3
License
MIT
Repository
github
Last release
10 years ago

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`
});
0.0.13

10 years ago

0.0.12

10 years ago

0.0.11

10 years ago

0.0.10

10 years ago

0.0.9

10 years ago

0.0.8

10 years ago

0.0.7

10 years ago

0.0.6

10 years ago

0.0.5

10 years ago

0.0.4

10 years ago

0.0.3

10 years ago

0.0.2

10 years ago

0.0.1

10 years ago