nani-reset 1.0.0 โ 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +47 -37
- package/package.json +20 -7
- package/reset.css +18 -4
- package/reset.min.css +1 -1
package/README.md
CHANGED
|
@@ -1,31 +1,40 @@
|
|
|
1
|
-
|
|
2
|
+
|
|
2
3
|
|
|
4
|
+
[](https://www.npmjs.com/package/nani-reset)
|
|
5
|
+
|
|
3
6
|
|
|
4
7
|
# nani-reset โจ
|
|
5
8
|
|
|
6
|
-
|
|
9
|
+
a minimal and modern css reset for predictable styling
|
|
7
10
|
|
|
8
|
-
`nani-reset` removes browser inconsistencies and provides clean, predictable
|
|
11
|
+
`nani-reset` removes browser inconsistencies and provides clean, predictable css defaults without enforcing design decisions
|
|
9
12
|
|
|
10
|
-
|
|
13
|
+
perfect for modern frontend projects using tools like react, vite or plain html/css
|
|
11
14
|
|
|
12
15
|
---
|
|
13
16
|
|
|
14
|
-
## ๐
|
|
17
|
+
## ๐ installation
|
|
15
18
|
|
|
16
|
-
|
|
19
|
+
install from npm:
|
|
17
20
|
|
|
18
21
|
```bash
|
|
19
22
|
npm install nani-reset
|
|
20
23
|
```
|
|
21
24
|
|
|
22
|
-
|
|
25
|
+
then import it in your project:
|
|
23
26
|
|
|
24
27
|
```css
|
|
25
28
|
@import "nani-reset/reset.css";
|
|
26
29
|
```
|
|
27
30
|
|
|
28
|
-
or
|
|
31
|
+
or the minified version:
|
|
32
|
+
|
|
33
|
+
```css
|
|
34
|
+
@import "nani-reset/reset.min.css";
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
you can also import it from javascript / typescript:
|
|
29
38
|
|
|
30
39
|
```js
|
|
31
40
|
import "nani-reset/reset.css"
|
|
@@ -33,22 +42,22 @@ import "nani-reset/reset.css"
|
|
|
33
42
|
|
|
34
43
|
---
|
|
35
44
|
|
|
36
|
-
## ๐งน
|
|
45
|
+
## ๐งน what it does
|
|
37
46
|
|
|
38
47
|
`nani-reset` provides a clean foundation by:
|
|
39
48
|
|
|
40
|
-
*
|
|
41
|
-
*
|
|
42
|
-
*
|
|
43
|
-
*
|
|
44
|
-
*
|
|
45
|
-
*
|
|
46
|
-
*
|
|
47
|
-
*
|
|
49
|
+
* removing default margins and paddings
|
|
50
|
+
* normalizing the box model
|
|
51
|
+
* making media elements responsive by default
|
|
52
|
+
* resetting form elements to inherit typography
|
|
53
|
+
* removing default list styles
|
|
54
|
+
* removing default link styling
|
|
55
|
+
* improving text wrapping behavior
|
|
56
|
+
* creating a safe stacking context for modern apps
|
|
48
57
|
|
|
49
58
|
---
|
|
50
59
|
|
|
51
|
-
## ๐ฆ
|
|
60
|
+
## ๐ฆ example usage
|
|
52
61
|
|
|
53
62
|
```css
|
|
54
63
|
@import "nani-reset/reset.css";
|
|
@@ -66,42 +75,43 @@ main {
|
|
|
66
75
|
|
|
67
76
|
---
|
|
68
77
|
|
|
69
|
-
##
|
|
78
|
+
## โ๏ธ features
|
|
79
|
+
|
|
80
|
+
* modern box-sizing model
|
|
81
|
+
* responsive media elements
|
|
82
|
+
* neutral form controls
|
|
83
|
+
* safe defaults for spa frameworks
|
|
84
|
+
* smooth scrolling
|
|
85
|
+
* respects reduced-motion preferences
|
|
86
|
+
* lightweight (~0.8kb minified / ~0.35kb gzip)
|
|
70
87
|
|
|
71
|
-
|
|
88
|
+
---
|
|
89
|
+
|
|
90
|
+
## ๐ฏ goals
|
|
91
|
+
|
|
92
|
+
the philosophy behind `nani-reset` is simple:
|
|
72
93
|
|
|
73
94
|
* minimal
|
|
74
95
|
* predictable
|
|
75
96
|
* modern
|
|
76
97
|
* non-opinionated
|
|
77
98
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
---
|
|
81
|
-
|
|
82
|
-
## โ๏ธ Features
|
|
83
|
-
|
|
84
|
-
* Modern box-sizing model
|
|
85
|
-
* Responsive media elements
|
|
86
|
-
* Neutral form controls
|
|
87
|
-
* Safe defaults for SPA frameworks
|
|
88
|
-
* Smooth scrolling
|
|
89
|
-
* Lightweight (~1kb)
|
|
99
|
+
it avoids forcing typography, layout or visual styles so developers remain in full control
|
|
90
100
|
|
|
91
101
|
---
|
|
92
102
|
|
|
93
|
-
## ๐ง
|
|
103
|
+
## ๐ง why another css reset?
|
|
94
104
|
|
|
95
|
-
|
|
105
|
+
many resets either:
|
|
96
106
|
|
|
97
107
|
* reset too little
|
|
98
108
|
* normalize too much
|
|
99
109
|
* or enforce styling decisions
|
|
100
110
|
|
|
101
|
-
`nani-reset` aims to sit in the middle: a **balanced modern reset** for everyday frontend work
|
|
111
|
+
`nani-reset` aims to sit in the middle: a **balanced modern reset** for everyday frontend work
|
|
102
112
|
|
|
103
113
|
---
|
|
104
114
|
|
|
105
|
-
## ๐
|
|
115
|
+
## ๐ license
|
|
106
116
|
|
|
107
|
-
|
|
117
|
+
mit ยฉ d. h. alezard (nani)
|
package/package.json
CHANGED
|
@@ -1,22 +1,35 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "nani-reset",
|
|
3
|
-
"version": "1.
|
|
4
|
-
"description": "
|
|
5
|
-
"author": "
|
|
3
|
+
"version": "1.1.2",
|
|
4
|
+
"description": "a minimal and modern css reset for predictable styling",
|
|
5
|
+
"author": "D. H. Alezard (Nani)",
|
|
6
6
|
"license": "MIT",
|
|
7
|
-
"main": "reset.css",
|
|
8
7
|
"keywords": [
|
|
9
8
|
"css",
|
|
10
9
|
"css-reset",
|
|
11
|
-
"reset",
|
|
12
|
-
"normalize",
|
|
10
|
+
"reset-css",
|
|
13
11
|
"modern-css",
|
|
14
|
-
"
|
|
12
|
+
"normalize",
|
|
13
|
+
"frontend",
|
|
14
|
+
"web",
|
|
15
|
+
"style-reset"
|
|
15
16
|
],
|
|
16
17
|
"repository": {
|
|
17
18
|
"type": "git",
|
|
18
19
|
"url": "https://github.com/dhalezard/nani-reset.git"
|
|
19
20
|
},
|
|
21
|
+
"homepage": "https://github.com/dhalezard/nani-reset",
|
|
22
|
+
"bugs": {
|
|
23
|
+
"url": "https://github.com/dhalezard/nani-reset/issues"
|
|
24
|
+
},
|
|
25
|
+
"files": [
|
|
26
|
+
"reset.css",
|
|
27
|
+
"reset.min.css"
|
|
28
|
+
],
|
|
29
|
+
"style": "reset.min.css",
|
|
30
|
+
"scripts": {
|
|
31
|
+
"build": "cleancss -o reset.min.css reset.css"
|
|
32
|
+
},
|
|
20
33
|
"devDependencies": {
|
|
21
34
|
"clean-css-cli": "^5.6.3"
|
|
22
35
|
}
|
package/reset.css
CHANGED
|
@@ -43,12 +43,20 @@
|
|
|
43
43
|
html,
|
|
44
44
|
body {
|
|
45
45
|
height: 100%;
|
|
46
|
-
line-height: 1.5;
|
|
47
46
|
scroll-behavior: smooth;
|
|
48
47
|
}
|
|
49
48
|
|
|
50
49
|
body {
|
|
51
50
|
min-height: 100vh;
|
|
51
|
+
line-height: 1.5;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/* respect reduced motion preferences */
|
|
55
|
+
|
|
56
|
+
@media (prefers-reduced-motion: reduce) {
|
|
57
|
+
html {
|
|
58
|
+
scroll-behavior: auto;
|
|
59
|
+
}
|
|
52
60
|
}
|
|
53
61
|
|
|
54
62
|
/* ============================= */
|
|
@@ -104,7 +112,6 @@ menu {
|
|
|
104
112
|
/* Links */
|
|
105
113
|
/* ============================= */
|
|
106
114
|
|
|
107
|
-
a,
|
|
108
115
|
button {
|
|
109
116
|
cursor: pointer;
|
|
110
117
|
}
|
|
@@ -126,12 +133,19 @@ textarea,
|
|
|
126
133
|
select,
|
|
127
134
|
fieldset {
|
|
128
135
|
border-width: 0;
|
|
129
|
-
font
|
|
130
|
-
font-size: inherit;
|
|
136
|
+
font: inherit;
|
|
131
137
|
text-transform: none;
|
|
132
138
|
overflow: visible;
|
|
133
139
|
}
|
|
134
140
|
|
|
141
|
+
fieldset {
|
|
142
|
+
padding: 0;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
textarea {
|
|
146
|
+
resize: vertical;
|
|
147
|
+
}
|
|
148
|
+
|
|
135
149
|
/* remove default button styling */
|
|
136
150
|
|
|
137
151
|
button {
|
package/reset.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{font-synthesis:none;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}*,::after,::before{box-sizing:border-box}*{margin:0;padding:0}body,html{height:100%;
|
|
1
|
+
:root{font-synthesis:none;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}*,::after,::before{box-sizing:border-box}*{margin:0;padding:0}body,html{height:100%;scroll-behavior:smooth}body{min-height:100vh;line-height:1.5}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}canvas,img,picture,svg,video{display:block;max-width:100%;height:auto;border-style:none}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}b,strong{font-weight:bolder}cite{font-style:normal}dd,menu,ol,ul{list-style:none}button{cursor:pointer}a{text-decoration:none;color:inherit;background-color:transparent}button,fieldset,input,optgroup,select,textarea{border-width:0;font:inherit;text-transform:none;overflow:visible}fieldset{padding:0}textarea{resize:vertical}button{background:0 0;border:none}input,textarea{-webkit-user-select:auto;user-select:auto}::placeholder{color:unset}[hidden]{display:none}#__next,#root{isolation:isolate}
|