{"id":26641726,"url":"https://github.com/davidtimms/tiny-style","last_synced_at":"2026-03-09T16:42:58.003Z","repository":{"id":13198057,"uuid":"15881821","full_name":"DavidTimms/tiny-style","owner":"DavidTimms","description":"A tiny library for creating and manipulating head stylesheets with a similar API to jQuery","archived":false,"fork":false,"pushed_at":"2014-01-14T17:13:26.000Z","size":204,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-10T21:11:40.976Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DavidTimms.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-01-13T21:07:07.000Z","updated_at":"2018-09-13T08:46:07.000Z","dependencies_parsed_at":"2022-09-17T05:23:49.350Z","dependency_job_id":null,"html_url":"https://github.com/DavidTimms/tiny-style","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DavidTimms%2Ftiny-style","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DavidTimms%2Ftiny-style/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DavidTimms%2Ftiny-style/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DavidTimms%2Ftiny-style/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DavidTimms","download_url":"https://codeload.github.com/DavidTimms/tiny-style/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248298317,"owners_count":21080320,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-24T18:35:01.483Z","updated_at":"2026-03-09T16:42:57.961Z","avatar_url":"https://github.com/DavidTimms.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"TinyStyle\n==========\n\nA tiny (less than 1KB) JavaScript library for creating and manipulating stylesheets, with a similar API to jQuery. TinyStyle injects a \u0026lt;style\u0026gt; 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.\n\nTinyStyle 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 \u0026lt;script\u0026gt; tag or required using [browserify](http://browserify.org/).\n\nStart by creating a stylesheet:\n\n    var ts = TinyStyle();\n    \nThen add rules in the same way you would change CSS properties using jQuery.\n\nYou can specify a rule and a value as two strings:\n\n    ts(\"body\").css(\"width\", \"400px\");\n\nYou can specify multiple rules as an object:\n\n    ts(\"p\").css({\n        color: \"red\",\n        fontWeight: \"bold\",\n        border: \"1px solid black\"\n    });\n\nYou can use CamelCase or dash-case for rule names:\n\n    ts(\".active\").css({fontSize: \"18px\"});\n    ts(\"a:link\").css({\"text-decoration\": \"none\"});\n\nCalling .css() with just a rule name returns its value:\n\n    ts(\"#banner\").css({padding: \"30px\"});\n    ts(\"#banner\").css(\"padding\"); // returns \"30px\"\n\nAfter running the examples above, the stylesheet will contain the following CSS:\n\n    body {\n        width: 400px;\n    }\n    p {\n        color: red;\n        font-weight: bold;\n        border: 1px solid black;\n    }\n    .active {\n        font-size: 18px;\n    }\n    a:link {\n        text-decoration: none;\n    }\n    #banner {\n        padding: 30px;\n    }\n\nThe stylesheet element which TinyStyle created can be accessed direction using the stylesheet property:\n\n    ts.stylesheet; // returns \u003cstyle\u003e element\n\nYou can call remove() to destroy the stylesheet.\n    \n    ts.remove();\n\nThat's it!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidtimms%2Ftiny-style","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavidtimms%2Ftiny-style","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidtimms%2Ftiny-style/lists"}