destyle.css - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

package.json

 {
   "name": "destyle.css",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Opinionated reset stylesheet that provides a clean styling slate for your project.",
@@ -5,0 +5,0 @@ "main": "destyle.css",

README.md

 # Destyle
 
-Opinionated reset stylesheet that provides a clean styling slate for your project. All spacing (margin & padding) and font-sizing is removed and set to be inherited from its parent.
+Opinionated [reset stylesheet](https://cssreset.com/what-is-a-css-reset/) that provides a clean styling slate for your project. All spacing (margin & padding) and font-sizing is removed and set to be inherited from its parent.
 
-This approach allows for a clean slate when starting a new project and avoids having to reset styles when creating different styled instances of the same element.
+This approach avoids having to reset styles when creating different styled instances of the same element, it also contributes to the separation of presentation and semantics.
 
-Like normalize.css just what needs reseting is reset to avoid bloat in the browsers style-inspector.
+Like [normalize.css](https://github.com/necolas/normalize.css) just what needs reseting is reset to avoid bloat in the browser's style inspector.
 
-## Installation & Usage
+## Installation
 
@@ -15,8 +15,39 @@ ```shell
 
+Download: https://raw.githubusercontent.com/nicolas-cusan/destyle.css/master/destyle.css
+
+## Usage
+
+Include `destyle.css` in the `head` of your HTML file before your main stylesheet.
+
+### Recommended
+
+Add your base font and color styles to the `body` element in your stylesheet, all other elements will inherit the style from the body.
+
+```css
+/* app.css */
+
+body {
+  color: #333;
+  font: 16px/1.4 'Helvetica Neue', sans-serif;
+}
+```
+
+## Why?
+
+Normalize.css just makes elements consistent between browsers and it does it well, but it does not remove the user agent's assumptions about how things have to look. Destyle.css removes these assumptions and makes the look of everything up to the stylesheet author.
+
+As an example it facilitates styling headings differently depending on the context in with they are shown.
+
+An `h1` might need to be bold & large in some context (like at the top of a text page) but might be small and inconspicuous in others (like a settings page in an app).
+
+Creating two different styles for `h1` is made easy as only the styles you need to get the desired visual results have to be applied without the need to overwrite default styles while maintaining semantics.
+
+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.
+
 ## Rules & Caveats
 
-- The box model is reset to `border-box`
-- `code`, `pre` and other _code_ elements maintain a monospaced font-family
+- The box model is reset to `border-box` using the `*` selector
+- `code`, `pre`, `kbd`, `samp` maintain a monospaced font-family
 - `hr` is set to be a solid 1px line that inherits its color from its parent's text color
-- Inline elements that carry style (`b`, `i`, `strong`, etc.) are not reset as they, apart from their semantics (if they have any), they only provide a single style and are easy to overwrite.
+- Inline elements that carry style (`b`, `i`, `strong`, etc.) are not reset.
 - `textarea` maintains its natural height.
@@ -28,2 +59,2 @@ - `select` is reset using `appearance: none` which is not cross-browser, be advised when styling custom selects.
 
-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/pulls)
+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/pulls).

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

12442

increased by13.76%

Number of lines in readme file

59

increased by110.71%

No dependency changes