{"id":20511054,"url":"https://github.com/sean-codes/css-settings","last_synced_at":"2025-07-28T18:15:23.476Z","repository":{"id":91334737,"uuid":"121063756","full_name":"sean-codes/css-settings","owner":"sean-codes","description":"a settings tool for changing css properties and variables","archived":false,"fork":false,"pushed_at":"2018-03-06T16:48:22.000Z","size":1367,"stargazers_count":13,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-07-11T11:52:27.870Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sean-codes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-02-10T23:29:59.000Z","updated_at":"2022-01-25T23:14:43.000Z","dependencies_parsed_at":"2023-06-04T12:45:37.111Z","dependency_job_id":null,"html_url":"https://github.com/sean-codes/css-settings","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sean-codes/css-settings","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sean-codes%2Fcss-settings","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sean-codes%2Fcss-settings/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sean-codes%2Fcss-settings/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sean-codes%2Fcss-settings/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sean-codes","download_url":"https://codeload.github.com/sean-codes/css-settings/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sean-codes%2Fcss-settings/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267561850,"owners_count":24107741,"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","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":"2024-11-15T20:34:23.034Z","updated_at":"2025-07-28T18:15:23.424Z","avatar_url":"https://github.com/sean-codes.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# css-settings\na settings tool for changing css properties and variables\n\n![example gif](https://github.com/sean-codes/css-settings/blob/master/example.gif?raw=true\u0026v=2)\n\n# include\n\n```html\n  \u003cscript src=\"./CSSSettings.js\"\u003e\u003c/script\u003e\n```\n\n# example\nlive demo: [view demo](https://sean-codes.github.io/css-settings/demo/demo.html)\n\n```js\nnew CSSettings({\n    settings: [\n        {\n          label: 'max-width',\n          style: 'max-width',\n          suffix: 'px',\n          input: { type: 'range', min: 200, max: 300, value: 0 },\n          target: document.querySelector('.container')\n        },\n        {\n          label: 'perspective',\n          style: 'perspective',\n          suffix: 'px',\n          input: { type: 'range', min: 0, max: 1000, value: 300 },\n          target: document.querySelector('.container')\n        },\n        {\n          label: 'background',\n          style: 'background',\n          input: { type: 'text', value: '#465'},\n          target: document.querySelector('.child')\n        }\n    ]\n});\n```\n\n# setting options\n```js\n/**\n*   A setting to be created by CSS Settings\n*   @param {object} options - the options to be created / used by the setting\n*   @param {string} options.label - the display label for the setting\n*   @param {string} options.style - the style to update / change. Can be a CSS variable\n*   @param {object} options.input - the html input element to create and its attributes (type examples: 'range', 'select', 'text')\n*   @param {object} options.options - the html options to create if type: 'select' \n*   @param {HTMLElement} options.target - the html element to modify the style property of\n*   @param {Function} options.create - a function to run after the input element is created\n*   @param {Function} options.value - a function to run after the input value changes. return adjustments \n*/\n```\n\n\n# If you might need to do some magic to the value. \n\u003e handy for transform translate / scale / rotate\n\n\n\nIn the `setting` define `value`.\n\n```js\n  new CSSSettings({\n     settings: [\n        {\n           label: 'transform',\n           style: 'transform',\n           input: { type: 'range' value: 1 },\n           target: documentr.querySelector('something'),\n           value: function(value) {\n              return `translateX(${value})`;\n           }\n        }\n     ]\n  });\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsean-codes%2Fcss-settings","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsean-codes%2Fcss-settings","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsean-codes%2Fcss-settings/lists"}