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
|
*.log
|
||||||
npm-debug.*
|
npm-debug.*
|
||||||
*.scssc
|
*.scssc
|
||||||
*.log
|
|
||||||
*.swp
|
*.swp
|
||||||
.DS_Store
|
.DS_Store
|
||||||
.sass-cache
|
.sass-cache
|
||||||
node_modules
|
node_modules
|
||||||
test.html
|
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)
|
![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)
|
[![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
|
## Installation
|
||||||
|
|
||||||
NPM:
|
NPM:
|
||||||
|
|
||||||
```console
|
```console
|
||||||
npm install --save-dev modern-css-reset
|
npm install --save-dev @punkfairie/modern-css-reset
|
||||||
```
|
```
|
||||||
|
|
||||||
Yarn:
|
Yarn:
|
||||||
|
|
||||||
```console
|
```console
|
||||||
yarn add modern-css-reset
|
yarn add @punkfairie/modern-css-reset
|
||||||
```
|
```
|
||||||
|
|
||||||
Unpkg CDN:
|
Unpkg CDN:
|
||||||
|
|
||||||
```html
|
```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:
|
jsDelivr CDN:
|
||||||
|
|
||||||
```html
|
```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
|
### Manual installation
|
||||||
|
@ -38,7 +44,7 @@ jsDelivr CDN:
|
||||||
First, let's clone this repository:
|
First, let's clone this repository:
|
||||||
|
|
||||||
```console
|
```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:
|
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 */
|
/* Box sizing rules */
|
||||||
*,
|
*,
|
||||||
*::before,
|
*::before,
|
||||||
|
@ -26,23 +27,17 @@ ol[role="list"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Set core root defaults */
|
/* Set core root defaults */
|
||||||
html {
|
html:focus-within {
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Set core body defaults */
|
/* Set core body defaults */
|
||||||
body {
|
body {
|
||||||
min-height: 100vh;
|
min-block-size: 100vb;
|
||||||
text-rendering: optimizeSpeed;
|
text-rendering: optimizeSpeed;
|
||||||
line-height: 1.5;
|
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 elements that don't have a class get default styles */
|
||||||
a:not([class]) {
|
a:not([class]) {
|
||||||
text-decoration-skip-ink: auto;
|
text-decoration-skip-ink: auto;
|
||||||
|
@ -51,15 +46,10 @@ a:not([class]) {
|
||||||
/* Make images easier to work with */
|
/* Make images easier to work with */
|
||||||
img,
|
img,
|
||||||
picture {
|
picture {
|
||||||
max-width: 100%;
|
max-inline-size: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Natural flow and rhythm in articles by default */
|
|
||||||
article > * + * {
|
|
||||||
margin-top: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Inherit fonts for inputs and buttons */
|
/* Inherit fonts for inputs and buttons */
|
||||||
input,
|
input,
|
||||||
button,
|
button,
|
||||||
|
@ -67,18 +57,4 @@ textarea,
|
||||||
select {
|
select {
|
||||||
font: inherit;
|
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",
|
"name": "modern-css-reset",
|
||||||
"version": "1.0.4",
|
"version": "1.4.0",
|
||||||
"lockfileVersion": 1,
|
"lockfileVersion": 1,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|
15
package.json
15
package.json
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "modern-css-reset",
|
"name": "@punkfairie/modern-css-reset",
|
||||||
"version": "1.2.0",
|
"version": "1.0.0",
|
||||||
"description": "A bare-bones CSS reset for modern web development",
|
"description": "A bare-bones CSS reset for modern web development",
|
||||||
"main": "./dist/reset.min.css",
|
"main": "./dist/reset.min.css",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
@ -8,18 +8,21 @@
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "git+https://github.com/hankchizljaw/modern-css-reset.git"
|
"url": "git+https://github.com/punkfairie/modern-css-reset.git"
|
||||||
},
|
},
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"css reset",
|
"css reset",
|
||||||
"modern 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",
|
"license": "MIT",
|
||||||
"bugs": {
|
"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": {
|
"devDependencies": {
|
||||||
"uglifycss": "0.0.29"
|
"uglifycss": "0.0.29"
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
@layer reset {
|
||||||
/* Box sizing rules */
|
/* Box sizing rules */
|
||||||
*,
|
*,
|
||||||
*::before,
|
*::before,
|
||||||
|
@ -26,23 +27,17 @@ ol[role="list"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Set core root defaults */
|
/* Set core root defaults */
|
||||||
html {
|
html:focus-within {
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Set core body defaults */
|
/* Set core body defaults */
|
||||||
body {
|
body {
|
||||||
min-height: 100vh;
|
min-block-size: 100vb;
|
||||||
text-rendering: optimizeSpeed;
|
text-rendering: optimizeSpeed;
|
||||||
line-height: 1.5;
|
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 elements that don't have a class get default styles */
|
||||||
a:not([class]) {
|
a:not([class]) {
|
||||||
text-decoration-skip-ink: auto;
|
text-decoration-skip-ink: auto;
|
||||||
|
@ -51,15 +46,10 @@ a:not([class]) {
|
||||||
/* Make images easier to work with */
|
/* Make images easier to work with */
|
||||||
img,
|
img,
|
||||||
picture {
|
picture {
|
||||||
max-width: 100%;
|
max-inline-size: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Natural flow and rhythm in articles by default */
|
|
||||||
article > * + * {
|
|
||||||
margin-top: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Inherit fonts for inputs and buttons */
|
/* Inherit fonts for inputs and buttons */
|
||||||
input,
|
input,
|
||||||
button,
|
button,
|
||||||
|
@ -67,18 +57,4 @@ textarea,
|
||||||
select {
|
select {
|
||||||
font: inherit;
|
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