{"id":23654138,"url":"https://github.com/frontend-layers/scss-reset","last_synced_at":"2025-07-03T07:34:51.907Z","repository":{"id":55622427,"uuid":"214279458","full_name":"Frontend-Layers/scss-reset","owner":"Frontend-Layers","description":"SCSS reset compilation: modern + mayers + normalizer","archived":false,"fork":false,"pushed_at":"2025-01-19T02:38:57.000Z","size":438,"stargazers_count":20,"open_issues_count":1,"forks_count":17,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-17T04:48:04.596Z","etag":null,"topics":["css","front-end","normalize","reset","sass","scss","shopify","typography"],"latest_commit_sha":null,"homepage":"https://frontend-layers.github.io/scss-reset/test/index.html","language":"SCSS","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/Frontend-Layers.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2019-10-10T20:28:35.000Z","updated_at":"2025-06-16T07:45:06.000Z","dependencies_parsed_at":"2025-02-20T08:11:13.843Z","dependency_job_id":"9230175c-0762-4f66-a02e-add79fe54f8b","html_url":"https://github.com/Frontend-Layers/scss-reset","commit_stats":null,"previous_names":["andreymatin/scss-reset"],"tags_count":18,"template":false,"template_full_name":null,"purl":"pkg:github/Frontend-Layers/scss-reset","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Frontend-Layers%2Fscss-reset","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Frontend-Layers%2Fscss-reset/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Frontend-Layers%2Fscss-reset/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Frontend-Layers%2Fscss-reset/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Frontend-Layers","download_url":"https://codeload.github.com/Frontend-Layers/scss-reset/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Frontend-Layers%2Fscss-reset/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263283518,"owners_count":23442361,"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","front-end","normalize","reset","sass","scss","shopify","typography"],"created_at":"2024-12-28T18:43:23.249Z","updated_at":"2025-07-03T07:34:51.881Z","avatar_url":"https://github.com/Frontend-Layers.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SCSS Reset\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n[![npm](https://img.shields.io/npm/v/scss-reset?color=%23cb0000)](https://www.npmjs.com/package/scss-reset)\n[![npm](https://img.shields.io/npm/dw/scss-reset)](https://www.npmjs.com/package/scss-reset)\n\n_Reset compilation = modern reset + Meyer's reset + normalizer_\n\nDemo: https://frontend-layers.github.io/scss-reset/test/index.html\n\n## Features\n\n- Based on [Meyer's CSS Reset](https://meyerweb.com/eric/tools/css/reset/)\n- Modernized [modern-css-reset](https://github.com/hankchizljaw/modern-css-reset)\n- Useful parts from [normalize.css](https://necolas.github.io/normalize.css/)\n- Optional typography and mobile friendly definitions by SCSS variables (REM, BEM(int))\n- Expandable by prebuilded mixins and ports (Accessability, HTML and Web Components, etc.)\n\n## Why\n\nTo instantly fix some persistent CSS issues and add missing parts for popular CSS resets.\nIt is also compatible with other HTML/CSS frameworks like Twitter Bootstrap, Tailwind CSS, etc.\nYou can extend reset styles by a mixin collection and easily improve it.\n\n## Install\n\n```shell\nnpm i scss-reset --save-dev\n```\n\n## Usage\n\nPlease include at the top of the `main.scss`:\n\n```scss\n@use 'scss-reset';\n```\n\n## Ports\n\n| Title              | Usage                        | Description                                                                                                       |\n|--------------------|------------------------------|-------------------------------------------------------------------------------------------------------------------|\n| total-reset.scss   | @use 'scss-reset/total';     | Provides a deep CSS reset, ideal for web components and plugins to ensure consistent styling across environments. |\n| light-reset.scss   | @use 'scss-reset/light';     | Offers a lightweight reset with maximum compatibility for use alongside popular CSS frameworks.                   |\n\n\n## Troubleshooting\n\n### Install variations\n\nby yarn\n\n```shell\nyarn add scss-reset --dev\n```\n\nby pnpm\n\n```shell\npnpm i scss-reset --dev\n```\n\n\n#### Import variations\n\n```scss\n@import 'scss-reset';\n```\n\nor\n\n```scss\n@use 'scss-reset/reset';\n```\n\nor depending on your workspace configuration, this will work too:\n\n```scss\n@use '../node_modules/scss-reset/src/scss/_reset.scss';\n```\n\nor:\n\n```scss\n@use '../node_modules/scss-reset/_reset.scss';\n```\n\nor by the (mostly) deprecated way:\n\nor\n\n```scss\n@import 'scss-reset/reset';\n```\n\n## CDN\n\nOptimized and compressed CSS version for _reset.scss\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/scss-reset/reset.css\"\u003e\n```\n\nTransferred size: 3.62 kB\n\n## Typography Usage\n\n- _variables.scss\n- _typography.scss\n\n⚠️ _variables.scss and _typography.scss are optional.\n\nYou can copy them from to development folder for additional custom modifications\n\n```\n'node_modules/scss-reset/src/scss/_variables.scss';\n'node_modules/scss-reset/src/scss/_typography.scss';\n```\n\n### Usage with Shopify Dawn theme\n\n- Please copy the `reset-shopify-down.css` file from the `/res` npm folder to the `/assets` theme folder.\n- Please include the `reset-shopify-down.css` file in `layout/theme.liquid/` after `base.css`.\n\n```liquid\n{{ 'reset-shopify-down.css' | asset_url | stylesheet_tag }}\n```\n\n## Total Reset\n\n`total-reset.scss` Designed for Web Components, modern JavaScript applications, or browser extensions.\nIdeal when you need to ❗**deep reset all properties**❗ of Shadow DOM elements without **resetting document styles**.\n\n```scss\n@use 'scss-reset/total';\n```\n\n## Light Reset\n\n`light-reset.scss` -- Ideal for use with popular CSS frameworks and offering maximum compatibility\n\n```scss\n@use 'scss-reset/light';\n```\n\n## Mixins\n\nPlease include into necessary module:\n\n```scss\n@use 'scss-reset/reset-mixins' as *;\n```\n\n### Available Mixins\n\n| Mixins             | Include                      | Description                                       |\n|--------------------|------------------------------|---------------------------------------------------|\n| disableAnimation   | @include disableAnimation;   | Disable CSS animation                             |\n| acDisableAnimation | @include acDisableAnimation; | Disable CSS animation depends of OS configuration |\n| acModeBW           | @include acModeBW;           | Grayscale Mode                                    |\n| acModeContrast     | @include acModeContrast;     | Contrast Mode with Inverted colors                |\n| meterReset         | @include meterReset;         | Styles reset for ```\u003cmeter\u003e```                    |\n| progressReset      | @include progressReset;      | Styles reset for ```\u003cprogress\u003e```                 |\n| inputColorReset    | @include inputColorReset;    | Rest for input type:color                         |\n| offx               | @include offx;               | Prevent horizontal overflow issues for elements   |\n| offxAll            | @include offxAll;            | offx for whole document                           |\n\n\n### @mixin offxAll\n\nThis mixin adds the following snippet:\n\n```css\nhtml, body {\n  overflow-x: hidden\n}\n```\n\nPlease be careful. You'll get scroll fix for whole page, but:\n\n- However, this can cause accessibility issues because it permanently hides overflow content\n- CSS property `position: sticky;` doesn't work because an ancestor element (`html, body`) has overflow property set.\n\nPlease use `@include offx;` for selected block elements instead of to avoid CSS 'sticky' and UX issues.\nFor example:\n\n```scss\n.page-content {\n  @include offx;\n}\n```\n\n## Contributing\n\nFor issues, bugs or improvements please open an [issue](https://github.com/frontend-layers/scss-reset/issues/new)\n\n---\n[MIT License](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrontend-layers%2Fscss-reset","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffrontend-layers%2Fscss-reset","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrontend-layers%2Fscss-reset/lists"}