{"id":15011665,"url":"https://github.com/stephenmirving/betterize","last_synced_at":"2025-04-09T19:10:39.273Z","repository":{"id":47889061,"uuid":"241215578","full_name":"stephenmirving/betterize","owner":"stephenmirving","description":"A modern and opinionated CSS normalization file for better cross-browser design and default styling in 2024 and beyond!","archived":false,"fork":false,"pushed_at":"2024-03-31T06:49:31.000Z","size":499,"stargazers_count":4,"open_issues_count":8,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-09T19:10:29.917Z","etag":null,"topics":["bootstrap-reboot","css","css-normalization","css-reset","less","less-css","normalize","normalize-css","normalizer","reboot","reset-css","sanitize","sanitize-css","sass","scss","scss-files"],"latest_commit_sha":null,"homepage":"","language":"CSS","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/stephenmirving.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}},"created_at":"2020-02-17T21:52:18.000Z","updated_at":"2024-03-16T19:53:29.000Z","dependencies_parsed_at":"2024-01-18T23:01:15.504Z","dependency_job_id":"aa572530-6a18-4ab0-864b-560f1db2c14c","html_url":"https://github.com/stephenmirving/betterize","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/stephenmirving%2Fbetterize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stephenmirving%2Fbetterize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stephenmirving%2Fbetterize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stephenmirving%2Fbetterize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stephenmirving","download_url":"https://codeload.github.com/stephenmirving/betterize/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248094992,"owners_count":21046770,"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":["bootstrap-reboot","css","css-normalization","css-reset","less","less-css","normalize","normalize-css","normalizer","reboot","reset-css","sanitize","sanitize-css","sass","scss","scss-files"],"created_at":"2024-09-24T19:41:24.943Z","updated_at":"2025-04-09T19:10:39.248Z","avatar_url":"https://github.com/stephenmirving.png","language":"CSS","readme":"# betterize\n\n_Betterize_ is a **modern** and _opinionated_ CSS normalization file for better\nfoundational styling and cross-browser design in 2024 and beyond.\n\nInstead of CSS resets that will overwrite all the user-agent styles and require\nyou to add much of what was taken away back in yourself, CSS normalization seeks\nto make your markup render consistently across browsers while maintaining modern\nstandards.\n\nWith [normalize.css](https://necolas.github.io/normalize.css/) remaining\nunchanged for more than 6 years now, it is now necessary to expand upon it.\nTo remove old fixes that are no longer necessary and take\nadvantage of modern CSS properties. To provide broad cross-browser and legacy\nsupport and improve the experience of developing stylesheets for the web.\n\n## Table of Contents\n\n1. [Version](#version)\n2. [Deployment](#deployment)\n3. [Opinionated Design Choices](#opinionated-design-choices)\n4. [Betterize Vs. Betterize-Slim](#betterize-vs-betterize-slim)\n5. [Recent Updates](#recent-updates)\n6. [Print Styles](#print-styles)\n7. [Contributions](#contributions)\n8. [License](#license)\n9. [Questions](#questions)\n10. [Smoother](#smoother)\n11. [Authors](#authors)\n\n## Version\n\n**This is _betterize_ version 2.0.9 - Last updated: 03/30/2024**\n\n_Betterize_ is available in `.css`, `.min.css`, `.sass`, `.scss`, and `.less` versions.\n\nThere is also a print stylesheet available in all of these file types as well.\nSee: [Print Styles](#print-styles).\n\nThe file size of betterize.min.css is 11.61kB and is 3.6kB minified and Gzipped.\n\nThe file size of betterize-slim.min.css is 9.29kB and is 3.22kB minified and Gzipped.\n\n## Deployment\n\n_Betterize is now available on NPM! To install using NPM, simply run:\n\n```bash\nnpm i betterize\n```\n\nYou can see _Betterize_ on the NPM website here:\n[https://www.npmjs.com/package/betterize](https://www.npmjs.com/package/betterize)\n\nAlternately, you can use _Betterize_ by simply downloading [the _Betterize_ repo](https://github.com/stephenmirving/betterize).\n\nAfter using either method, you will need to choose which version of the file you\nwill use. This depends on which CSS preprocessor you are using, or if you are\nusing one at all. _Betterize_ is included as a CSS file and a minified CSS file,\nbut there are also versions for CSS preprocessors [Less](https://lesscss.org/)\nand [Sass](https://sass-lang.com/) (both `.sass` and `.scss` syntax available).\n\nNext decide if you want to use betterize or betterize-slim. While betterize\nattempts to offer maximum browser and device compatibility, from bleeding-edge\nto legacy, betterize-slim attempts to trim the fat by removing all styles and\nbug fixes that only benefit very old browsers, such as those that only target\nInternet Explorer.\n\nChoose the file version and type you want and either copy it from the\n`node_modules/betterize` folder, or the downloaded repo folder, and paste it\ninto your project. You could also have your build process pull it directly from\nthe `node_modules` folder.\n\nOf course, you can also simply copy and paste from the files in the repo itself.\n\nTo copy all of the files from the pacackage out of the `node_modules` folder and\ninto your project's style directory, you can use the following CLI command in bash.\nChange the path to wherever you want to move the file in your own project.\n\n```bash\ncp -r node_modules/betterize your/path-to/sass/vendors/\n```\n\nTo copy just your chosen _Betterize_ and print file type project folder into your own style directory, you can use the following bash command:\n\n```bash\ncp node_modules/betterize/{_betterize-slim.scss,_print.scss} www/sass/vendors\n```\n\nIt is recommended to put this file at the top of your existing stylesheet,\neither manually or as part of your build process, and not to link to it on its\nown, so as to minimize the number of HTTP requests made just for stylesheets.\n\nThe CSS version of _betterize_ has a minified version included for your\nconvenience, but you could also just add the `.css` file to your project and\nbundle and minify everything together as a part of your build process.\n\n## Opinionated Design Choices\n\nThere are many key design choices with _betterize_ that are very opinionated,\nso if you are going to use betterize you should know what to look out for.\n\n- On the universal selector, three properties are added, to be applied to all element:\n  - The `box-sizing` property is changed from `content-box` by by using\n    `inherit` here and then setting the `html` element to `border-box`.\n  - The `min-width` property is set to `0`. This can save you a lot of time trying\n    to figure out a ton of odd and unintuitive behavior, especially with flexbox,\n    but it can also cause unexpected issues if you aren't aware it is here.\n    If you encounter such an issue where your element is shrinking down to nothing,\n    set a `min-width` for that element explicitly.\n  - Set the `background-repeat` property `no-repeat`. If you have a background\n    image that needs to repeat, set the `background-repeat` property for that\n    element explicitly.\n- On the `html` element, many modern CSS features are used:\n  - The `color-scheme` property is set to `light dark`. If you are only\n    using a single color scheme, you can overwrite this explicitly with\n    `only light` or `only dark`. For accessibility and UX purposes,\n    respecting user's native preferences for light/dark mode theming\n    is recommended.\n  - Uses `overflow: hidden scroll` with `scrollbar-gutter: stable` to\n    ensure the page always has a vertical scrollbar visible, whether\n    the page requires it or not. The `scrollbar-gutter` property works\n    to reserve the space the scrollbar takes up in order to\n    prevent unwanted layout changes as the content grows\n    dynamically.\n  - Sets `hanging-punctuation` to `first last` to make punctuation like\n    quotation marks have better balance at the beginning and end of a line\n    of text by allowing them to be placed outside the line box.\n- A default font stack that works across all browsers and devices is also added\n  to the `\u003chtml\u003e` element. This ensures consistent inheritance and allows you to\n  set custom fonts on the `\u003cbody\u003e` with a guaranteed fall back in case your font\n  takes a long time to load or doesn't load at all.\n- In addition, a few other design choices were made that you should be aware of:\n  - _Betterize_ recommends to avoid the use of `margin-top`. Vertical margins\n    collapse and often cause unexpected results. More importantly, a single\n    direction of margin is an easier mental model. You should not set a\n    `margin-top` or `margin-block-start` anywhere in the code, and should\n    instead try to only use `margin-bottom` or `margin-block-end`.\n  - The `\u003cbody\u003e` sets `line-height: 1.5`, and `text-align:left`. This is\n    inherited later by other elements to prevent font inconsistencies.\n  - Improved `\u003chr\u003e` default look which uses `currentColor` for the color\n    of the line. For a more standard `\u003chr\u003e` look, use the class `hr-light` on\n    your `\u003chr\u003e` elements.\n\nFor more information about each specific choice, you can read the _betterize_\nfiles themselves, as they are heavily documented.\n\n## Betterize Vs. Betterize-Slim\n\nAfter version 2.0.0, _Betterize_ split into two major versions, `betterize` and\n`betterize-slim`, each with 5 possible file extension types that provide\nversions for the Sass and Less preprocessors, and a minified CSS file. (`.css`\n`.min.css`, `.sass`, `.scss`, and `.less`).\n\nWhile `betterize` has a design philosophy of offering the maximum browser and\ndevice compatibility possible, from legacy to the bleeding-edge,\n`betterize-slim` attempts to trim the fat by removing all styles and bug fixes\nthat only benefit very old browsers or devices, such as those that only target\nInternet Explorer or Safari on iOS 5.1-. It also has a reduced numbers of fixes\nand styling that targets legacy Edge (18-) or versions of \"Evergreen\"\nPC browsers which are more than a few years old, such as Chrome 64-.\n\nIf you need to support as many browsers and devices that you can, choose\n`betterize`. If you don't need to worry about very old devices and browsers,\nand in particular if you don't need to support IE, feel free to choose\n`betterize-slim` to save some bytes in your file size.\n\n## Recent Updates\n\n### Upcoming Changes\n\n- Custom configurarability for the betterize versions written for CSS\n  preprocessors Sass (`.scss`/`.sass`) and Less (`.less`).\n- An install script that lets you choose the type and file extensions you want\n  and copies those files into your project's style folder.\n\n### Version 2.0.1 - 2.0.9 Patch Notes\n\n- Fixed some mistakes related to `pre` and `code` styles\n- Removed more legacy browser code from betterize-slim files and shorted some\n  selectors.\n- Moved around the order of some rule sets to be more logically grouped.\n- Added additional comments\n- Fixed a bad typo introduced into the `body` selectors comments.\n- Improved the README\n\n### Version 2.0.0 Patch Notes\n\n- Split _Betterize_ into two version. The original betterize file will remain\n  the same, and continue to normalize and improve designing for the widest range\n  of browsers and devices possible. A new version, which is called\n  betterize-slim, is a slimmed down version of _Betterize_ that only targets a\n  more limited and modern set of browser versions and devices. For example, it\n  will not include any styling which is only of benefit to Internet Explorer,\n  legacy Edge (18-) or versions of \"Evergreen\" browsers such as Chrome 64- which\n  are more than a few years old.\n- Fixed the logical properties in all versions of _Betterize_ such that when\n  writing style changes for different languages, the logical properties correctly\n  overwrite all of the physical properties.\n\n### Version 1.4.1 Patch Notes\n\n- Changed the regular `::placeholder` selector to have the same properties as\n  the vendor-prefixed versions of the selector.\n\n### Version 1.4.0 Patch Notes\n\n- Completely removed the opinionated `:focus-visible` and `:-moz-focusring`\n  styles due to their ugly effect on form elements. Will be added back in a\n  more limited way in a future version.\n- Modified the margin properties on the `dd` selector to use the shorthand\n  `margin` property instead of setting `margin-bottom` and `margin-left`\n  separately.\n- Changed instances of `-webkit-fit-content` to the correct legacy WebKit,\n  non-standard form of `fit-content`: `-webkit-intrinsic`.\n- Removed explicitly set border override with `WindowFrame` color from\n  declaration with `button`, `input`, `select`, and `text-area` selectors.\n\n### Version 1.3.5 Patch Notes\n\n- Fixed the opinionated `\u003chr\u003e` styling to look more subtle. The `.hr-light`\n  class is still available to overwrite it.\n- Updated the `.sr-only` / `.visually-hidden` classes to remove an unnecessary\n  declaration.\n\n### Version 1.3.4 Patch Notes\n\n- Changed all logical shorthand properties to their longhand forms\n  for broader compatibility.\n\n### Version 1.3.1 - 1.3.3 Patch Notes\n\n- Removed the semicolon after the charset declaration in `_betterize.sass`\n- Added `:not(.hr-light)` to the `hr` selector so using `.hr-light` would not\n  maintain any of the opinionated choices for the `\u003chr\u003e` element.\n- Removed the redundant `::-moz-placeholder` selector due to already using\n  `:-moz-placeholder` to support Firefox 18- as well.\n\n### Version 1.3.0 Patch Notes\n\n- As the above section states, the next version of _Betterize_ will be splitting\n  into two versions, one that targets as many browsers and devices as possible,\n  and one that focuses on targeting modern browsers. In preparation of that,\n  this version of _Betterize_ added broad backwards support for legacy browsers\n  and devices.\n- In preparation of splitting betterize into two versions, and for maximum\n  compatibility, colors that were in `rgb()` or `hsl()` notation were converted\n  to hex notation where appropriate.\n- In preparation of splitting betterize into two versions, and for maximum\n  compatibility, removed the double colon notation used for the first group of\n  psuedo-elements like `::before` and ``::after` and instead switched to using\n  `:before` and `:after`.\n- In preparation of splitting betterize into two versions, and for maximum\n  compatibility, added fallbacks for `rem` unit values.\n- Added more logical properties, leaving their physical property fallbacks\n  (ex. `padding-block` and `padding-inline` below normal `padding` properties).\n- In preparation of splitting betterize into two versions, and for maximum\n  compatibility, added vendor prefixes to some properties.\n- A default of `background-color: #fff` and `color: #212529` was added\n  to the `body` selector. A very faint background gradient was also added.\n- Dark mode color and background-color added to the `body` selector.\n- Now using a media query to change the default `line-height` on the `body` from\n  1.5 to 1.4 when the user has a device viewport with low width or height.\n- Undo the styles for placeholder links/named anchors (without href)\n  which have not been made explicitly keyboard-focusable (without tabindex).\n- Added an SVG arrow indicator to the `select` element.\n- Reset `padding` and `border-width` to 0 for `[type='color']` and `[type='range']`\n- Turned of animations and transitions for prefers-reduce-motion with universal\n  selector and `!important`.\n- Added Linux fonts to the default font stack on the `html` element.\n- Fixed inputs of type `range` do not have `touch-action: manipulation` applied.\n- Added `@charset \"UTF-8\";` to the top of the file.\n- Added an opinionated default styling of `\u003ckbd\u003e` text elements that makes them\n  look more like keyboard buttons.\n- Changed `image-rendering: smooth` on `\u003cimg\u003e` elements to only be applied if\n  the image has a file extension indicating it is likely to be a photo,\n  .jpg, .jpeg, .webp, .avif, .jp2, or .jxr.\n- Added `image-rendering: crisp-edges` to `\u003cimg\u003e` elements with .svg file extensions.\n- Finished fleshing out the print stylesheet.\n\n## Print Styles\n\nI have also included a file of default styles for printing.\nI recommend that you take the contents of this file and append it to\nthe very bottom of your stylesheet in CSS. This is because you want to minimize\nthe number of HTTP requests required to optimize loading times and this is the\neasiest way to accomplish that. If you want to lazy load the print stylesheet\nso it doesn't load until the user needs to print or after the page has already\nfinished loading, then you can do that as well.\n\nThe file size of `print.min.css` is 1.32 kB and is 656 Bytes minified and Gzipped.\n\nIf you are using one of the CSS preprocessors (Sass or Less) then I recommend\nusing `_print.sass`, `_print.scss`, and `_print.less` in their current form and\nimporting the file from your main file that contains the imports for all the\nother partials.\n\nIn Less you would use the\n[less import at-rule](https://lesscss.org/features/#import-atrules-feature) like\nthis: `@import 'vendor/print'`\n\nIn Sass' .sass \u0026 .scss syntax you would import it with\n[Sass' use at-rule](https://sass-lang.com/documentation/at-rules/use/) like this\n`@use 'vendor/print'`. You could also do it with `@import 'vendor/print'`\nbut keep in mind that\n[Sass' import at-rule](https://sass-lang.com/documentation/at-rules/import/) is\nbeing phased out of Sass and will eventually be removed.\n\nFor more information about migrating away from the soon-to-be-deprecated\n`@import` and using the newer `@forward` and `@use` directives, see the offical\n[Sass documentation](https://sass-lang.com/documentation/) for:\n\n- [@forward](https://sass-lang.com/documentation/at-rules/forward/)\n- [@use](https://sass-lang.com/documentation/at-rules/use/)\n- [Sass Migrator Tool](https://sass-lang.com/documentation/cli/migrator/)\n\n## Questions\n\nIf you have any questions about how to use _Betterize_ that cannot be answered\nby this README or the documentation in the file, or if you have any issues,\nsuggestions or comments, I would be happy to help anyone\nwho reaches out. You can find me on X/Twitter at\n[@metric_dev](https://twitter.com/metric_dev).\n\nFeel free to ask me anything you like in a tweet, or shoot me a DM (though if\nyou are not verified on X/Twitter I may not see the DM).\n\n## Smoother\n\nIf you are interested in a Sass/SCSS library of mixins and functions that aid in\nfront-end development, please consider checking out my project,\n[smoother](https://github.com/stephenmirving/smthr).\n\nAlong with having more than 150 mixins and more than 80 functions, _Smoother_\nhas its own version of `_betterize.scss` that is reworked to be used exclusively\nwith the _Smoother_ library.\n\nYou can install _Smoother_ in NPM like this:\n\n```bash\nnpm i -D smoother\n```\n\n## Contributions\n\nIf you would like to contribute to _Betterize_, whether it is to add something\nnew or fix a bug you have found, check out the\n[Contributions](https://github.com/stephenmirving/betterize/blob/master/CONTRIBUTIONS.md)\ndocument.\n\n## License\n\n_Betterize_ is distributed under an\n[MIT License](https://github.com/stephenmirving/betterize/blob/master/LICENSE).\n\n**TL;DR:** Anyone can use this code however they want but it would sure be nice\nif they also included a copy of the above license.\n\n## Authors\n\nCreated by SM Irving \u003c[@metric_dev](https://twitter.com/metric_dev)\u003e.\n\nNew contributors are welcome!\n\nContains work and research done by:\n\n- [Nicolas Gallagher](https://github.com/necolas)\n- [Sindre Sorhus](https://github.com/sindresorhus) \u003c[@sindresorhus](https://twitter.com/sindresorhus)\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstephenmirving%2Fbetterize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstephenmirving%2Fbetterize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstephenmirving%2Fbetterize/lists"}