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"

px

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)