{"id":22345775,"url":"https://github.com/gerhynes/css-variables","last_synced_at":"2025-08-07T04:51:28.992Z","repository":{"id":106044819,"uuid":"105706204","full_name":"gerhynes/css-variables","owner":"gerhynes","description":"A page to play with manipulating CSS variables using JavaScript. Built for Wes Bos' JavaScript 30 course. ","archived":false,"fork":false,"pushed_at":"2017-11-19T17:51:40.000Z","size":3,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-01-31T11:49:42.657Z","etag":null,"topics":["css-variables","javascript","javascript30"],"latest_commit_sha":null,"homepage":"https://gk-hynes.github.io/css-variables/","language":"HTML","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/gerhynes.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":"2017-10-03T21:37:46.000Z","updated_at":"2020-05-24T16:39:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"c6d898b1-1b33-491f-89b2-dc5e03ae85c8","html_url":"https://github.com/gerhynes/css-variables","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/gerhynes%2Fcss-variables","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fcss-variables/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fcss-variables/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fcss-variables/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gerhynes","download_url":"https://codeload.github.com/gerhynes/css-variables/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245632946,"owners_count":20647311,"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-variables","javascript","javascript30"],"created_at":"2024-12-04T09:18:40.223Z","updated_at":"2025-03-26T10:22:48.149Z","avatar_url":"https://github.com/gerhynes.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [CSS Variables](https://gk-hynes.github.io/css-variables/)\n\nA page to play with manipulating CSS variables using JavaScript. Built for Wes Bos' [JavaScript 30](https://javascript30.com/) course.\n\n[![Screenshot of CSS Variables page](https://screenshots.firefoxusercontent.com/images/baef2d16-7954-4f92-a092-fde4a3230bd0.png)](https://gk-hynes.github.io/css-variables/)\n\n## Notes\n\nCSS variables can be updated on thr fly with JavaScript. \n\nCSS variables are declared on an element or root. \n\n``` css\n:root {\n--base: #ffc600;\n--spacing: 10px;\n--blur: 10px;\n}\n```\n\nTo use a CSS variable use ```var(--variable-name)```\n\n``` css\nimg {\n    padding: var(--spacing);\n}\n```\n\n```document.querySelector()``` returns a node list, not an array. \n\nA node list has far fewer methods. It does, however, have ```forEach()```.\n\nThe spacing and blur variables have suffixes. Use data-attributes to handle this: ```data-sizing=\"px\"```.\n\n``` javascript\nconst suffix =  this.dataSet.sizing || \"\";\n```\n\n```dataSet``` is an object that will contain all of the data attributes from that specific element. \n\nUpdate the variables by selecting the entire document and setting a property of base, spacing, and blur. \n\nThen update the value inside ```handleUpdate()```: \n\n``` javascript\ndocument.documentElement.style.setProperty(`${this.name}`, this.value + suffix);\n```\n\nWhen you use a CSS variable you can update that variable on any element and any selectors inside of the element  which reference that variable will be updated. ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgerhynes%2Fcss-variables","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgerhynes%2Fcss-variables","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgerhynes%2Fcss-variables/lists"}