Home

Awesome

glamor

Join the chat at https://gitter.im/glamor-css/Lobby

build status

css in your javascript

npm install glamor --save

usage

import { css } from 'glamor'

// make css rules
let rule = css({
  color: 'red',
  ':hover': {
    color: 'pink'
  },
  '@media(min-width: 300px)': {
    color: 'green',
    ':hover': {
      color: 'yellow'
    }
  }
})

// add as data attributes
<div {...rule} {...another}>
  zomg
</div>

// or as classes
<div className={`${rule} ${another}`}>
  zomg
</div>

// merge rules for great justice
let mono = css({
  fontFamily: 'monospace'
})

let bolder = css({
  fontWeight: 'bolder'
})

<div {...css(mono, bolder)}>
  bold code!
</div>

motivation

This expands on ideas from @vjeux's 2014 css-in-js talk. We introduce an api to annotate arbitrary dom nodes with style definitions ("rules") for, um, the greater good.

features

(thanks to BrowserStack for providing the infrastructure that allows us to run our build in real browsers.)

docs

extras

speedy mode

there are two methods by which the library adds styles to the document -

as a compromise, we enable the former 'speedy' mode NODE_ENV=production, and disable it otherwise. You can manually toggle this with the speedy() function.

characteristics

while glamor shares most common attributes of other inline style / css-in-js systems, here are some key differences -

todo

profit, profit

I get it