mirror_css/destyle
1
0
Fork 0
mirror of https://github.com/nicolas-cusan/destyle.css.git synced 2025-08-31 00:40:17 +02:00
Code Issues Releases Wiki Activity

start index.html

Browse Source
This commit is contained in:
Nicolas Cusan
2019-01-08 18:26:28 +01:00
parent f3dcbc8297
commit 178a873346
5 changed files with 0 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
LICENSE
View File

@@ -1,21 +0,0 @@
MIT License
Copyright (c) 2019 Nicolas Cusan
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

65
Readme.md
View File

@@ -1,65 +0,0 @@
# destyle.css
[![npm][npm-image]][npm-url] [![license][license-image]][license-url]
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 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](https://github.com/necolas/normalize.css), just what needs reseting is reset to avoid bloat in the browser's style inspector.
## Installation
```shell
$ npm install --save destyle.css
```
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 leaves the look 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` 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.
- `textarea` maintains its natural 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 like `range` and `color` are not reset.
## 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/pulls).
[license-image]: https://img.shields.io/npm/l/destyle.css.svg?style=flat-square
[license-url]: LICENSE
[npm-image]: https://img.shields.io/npm/v/destyle.css.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/destyle.css

0
index.html Normal file
View File

16
package.json
View File

@@ -1,16 +0,0 @@
{
"name": "destyle.css",
"version": "1.0.3",
"description": "Opinionated reset stylesheet that provides a clean styling slate for your project.",
"main": "destyle.css",
"style": "destyle.css",
"files": ["destyle.css", "LICENSE"],
"repository": {
"type": "git",
"url": "git+https://github.com/nicolas-cusan/destyle.css.git"
},
"keywords": ["css", "reset-css", "normalize-css"],
"license": "MIT",
"bugs": "https://github.com/nicolas-cusan/destyle.css/issues",
"homepage": "https://github.com/nicolas-cusan/destyle.css#readme"
}

0
style.css Normal file
View File