quick-styles💨

Quickly create attributes and inline-styles. Best paired with a functional css utility library like gr8 or tachyons

Usage

var qs = require('quick-styles')
var html = require('bel')

var attributes = qs('c6 p1 tac', { borderBottom: '1px solid red' })

var element = html`<div ${attributes}></div>`

Resulting element

<div class="c6 p1 tac" style="border-bottom:1px solid red"></div>

API

attributes = qs(classnames, extras)

Returns html attributes as object. classnames expects a string of classnames, extras expects an object of css properties or additional attributes and values:

qs('c6 p1 tac', { 
  borderBottom: '1px solid red',
  sm: 'c8 p2 tal',
  md: 'c12'
})

<div class="c6 p1 tac" sm="c8 p2 tal" md="c12" style="border-bottom:1px solid red"></div>

qs.set([opts])

Set some global options. Shared throughout app – set once, use everywhere. Defaults:

qs.set({
  attributes: ['sm', 'md', 'lg'],
  inlineStyles: true
})

• attributes Array of attribute names which should not be interpreted as inline-styles
• inlineStyles Enable/Disable css property object → inline-styles (potentially useful in preact/react land where this conversion is handled for you)

See Also

• gr8
• gr8-util
• lilcss

License

MIT

Todo

• [ ] Asserts
• [ ] Browserify Transform? (to extract selectors from css)
• [ ] Tests