tiny-style

0.1.2 • Public • Published

TinyStyle

A tiny (less than 1KB) JavaScript library for creating and manipulating stylesheets, with a similar API to jQuery. TinyStyle injects a <style> tag into the head of the page and generates CSS to fill it. This means you don't have to modify page elements directly, and the rules you define apply to new elements inserted into the page later. Performance is optimised on modern browsers using requestAnimationFrame to avoid excessive repainting of the page.

TinyStyle can be installed by downloading the minified JS here, or running npm install tiny-style if NPM is your cup of tea. It can then be included in a normal <script> tag or required using browserify.

Start by creating a stylesheet:

var ts = TinyStyle();

Then add rules in the same way you would change CSS properties using jQuery.

You can specify a rule and a value as two strings:

ts("body").css("width", "400px");

You can specify multiple rules as an object:

ts("p").css({
    color: "red",
    fontWeight: "bold",
    border: "1px solid black"
});

You can use CamelCase or dash-case for rule names:

ts(".active").css({fontSize: "18px"});
ts("a:link").css({"text-decoration": "none"});

Calling .css() with just a rule name returns its value:

ts("#banner").css({padding: "30px"});
ts("#banner").css("padding"); // returns "30px"

After running the examples above, the stylesheet will contain the following CSS:

body {
    width: 400px;
}
p {
    color: red;
    font-weight: bold;
    border: 1px solid black;
}
.active {
    font-size: 18px;
}
a:link {
    text-decoration: none;
}
#banner {
    padding: 30px;
}

The stylesheet element which TinyStyle created can be accessed direction using the stylesheet property:

ts.stylesheet; // returns <style> element

You can call remove() to destroy the stylesheet.

ts.remove();

That's it!

Readme

Keywords

none

Package Sidebar

Install

npm i tiny-style

Weekly Downloads

0

Version

0.1.2

License

MIT

Last publish

Collaborators

  • davidtimms