brisky-style's Introduction

brisky-style

Set style properties on brisky-elements, automatically adds prefixes

basic

  const render = require('brisky/render')
  const app = render({
    field: {
      style: {
        opacity: {
          $: 'animal',
          $transform: (val) => val === 'cat' ? 1 : 0
        }
      }
    }
  }, { animal: 'cat' })

  // returns opacity 1 when state.animal equals "cat"

Automaticly converts numbers to [number] + px

width
height
left
right
bottom
top
margin
padding

  const render = require('brisky/render')
  const app = render({
    field: {
      style: {
        width: { $: width }
      }
    }
  }, { width: 100 })

  // renders a div with width: 100px

Add your own px property

  const render = require('brisky/render')
  const app = render({
    field: {
      style: {
        something: {
          type: 'px',
          $: 'something'
        }
      }
    }
  }, { something: 100 })
  // renders a div with style - something: 100px

transform

Adds helpers for x y and rotate

  const render = require('brisky/render')
  const app = render({
    field: {
      style: {
        transform: {
          x: { $: 'x' },
          y: { $: 'y' },
          rotate: { $: 'rotate' }
        }
      }
    }
  }, { x: 100, y 100, rotate: 20 })

  // renders a div with transform style
  // translate3d(100px,100px,0) scale(0.1) rotate(20deg)

Recommend Projects