https://github.com/smallhelm/js-managed-css

Define and insert CSS via javascript. This also generates unique class and id names automatically. Handy when using virtual-dom (or react) inline css as your primary styling.
https://github.com/smallhelm/js-managed-css

Last synced: 10 months ago
JSON representation

Define and insert CSS via javascript. This also generates unique class and id names automatically. Handy when using virtual-dom (or react) inline css as your primary styling.

• Host: GitHub
• URL: https://github.com/smallhelm/js-managed-css
• Owner: smallhelm
• License: mit
• Created: 2015-12-03T00:14:38.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2016-05-25T15:27:17.000Z (about 10 years ago)
• Last Synced: 2024-12-04T23:02:42.748Z (over 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 10.7 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# js-managed-css

[![build status](https://secure.travis-ci.org/smallhelm/js-managed-css.svg)](https://travis-ci.org/smallhelm/js-managed-css)

[![dependency status](https://david-dm.org/smallhelm/js-managed-css.svg)](https://david-dm.org/smallhelm/js-managed-css)

Define and insert CSS via javascript. This also generates unique class and id names automatically. Handy when using virtual-dom (or react) inline css as your primary styling.

```js

var jsCss = require("js-managed-css");

var btn_height = 10;

var vars = jsCss({

  ".$btn": {

    "color": "blue",

    "height": btn_height + "px",

    ":hover": {

      "color": "red"

    },

    "&.active": {

      "color": "yello"

    }

  },

  "#$nav": {

    "> .$link": {

      "margin": "0 auto"

    }

  }

});

//At this point your css was compiled and inserted into the DOM

//"vars" is an object where the keys are your variable names and

//the values are the generated names

//now in your rendering code you can use variables from your css 

h("a." + vars.btn, "click me")

```

## Why?

Modular css code that lives right next to the js code that depends on it.

## License

MIT