the-new-css-reset - npm Package Compare versions

Comparing version 1.8.1 to 1.8.2

package.json

 {
   "name": "the-new-css-reset",
-  "version": "1.8.1",
+  "version": "1.8.2",
   "description": "the new CSS reset, using new css features",
@@ -5,0 +5,0 @@ "main": "css/reset.css",

README.md

@@ -1,14 +0,33 @@
-# The New CSS Reset
-This new CSS reset is using the new CSS features:
-- The global CSS reset keywords, ‘unset’ and ‘revert’ keywords.
-- The new property of ‘all’ which can reset all properties combined.
+# ⏪ The New CSS Reset
+**A package that resets some of the default, user agent based, styles.**
+
+It **doesn't** affect the `display` property and special HTML elements like ```iframe```, ```canvas```, ```img```, ```svg``` and ```video```.
+
+**This package is using the new CSS features:**
+- The global CSS reset keywords, `unset` and `revert` keywords.
+- The new property of `all` which can reset all properties combined.
 - The ```:where()``` pseudo-class to remove specificity.
 - The ```:not()``` pseudo-class with multi arguments.
 
-## What is the-new-css-reset resetting?
-This CSS reset is built from the understanding that we don’t want to use default styles we are getting from the browsers, except the ‘display’ property.
+## Motivation
+This package is built with the understanding that we don’t want to use default styles we are getting from the browsers, except for the `display` property.
 
-This CSS reset removes all the default styles which we are getting on specific HTML elements except the ‘display’ property, as I already mentioned, and special HTML elements like ```iframe```, ```canvas```, ```img```, ```svg```, ```video```, and ```audio```.
+## How to get started?
+**Run ```npm i the-new-css-reset``` OR [Download the Latest Version](https://raw.githubusercontent.com/elad2412/the-new-css-reset/main/css/reset.css).**
 
-In case you want the default style of the browser of a specific HTML element back, you can revert back to the default styles of the browser. For example:
+**Once installed, you can use it in two different ways:**
+
+1) Import ```/css/reset.css``` before the regular styles of the project.
+2) Include the following snippet in one of the JavaScript/TypeScript entry files:
+```js
+import "the-new-css-reset/css/reset.css;"
+```
+
+## Want to exclude some of the resets?
+
+**You can revert to the default styles of the browser!**
+
+For example:
+
+
 ```css
@@ -30,17 +49,5 @@ input[type="checkbox"],
 
-[Download the Latest Version](https://raw.githubusercontent.com/elad2412/the-new-css-reset/main/css/reset.css)
-
-## NPM and How to Use?
-The package name on NPM is 'the-new-css-reset'.
-
-Import ```/css/reset.css``` before the regular styles of the project.
-
-In a React project, insert it to the main entry file:
-```js
-import "the-new-css-reset/css/reset.css"
-```
-
 ## Accessibility Recommendation
 
-To keep your website accessibly, don't forget to take care of the ```:focus``` states.
+**To keep your website accessible, don't forget to take care of the ```:focus``` states.**
 ```css
@@ -55,7 +62,5 @@ :focus { /* focus styles */ }
 ## Browser Support
-All evergreen browsers 
-- Chrome, Edge: version 88+
-- FireFox: version 84+
-- Safari/iOS browsers: version 14+
-- Opera: version 75+
-- Samsung Browser: version 15+
+
+![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Samsung Internet](https://raw.githubusercontent.com/alrra/browser-logos/master/src/samsung-internet/samsung-internet_48x48.png)
+--- | --- | --- | --- | --- | --- |
+88+ ✔ | 88+ ✔ | 84+ ✔ | 14+ ✔ | 75+ ✔ | 15+ ✔ |

New alerts

License Policy Violation

License

This 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

License

This 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

7294

increased by8.35%

Lines of code

83

increased by1.22%

Number of lines in readme file

65

increased by8.33%

No dependency changes