destyle.css - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

package.json

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

Readme.md

@@ -21,2 +21,4 @@ # destyle.css
 
+Compare the results [here](https://nicolas-cusan.github.io/destyle.css/compare.html).
+
 ## Installation
@@ -74,8 +76,10 @@
 
-## Example
+## Examples
 
-An `h1` might need to be bold & large in some context (at the top of a text page) but might be small and inconspicuous in others (on a settings page in an app).
+### Headings
 
-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.
+An `h1` might need to be bold & large in some context (e.g. at the top of a text page) but might be small and inconspicuous in others (e.g. on a settings page in an app).
 
+Creating two different styles for `h1` is made easy, only the properties for the respective desired visual results have to be applied, there is no need to overwrite default styles, all while maintaining semantics.
+
 ```css
@@ -110,16 +114,63 @@ /* No reseting of the user agent styles necessary,
 
+### Buttons
+
+`button` tags have a lot of default styles that can make them cumbersome to use from a styling perspective, especially if they should look like plain things or need to wrap some other content, but `button` tags are the recommended elements to use as click targets for user interactions. Falling back to using `<a href="#">` even with `role="button"` is [not recomended](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role) from a accessibility standpoint as Screenreaders will recognize `button`s as interactive elements by default and treat them accordingly. `a` should be used when there is the need to link to a page via `href`.
+
+destyle.css resets buttons completely to make them usable as any other element <small>* see note [below](#caveats)</small>.
+
+```css
+/* Make anything look like a link, even a <button> */
+.link {
+  color: lightblue;
+  text-decoration: underline;
+}
+
+/* Make anything look like a button
+ * font styles will be inheritet from the parent */
+.btn {
+  padding: 0.2em 0.5em;
+  border-radius: 0.2em;
+  background-color: blue;
+  color: white;
+  text-align: center
+}
+
+.block {
+  display: block;
+}
+```
+
+```html
+<!-- Make it look like a link -->
+<button class="link">Interactive link</button>
+
+<!-- Make anchor look like a button -->
+<a href="page.html" class="btn">Link that looks like a button</a>
+
+<!-- Use as block level element -->
+<button class="block">
+  <img src="..." alt="...">
+</button>
+```
+
 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
+## Rules
 
-- The box model is reset to `border-box` using the `*` selector
-- `button` and `input` are also reset (as much as possible)
-- `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
+- The box model is set to `border-box` for `*`, `::before` and `::after`.
+- `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` (all types), are reset using `appearance: none`.
+- `[type='checkbox']` and `[type='radio']` are set to `appearance: checkbox` and `appearance: radio` respectively (overwriting `appearance: none`) to prevent them from disappearing in iOS.
 - `textarea` maintains its default height.
-- `canvas` and `iframe` maintain their default width and height.
-- `select` is reset using `appearance: none` which is not cross-browser, be advised when styling custom selects. You can find a good guide [here](https://www.filamentgroup.com/lab/select-css.html)
-- HTML5 inputs and elements like `range`, `color`, `meter` and `progress` are not reset.
+- `meter` and `progress` elements are not reset.
 
+## Caveats
+
+- `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).
+
 ## Credits
@@ -126,0 +177,0 @@

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

16597

increased by14.38%

Number of lines in readme file

181

increased by39.23%

No dependency changes