{"id":20468710,"url":"https://github.com/aneekrahman/jstyling","last_synced_at":"2026-04-11T07:04:42.758Z","repository":{"id":57286492,"uuid":"290347599","full_name":"AneekRahman/jstyling","owner":"AneekRahman","description":"JStyling is a library which can do Styling totally inside of JavaScript. React.JS inspired object passing in as the styling. No more having to make everything look gibberish inside your JS file to update or set the styling.","archived":false,"fork":false,"pushed_at":"2020-08-29T06:16:28.000Z","size":12571,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-16T10:36:30.760Z","etag":null,"topics":["css","css-in-js","javascript","only-one-file","script-styling","style","styling","styling-css","styling-css-in-js","syntax","ui","ui-components"],"latest_commit_sha":null,"homepage":"","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/AneekRahman.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":"2020-08-25T23:40:46.000Z","updated_at":"2022-10-13T20:27:02.000Z","dependencies_parsed_at":"2022-09-20T00:21:13.910Z","dependency_job_id":null,"html_url":"https://github.com/AneekRahman/jstyling","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/AneekRahman%2Fjstyling","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AneekRahman%2Fjstyling/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AneekRahman%2Fjstyling/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AneekRahman%2Fjstyling/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AneekRahman","download_url":"https://codeload.github.com/AneekRahman/jstyling/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242031452,"owners_count":20060586,"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":["css","css-in-js","javascript","only-one-file","script-styling","style","styling","styling-css","styling-css-in-js","syntax","ui","ui-components"],"created_at":"2024-11-15T14:06:41.100Z","updated_at":"2025-12-06T07:02:16.531Z","avatar_url":"https://github.com/AneekRahman.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"##### \u003cimg src=\"./docs/jstyling-logo.svg\" height=\"120\"\u003e\n\n\u003cb\u003e _- I don't hate css files, but you just won't need them anymore._ \u003c/b\u003e\n\n[![NPM Version][npm-image]][npm-url]\n[![NPM Downloads][downloads-image]][downloads-url]\n\n[npm-image]: https://img.shields.io/npm/v/jstyling.svg\n[npm-url]: https://npmjs.org/package/jstyling\n[downloads-image]: https://img.shields.io/npm/dm/jstyling.svg\n[downloads-url]: https://npmjs.org/package/jstyling\n\n# Intro\n\n\u003cb\u003eYou won't ever need a CSS file every again! Why not just do everything in JavaScript!\u003c/b\u003e\n\nThis is a library which can do Styling totally inside of JavaScript.\n\nReact.JS inspired object passing in as the styling, and CSS like element selection!\nNo more having to make everything look gibberish inside your JS file for styling.\n\n# What's new in v1.0.13\n\n- Ability to animate using `.animate()`\n- Write raw CSS in JS using `.setStyle()`\n\n# Example\n\n\u003cimg src=\"./docs/example.gif\" width=\"350px\"\u003e\n\nCode for this inside `example/client.js` (Check out how simple it is!)\n\n# Intro Code Example\n\n```\n// Style it! Keep it Neat \u0026 Clean\nJS(\"button\").style({\n  backgroundColor: \"transparent\",\n  backgroundImage: \"linear-gradient(rgba(0,0,0,.02), rgba(0,0,0,.03))\",\n  border: \"1px solid rgba(0,0,0,.05)\",\n  color: \"#006edb\",\n  padding: \".5em 1.6em\",\n  borderRadius: \".5em\",\n  boxShadow: \"0px 1px 3px rgba(0,0,0,0.04)\",\n});\n```\n\n\u003cp style=\"color: rgba(0,0,0,0.4)\"\u003eAlso help the development by reporting any bugs. Feel free to contribute to this project. Thanks ❤\u003c/p\u003e\n\n# Benefits\n\n- Easy and readable syntax\n- IT'S JUST ONE JS FILE, NO CSS\n- Extremely lightweight: Only 1.2kB (500B gzipped!)\n\n# CDN\n\n```\n\u003cscript src=\"https://unpkg.com/jstyling@1.0.13/src/jstyling.js\"\u003e\n```\n\n# NPM Installation\n\n```\nnpm i jstyling\n```\n\n# Docs\n\n## .style()\n\nSet the styling using this method:\n\n```\n// You pass in a JavaScript Object to .style({})\nJS(\"button\").style({\n  backgroundColor: \"transparent\",\n  backgroundImage: \"linear-gradient(rgba(0,0,0,.02), rgba(0,0,0,.03))\",\n  border: \"1px solid rgba(0,0,0,.05)\",\n  color: \"#006edb\",\n  padding: \".5em 1.6em\",\n  borderRadius: \".5em\",\n  boxShadow: \"0px 1px 3px rgba(0,0,0,0.04)\",\n});\n```\n\nSelect any elements just like you would in CSS:\n\n```\nJS(\"h4\").style(style); // Every h4\nJS(\"#hero\").style(style); // Just #hero\nJS(\"ul li\").style(style); // Children of ul\n\n// Also DOMElements work!\nconst element = document.querySelector(\"p\");\nJS(element).style(style);\n```\n\nReapply new styles on callbacks:\n\n```\n// Set a transition to get the animation effect!\nJS(\"#hero\").style({\n  width: \"100%\",\n  height: \"500px\",\n  backgroundColor: \"orange\",\n});\n\ndocument\n  .querySelector(\"button\")\n  .addEventListener(\"mousedown\", () =\u003e {\n\n  JS(\"#hero\").style({\n    style.transform = \"translateX(30px)\"\n  });\n});\n```\n\n## .animate()\n\nIf you want to animate an element, you should use this method.\n\n```\nJS(\"#button3\").animate({\n  styles: {\n    backgroundColor: \"#006edb\",\n    height: \"500px\",\n  },\n  duration: 1000,\n  ease: \"ease-in-out\",\n});\n```\n\n`.animate()` takes in an `Object` with these parameters:\n\n1. `styles:` - Pass in a styling `Object` consisting all of your styles you want to animate in.\n2. `duration:` - Duration of the animation in `integer` miliseconds.\n3. `ease:` - The transition-timing-function easing as `string`. All of the CSS easing work\n\n## .setStyle()\n\nIf you feel like you can't access anything from the JavaScript Style Object, you can always use this method to write the CSS, inside of JavaScript of course.\n\n```\n// Use backticks as they can give you multi-line strings!\nJS().setStyle(`\n  * {\n    font-family: Arial\n  }\n  h2::after{\n    content: \"hello\"\n  }\n`);\n```\n\n---\n\n# Styling Options\n\n```\nJS(\"#indentifier\").style({\n  // Your styles go here!\n  maxHeight: \"\",\n  fontSize: \"\",\n  color: \"\",\n  // ...\n  // Remember, it's all camelCase\n});\n```\n\n\u003cb\u003eThe full list of all the options are the same as vanilla javascript. You can follow this useful guide for all the possible options:\u003cb\u003e\n\n[w3schools.com](https://www.w3schools.com/jsref/dom_obj_style.asp)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faneekrahman%2Fjstyling","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faneekrahman%2Fjstyling","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faneekrahman%2Fjstyling/lists"}