Home

Awesome

DEPRECATED

This repository has been deprecated and will not be maintained.

veinjs

Injects CSS into the document (it's a perfectly legal procedure)

What is CSS injection?

CSS injection is the process of injecting CSS definitions into a document dynamically.

If you want to see it in action, see this demo: http://israelidanny.github.io/veinjs/

Why inject?

How do I use veinjs?

Step 1 - Include your Javascript

Veinjs has no dependencies, so just include vein.js, wherever it lives on your server:

<script src="vein.js"></script>

Step 2 - Inject!

Now you can inject CSS.

Here are a few examples:

Basic Usage

Let's change all our headers to the color red.

vein.inject('h1', {'color' : 'red'});

Multiple Selectors

Now, let's change both h2 and h3 to greens, and make them bold!

vein.inject(['h2', 'h3'], {'color' : 'green', 'font-weight' : 'bold'});

Canceling a property

Alright, maybe not bold...

vein.inject(['h2', 'h3'], {'color' : 'green', 'font-weight' : null});

Canceling a ruleset by selector

You know what? Red headers look ugly, let's cancel that.

vein.inject('h1', null);

Media Queries

veinjs works with media queries, just like it does with regular selectors.

For instance, let's dynamically apply CSS to make all our secondary headers red on small screens!

vein.inject([{
    '@media (max-width: 768px)': ['h2']
}], {
    'color': '#f00'
});

Component support

var vein = require('veinjs');
vein.inject('h1', {'color' : 'red'});

That's about all there is to know! Happy injecting! If you find any interesting uses for this little library, please let me know!

Issues and Pull Requests are more than welcome!

If you have any questions, drop me a line at: danny@caffeine.co.il