From 65d8d09edb68c885f532b435b1df050e7bd09f7d Mon Sep 17 00:00:00 2001 From: Nicolas Cusan Date: Fri, 12 Jul 2019 15:18:10 +0200 Subject: [PATCH] Update docs --- Readme.md | 71 ++++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 60 insertions(+), 11 deletions(-) diff --git a/Readme.md b/Readme.md index b142514..e7167b2 100644 --- a/Readme.md +++ b/Readme.md @@ -70,11 +70,13 @@ If you need to create styles for tags generated by a CMS or markdown wrap them i
{{ generatedMarkup }}
``` -## 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 /* No reseting of the user agent styles necessary, @@ -105,19 +107,66 @@ Creating two different styles for `h1` is made easy as only the styles you need

Other small title

``` +### 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 `` 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 * see note [below](#caveats). + +```css +/* Make anything look like a link, even a + + +Link that looks like a 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