{"id":19466249,"url":"https://github.com/flaubert-dev/px-to-rem-css-variables","last_synced_at":"2025-02-25T13:45:03.938Z","repository":{"id":169900810,"uuid":"594548705","full_name":"flaubert-dev/px-to-rem-css-variables","owner":"flaubert-dev","description":"Yes, fast conversion from pixel to rem with CSS variables! See the secret...","archived":false,"fork":false,"pushed_at":"2023-06-01T21:10:57.000Z","size":20,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-08T03:56:20.012Z","etag":null,"topics":["accessibility","css","px-to-rem","variables-css"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flaubert-dev.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-28T22:09:50.000Z","updated_at":"2024-03-02T17:13:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"05addc95-7d68-44cc-9e25-53f8a422f916","html_url":"https://github.com/flaubert-dev/px-to-rem-css-variables","commit_stats":null,"previous_names":["flaubert-dev/px-to-rem-css-variables"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flaubert-dev%2Fpx-to-rem-css-variables","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flaubert-dev%2Fpx-to-rem-css-variables/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flaubert-dev%2Fpx-to-rem-css-variables/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flaubert-dev%2Fpx-to-rem-css-variables/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flaubert-dev","download_url":"https://codeload.github.com/flaubert-dev/px-to-rem-css-variables/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240679774,"owners_count":19840130,"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":["accessibility","css","px-to-rem","variables-css"],"created_at":"2024-11-10T18:26:18.148Z","updated_at":"2025-02-25T13:45:03.914Z","avatar_url":"https://github.com/flaubert-dev.png","language":"CSS","readme":"# Convert pixel to REM with CSS variables\n\nNow your page will have better accessibility😄\n\n## References\n\n\u003e W3Schools (Accessibility text size)\n\n```sh\nhttps://www.w3schools.com/accessibility/accessibility_text_size.php\n```\n\n\u003e Convert PX to REM with CSS variables\n\n```sh\nhttps://coryrylan.com/blog/converting-css-pixels-to-rems\n```\n\n## (CSS) Add this to your stylesheet\n\n```css\n/* \n  \u003e Convert PX to REM with CSS variables\n    \u003e\u003e Reference: https://coryrylan.com/blog/converting-css-pixels-to-rems\n*/\n\n:root {\n  /* PX TO REM */\n  --px-base: 16;\n  --px-to-rem: 1rem;\n\n  /* PX TO REM: 2-10 */\n  --px-2: calc(2 / var(--px-base) * var(--px-to-rem));\n  --px-4: calc(4 / var(--px-base) * var(--px-to-rem));\n  --px-6: calc(6 / var(--px-base) * var(--px-to-rem));\n  --px-8: calc(8 / var(--px-base) * var(--px-to-rem));\n  --px-10: calc(10 / var(--px-base) * var(--px-to-rem));\n  \n  /* PX TO REM: 12-20 */\n  --px-12: calc(12 / var(--px-base) * var(--px-to-rem));\n  --px-14: calc(14 / var(--px-base) * var(--px-to-rem));\n  --px-16: calc(16 / var(--px-base) * var(--px-to-rem));\n  --px-18: calc(18 / var(--px-base) * var(--px-to-rem));\n  --px-20: calc(20 / var(--px-base) * var(--px-to-rem));\n}\n\n/* \n  \u003e BEM Methodology (Custom)\n    \u003e\u003e .header\n      \u003e\u003e\u003e .header__nav\n        \u003e\u003e\u003e\u003e .header__nav-list\n          \u003e\u003e\u003e\u003e\u003e .header__nav-list-li\n            \u003e\u003e\u003e\u003e\u003e\u003e .header__nav-list-li-a \n*/\n\n.header__nav-list-li-a {\n  font-size: var(--px-20); /* PX to REM */\n}\n```\n\n## (HTML) Add this in the body of your page\n\n```html\n\u003cheader class=\"header\"\u003e\n  \u003cnav class=\"header__nav\"\u003e\n    \u003cul class=\"header__nav-list\"\u003e\n      \u003cli class=\"header__nav-list-li\"\u003e\n        \u003ca class=\"header__nav-list-li-a\" href=\"#\"\u003eHello Accessibility!\u003c/a\u003e\n      \u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/nav\u003e\n\u003c/header\u003e\n```\n\n## More details\n\n- Check out this style sheet: [px-to-rem.css](https://github.com/flaubert-dev/px-to-rem-css-variables/blob/main/px-to-rem.css)\n- Check out this HTML document: [px-to-rem.html](https://github.com/flaubert-dev/px-to-rem-css-variables/blob/main/px-to-rem.html)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflaubert-dev%2Fpx-to-rem-css-variables","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflaubert-dev%2Fpx-to-rem-css-variables","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflaubert-dev%2Fpx-to-rem-css-variables/lists"}