Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
destyle.css
Advanced tools
destyle.css - npm Package Compare versions
Comparing version 2.0.2 to 3.0.0
| { | ||
| "name": "destyle.css", | ||
| "version": "2.0.2", | ||
| "description": "Opinionated reset stylesheet that provides a clean styling slate for your project.", | ||
| "version": "3.0.0", | ||
| "description": "Opinionated reset stylesheet that provides a clean slate for styling your html.", | ||
| "main": "destyle.css", | ||
@@ -9,2 +9,3 @@ "style": "destyle.css", | ||
| "destyle.css", | ||
| "destyle.min.css", | ||
| "LICENSE" | ||
@@ -19,3 +20,5 @@ ], | ||
| "reset-css", | ||
| "normalize-css" | ||
| "normalize-css", | ||
| "destyle", | ||
| "destyle-css" | ||
| ], | ||
@@ -22,0 +25,0 @@ "license": "MIT", |
105
Readme.md
@@ -7,18 +7,14 @@ # destyle.css | ||
| ## What it does | ||
| ## Benefits | ||
| - Ensures consistency across browsers (thanks normalize.css) | ||
| - Removes spacing (margin & padding) and resets font-size and line-height | ||
| - Sets some sensible defaults (see [rules](#rules)) | ||
| - Prevents the necessity of reseting (most) user agent styles | ||
| - Ensures consistency across browsers as much as possible | ||
| - Prevents the necessity of reseting user agent styles | ||
| - Prevents style inspector bloat by only targeting what is necessary | ||
| - Removes margins & paddings | ||
| - Removes default font styles and ensures proper inheritance | ||
| - Contributes to the separation of presentation and semantics | ||
| - Works well with all kind of styling approaches, atomic libraries like [tachyons](https://tachyons.io/), component based styling like css-in-js in [React](https://reactjs.org), good 'ol css, ... | ||
| - Sets sensible default styles (see [rules](#rules)) | ||
| - Well suited for utility class libraries and large codebases | ||
| - Supports modern browsers, therefor is small in size (~0.95kb, minified gzipped) | ||
| ## Why? | ||
| [Eric Meyer's reset](https://meyerweb.com/eric/tools/css/reset/) resets properties on elements that do not need it, are unused or even deprecated, this creates bloat in the browser's style inspector which makes developing and debugging less efficient. [Normalize.css](https://github.com/necolas/normalize.css) makes elements look consistent across browsers and it does it well, but it does not remove the user agent's assumptions about how things look. Destyle.css targets both reseting & normalization. | ||
| Compare the results [here](https://nicolas-cusan.github.io/destyle.css/compare.html). | ||
| ## Installation | ||
@@ -30,13 +26,5 @@ | ||
| Download: https://raw.githubusercontent.com/nicolas-cusan/destyle.css/master/destyle.css | ||
| - Download: https://raw.githubusercontent.com/nicolas-cusan/destyle.css/master/destyle.css | ||
| - CDN: https://classic.yarnpkg.com/en/package/destyle.css | ||
| ## Browser support | ||
| - Chrome | ||
| - Edge | ||
| - Firefox ESR+ | ||
| - Internet Explorer 10+ | ||
| - Safari 8+ | ||
| - Opera | ||
| ## Usage | ||
@@ -48,3 +36,3 @@ | ||
| Add your base font and color styles to the `body` element in your stylesheet, all other elements will inherit the style from the body. | ||
| Add your base font and color styles to the `html` or `body` element in your stylesheet, all other elements will inherit the style from the body. | ||
@@ -54,3 +42,3 @@ ```css | ||
| body { | ||
| html { | ||
| color: #333; | ||
@@ -61,2 +49,4 @@ font: 16px/1.4 "Helvetica Neue", sans-serif; | ||
| ### Styling generated content | ||
| It is discouraged to define styles for raw html tags apart from `body` and `html`, use classes (or any other selectors / system) for styling. | ||
@@ -68,7 +58,7 @@ | ||
| .type h1 { | ||
| \* styles *\ | ||
| /* styles */ | ||
| } | ||
| .type h2 { | ||
| \* styles *\ | ||
| /* styles */ | ||
| } | ||
@@ -78,5 +68,24 @@ ``` | ||
| ```html | ||
| <div class="type">{{ generatedMarkup }}</div> | ||
| <div class="type">{{ generated_markup_goes_here }}</div> | ||
| ``` | ||
| ## Rules | ||
| - The box model is set to `border-box` for `*`, `::before` and `::after`. | ||
| - The `border-style` is set to `solid` for `*`, `::before` and `::after` and the `border-width` is set to 0 (to hide the borders). | ||
| - `code`, `pre`, `kbd`, `samp` maintain a monospaced font-family. | ||
| - `hr` is set to be a solid 1px line using `border-top` that inherits its color from its parent's `color` property. | ||
| - Inline elements that carry style (`b`, `i`, `strong`, etc.) are not reset. | ||
| - `canvas` and `iframe` maintain their default width and height (varies depending on the browser). | ||
| - `button`, `select`, `textarea` and `input` (except `[type='checkbox']` and `[type='radio']`), are reset using `appearance: none`. | ||
| - `textarea` maintains its default height. | ||
| - `meter` and `progress` elements are not reset. | ||
| - Replaced content like `img`, `iframe` and `svg` use `vertical-align: bottom` to prevent alignment issues. | ||
| - Focusable elements retain a focus outline, style depends on browser. | ||
| ## Caveats | ||
| - `range` & `color` inputs are affected by `appearance: none` but are not completely destyled (varies depending on the browser). | ||
| - `button` elements that have a fixed `height` will center its content vertically (can not be reset). | ||
| ## Examples | ||
@@ -163,30 +172,32 @@ | ||
| How to create the styles is up to the author, it can be by creating classes, compose style using functional classes, styling inside a react component, etc. In any case the author always gets a clean slate for styling each element and it is up to him/her to reuse the styles or start from scratch for every instance. | ||
| ## Changelog | ||
| ## Rules | ||
| ### **v3.0.0.** 2021-09-03 | ||
| - The box model is set to `border-box` for `*`, `::before` and `::after`. | ||
| - The `border-style` is set to `solid` for `*`, `::before` and `::after` and the `border-width` is set to 0 (to hide the borders). | ||
| - `code`, `pre`, `kbd`, `samp` maintain a monospaced font-family. | ||
| - `hr` is set to be a solid 1px line using `border-top` that inherits its color from its parent's `color` property. | ||
| - Inline elements that carry style (`b`, `i`, `strong`, etc.) are not reset. | ||
| - `canvas` and `iframe` maintain their default width and height (varies depending on the browser). | ||
| - `button`, `select`, `textarea` and `input` (except `[type='checkbox']` and `[type='radio']`), are reset using `appearance: none`. | ||
| - `textarea` maintains its default height. | ||
| - `meter` and `progress` elements are not reset. | ||
| - `img` has `vertical-align` set to `bottom` to prevent alignment issues. | ||
| - Remove IE support 🎉 | ||
| - Bring back `outline` for focusable elements | ||
| - Remove redundant `line-height: inherit` rule from headings reset | ||
| - Remove redundant `text-decoration` rule from `abbr` | ||
| - Added `svg` selector to replaced content rule | ||
| - Added `text-transform: inherit` rule to form elements | ||
| - Replaced `[disabled]` selector with `:disabled` | ||
| - Removed `::-moz-focus-inner` rules for old Firefox versions | ||
| - Improved `:-moz-focusring` style, no more dotted outline | ||
| - Destyled `select:disabled` in Chrome | ||
| - Add outline to focused `[contenteditable]` elements | ||
| - Fixed border color inheritance for `table` borders in Chrome | ||
| ## Caveats | ||
| ### **v2.0.0.** 2020-10-15 | ||
| - `select` elements are not completely destyled by `appearance: none` (varies depending on the browser). You can find a good guide for custom styling `select`s [here](https://www.filamentgroup.com/lab/select-css.html). | ||
| - `range`, `color` are affected by `appearance: none` but are not completely destyled (varies depending on the browser). | ||
| - `button` elements that have a fixed `height` will center its content vertically (can not be reset). | ||
| - Add `border-style: solid` and `border-width: 0` to `*, ::before, ::after` selector. This change might affect how borders are used and therefor is considered a breaking change. The benefit is that simply adding a border-width to an element will display a border without the need to set the border-style explicitly. | ||
| ## Changelog | ||
| ## Why? | ||
| - **v2.0.0.** 2020-10-15 - Add `border-style: solid` and `border-width: 0` to `*, ::before, ::after` selector. This change might affect how borders are used and therefor is considered a braking change. The benefit is that simply adding a border-width to an element will display a border without the need to set the border-style explicitly. | ||
| [Eric Meyer's reset](https://meyerweb.com/eric/tools/css/reset/) resets properties on elements that do not need it, are unused or even deprecated, this creates bloat in the browser's style inspector which makes developing and debugging less efficient. [Normalize.css](https://github.com/necolas/normalize.css) makes elements look consistent across browsers and it does it well, but it does not remove the user agent's assumptions about how things look. Destyle.css targets both reseting & normalization. | ||
| Compare the results [here](https://nicolas-cusan.github.io/destyle.css/compare.html). | ||
| ## Credits | ||
| This project is heavily inspired by [normalize.css](https://github.com/necolas/normalize.css) and the original [reset](https://meyerweb.com/eric/tools/css/reset/) by Eric Meyer. The source of the test page is from [html5-test-page](https://github.com/cbracco/html5-test-page). | ||
| This project is heavily inspired by [normalize.css](https://github.com/necolas/normalize.css) and the original [reset](https://meyerweb.com/eric/tools/css/reset/) by Eric Meyer. The source of the test page is from [html5-test-page](https://github.com/cbracco/html5-test-page) with some additions. | ||
@@ -203,1 +214,3 @@ Tested with: | ||
| [npm-url]: https://www.npmjs.com/package/destyle.css | ||
| <!-- Outline --> |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by8.14%
18061
- Number of package files
- increased by25%
5
- Number of lines in readme file
- increased by6.67%
208
Worsened metrics
- Lines of code
- decreased by-14.36%
334
No dependency changes