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

add config files and improve readme

Browse Source
This commit is contained in:
Nicolas Cusan
2019-01-02 13:18:06 +01:00
parent dc297d8315
commit b2a8a758b3
6 changed files with 52 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
.editorconfig Normal file
View File

@@ -0,0 +1,12 @@
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
trim_trailing_whitespace = false

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
.DS_Store

19
Readme.md
View File

@@ -8,17 +8,20 @@ Like normalize.css just what needs reseting is reset to avoid bloat in the brows
## Installation & Usage
Install with npm or download on github
```shell
$ npm install --save destyle.css
```
## Rules & Caveats
- The box model is reset to `border-box`
- `code`, `pre` and other _code_ elements 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.
- `textarea` maintains its natural height
- `select` is reset using `appearance: none` which is not cross-browser be advised when styling custom selects
- The box model is reset to `border-box`
- `code`, `pre` and other _code_ elements 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.
- `textarea` maintains its natural height.
- `select` is reset using `appearance: none` which is not cross-browser, be advised when styling custom selects.
- HTML5 Inputs like `range` and `color` are not reset.
## Credits
This project is heavily inspired by normalize.css and the original reset by Eric Meyer.
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)

11
destyle.css
View File

@@ -1,4 +1,4 @@
/*! de-style.css v0.0.1 | MIT License */
/*! de-style.css v1.0.0 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model
========================================================================== */
@@ -238,6 +238,13 @@ textarea {
padding: 0;
margin: 0;
outline: 0;
}
/**
* Remove all Style fro select elements. Does not quite work cross-browser
*/
select {
-webkit-appearance: none;
appearance: none;
}
@@ -273,6 +280,8 @@ button,
[type='reset'],
[type='submit'] {
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
/**

16
package.json Normal file
View File

@@ -0,0 +1,16 @@
{
"name": "destyle.css",
"version": "1.0.0",
"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"
}

4
test/index.html → test.html
View File

@@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Test Page</title>
<link rel="stylesheet" href="../destyle.css">
<link rel="stylesheet" href="destyle.css">
</head>
<body>
<div id="top" class="page" role="document">
@@ -288,7 +288,7 @@
</article>
<article id="embedded__iframe">
<header><h2>IFrame</h2></header>
<div><iframe src="index.html" height="300"></iframe></div>
<div><iframe src="test.html" height="300"></iframe></div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
</section>