https://github.com/davidtimms/tiny-style

A tiny library for creating and manipulating head stylesheets with a similar API to jQuery
https://github.com/davidtimms/tiny-style

Last synced: 14 days ago
JSON representation

A tiny library for creating and manipulating head stylesheets with a similar API to jQuery

• Host: GitHub
• URL: https://github.com/davidtimms/tiny-style
• Owner: DavidTimms
• License: mit
• Created: 2014-01-13T21:07:07.000Z (about 12 years ago)
• Default Branch: master
• Last Pushed: 2014-01-14T17:13:26.000Z (about 12 years ago)
• Last Synced: 2025-04-10T21:11:40.976Z (12 months ago)
• Language: JavaScript
• Size: 199 KB
• Stars: 8
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
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](https://developer.mozilla.org/en/docs/Web/API/window.requestAnimationFrame) to avoid excessive repainting of the page.

TinyStyle can be installed by downloading the [minified JS here](https://raw2.github.com/DavidTimms/tiny-style/master/tiny-style.min.js), 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](http://browserify.org/).

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  element

You can call remove() to destroy the stylesheet.

    

    ts.remove();

That's it!