Compare commits
18 commits
feature/up
...
main
Author | SHA1 | Date | |
---|---|---|---|
|
2e24250818 | ||
|
920f16d159 | ||
|
1dc35b2247 | ||
|
1e1c0a579b | ||
|
b4a0c5831d | ||
|
e7500a6c7f | ||
|
3d88ede3e1 | ||
|
d60c41c896 | ||
|
24f527e414 | ||
|
6aed477cc9 | ||
|
2b129490ed | ||
|
41fe399128 | ||
|
4dff0e42dd | ||
|
ba75f6d3ed | ||
|
372c2cb6a0 | ||
|
e3975a92b6 | ||
|
c0245f5a79 | ||
|
f1ab7b6974 |
7 changed files with 130 additions and 169 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
@ -1,9 +1,9 @@
|
|||
*.log
|
||||
npm-debug.*
|
||||
*.scssc
|
||||
*.log
|
||||
*.swp
|
||||
.DS_Store
|
||||
.sass-cache
|
||||
node_modules
|
||||
test.html
|
||||
.idea
|
||||
|
|
18
README.md
18
README.md
|
@ -5,32 +5,38 @@
|
|||
![The Brotli size of this reset](https://img.badgesize.io/https://unpkg.com/modern-css-reset?compression=brotli&label=Brotli%20Size)
|
||||
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
|
||||
|
||||
A tiny little reset that you can use as the basis of your CSS projects. You can read a [breakdown of it here](https://hankchizljaw.com/wrote/a-modern-css-reset/).
|
||||
A tiny little reset that you can use as the basis of your CSS projects. You can
|
||||
read
|
||||
a [breakdown of it here](https://hankchizljaw.com/wrote/a-modern-css-reset/).
|
||||
|
||||
## Installation
|
||||
|
||||
NPM:
|
||||
|
||||
```console
|
||||
npm install --save-dev modern-css-reset
|
||||
npm install --save-dev @punkfairie/modern-css-reset
|
||||
```
|
||||
|
||||
Yarn:
|
||||
|
||||
```console
|
||||
yarn add modern-css-reset
|
||||
yarn add @punkfairie/modern-css-reset
|
||||
```
|
||||
|
||||
Unpkg CDN:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://unpkg.com/modern-css-reset/dist/reset.min.css" />
|
||||
|
||||
<link rel="stylesheet"
|
||||
href="https://unpkg.com/@punkfairie/modern-css-reset/dist/reset.min.css"/>
|
||||
```
|
||||
|
||||
jsDelivr CDN:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modern-css-reset/dist/reset.min.css" />
|
||||
|
||||
<link rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/@punkfairie/modern-css-reset/dist/reset.min.css"/>
|
||||
```
|
||||
|
||||
### Manual installation
|
||||
|
@ -38,7 +44,7 @@ jsDelivr CDN:
|
|||
First, let's clone this repository:
|
||||
|
||||
```console
|
||||
git clone https://github.com/hankchizljaw/modern-css-reset.git
|
||||
git clone https://github.com/punkfairie/modern-css-reset.git
|
||||
```
|
||||
|
||||
Then, go to `modern-css-reset` directory:
|
||||
|
|
32
dist/reset.css
vendored
32
dist/reset.css
vendored
|
@ -1,3 +1,4 @@
|
|||
@layer reset {
|
||||
/* Box sizing rules */
|
||||
*,
|
||||
*::before,
|
||||
|
@ -26,23 +27,17 @@ ol[role="list"] {
|
|||
}
|
||||
|
||||
/* Set core root defaults */
|
||||
html {
|
||||
html:focus-within {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Set core body defaults */
|
||||
body {
|
||||
min-height: 100vh;
|
||||
min-block-size: 100vb;
|
||||
text-rendering: optimizeSpeed;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Remove list styles on ul, ol elements with a class attribute */
|
||||
ul[class],
|
||||
ol[class] {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* A elements that don't have a class get default styles */
|
||||
a:not([class]) {
|
||||
text-decoration-skip-ink: auto;
|
||||
|
@ -51,15 +46,10 @@ a:not([class]) {
|
|||
/* Make images easier to work with */
|
||||
img,
|
||||
picture {
|
||||
max-width: 100%;
|
||||
max-inline-size: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Natural flow and rhythm in articles by default */
|
||||
article > * + * {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
/* Inherit fonts for inputs and buttons */
|
||||
input,
|
||||
button,
|
||||
|
@ -67,18 +57,4 @@ textarea,
|
|||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
/* Blur images when they have no alt attribute */
|
||||
img:not([alt]) {
|
||||
filter: blur(10px);
|
||||
}
|
||||
|
||||
/* Remove all animations and transitions for people that prefer not to see them */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
|
2
dist/reset.min.css
vendored
2
dist/reset.min.css
vendored
|
@ -1 +1 @@
|
|||
*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role="list"],ol[role="list"]{list-style:none}html{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}ul[class],ol[class]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}article>*+*{margin-top:1em}input,button,textarea,select{font:inherit}img:not([alt]){filter:blur(10px)}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
|
||||
@layer reset{*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role="list"],ol[role="list"]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-block-size:100vb;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-inline-size:100%;display:block}input,button,textarea,select{font:inherit}}
|
||||
|
|
2
package-lock.json
generated
2
package-lock.json
generated
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "modern-css-reset",
|
||||
"version": "1.0.4",
|
||||
"version": "1.4.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
|
15
package.json
15
package.json
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "modern-css-reset",
|
||||
"version": "1.2.0",
|
||||
"name": "@punkfairie/modern-css-reset",
|
||||
"version": "1.0.0",
|
||||
"description": "A bare-bones CSS reset for modern web development",
|
||||
"main": "./dist/reset.min.css",
|
||||
"scripts": {
|
||||
|
@ -8,18 +8,21 @@
|
|||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/hankchizljaw/modern-css-reset.git"
|
||||
"url": "git+https://github.com/punkfairie/modern-css-reset.git"
|
||||
},
|
||||
"keywords": [
|
||||
"css reset",
|
||||
"modern css reset"
|
||||
],
|
||||
"author": "Andy Bell <me@andy-bell.design> (https://hankchizljaw.com)",
|
||||
"author": "Marley Rae <marleyrae@protonmail.com> (https://punkfairie.net)",
|
||||
"contributors": [
|
||||
"Andy Bell <me@andy-bell.design> (https://hankchizljaw.com)"
|
||||
],
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/hankchizljaw/modern-css-reset/issues"
|
||||
"url": "https://github.com/punkfairie/modern-css-reset/issues"
|
||||
},
|
||||
"homepage": "https://github.com/hankchizljaw/modern-css-reset#readme",
|
||||
"homepage": "https://github.com/punkfairie/modern-css-reset#readme",
|
||||
"devDependencies": {
|
||||
"uglifycss": "0.0.29"
|
||||
}
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
@layer reset {
|
||||
/* Box sizing rules */
|
||||
*,
|
||||
*::before,
|
||||
|
@ -26,23 +27,17 @@ ol[role="list"] {
|
|||
}
|
||||
|
||||
/* Set core root defaults */
|
||||
html {
|
||||
html:focus-within {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Set core body defaults */
|
||||
body {
|
||||
min-height: 100vh;
|
||||
min-block-size: 100vb;
|
||||
text-rendering: optimizeSpeed;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Remove list styles on ul, ol elements with a class attribute */
|
||||
ul[class],
|
||||
ol[class] {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* A elements that don't have a class get default styles */
|
||||
a:not([class]) {
|
||||
text-decoration-skip-ink: auto;
|
||||
|
@ -51,15 +46,10 @@ a:not([class]) {
|
|||
/* Make images easier to work with */
|
||||
img,
|
||||
picture {
|
||||
max-width: 100%;
|
||||
max-inline-size: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Natural flow and rhythm in articles by default */
|
||||
article > * + * {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
/* Inherit fonts for inputs and buttons */
|
||||
input,
|
||||
button,
|
||||
|
@ -67,18 +57,4 @@ textarea,
|
|||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
/* Blur images when they have no alt attribute */
|
||||
img:not([alt]) {
|
||||
filter: blur(10px);
|
||||
}
|
||||
|
||||
/* Remove all animations and transitions for people that prefer not to see them */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue