diff --git a/dist/reset.css b/dist/reset.css new file mode 100644 index 0000000..b1fb347 --- /dev/null +++ b/dist/reset.css @@ -0,0 +1,68 @@ +/* Box sizing rules */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Remove default padding */ +ul, +ol { + padding: 0; +} + +/* Remove default margin */ +body, +h1, +h2, +h3, +h4, +p, +ul, +ol, +li, +figure, +figcaption, +dl, +dd { + margin: 0; +} + +/* Set core body defaults */ +body { + min-height: 100vh; + scroll-behavior: smooth; + 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; +} + +/* Make images easier to work with */ +img { + max-width: 100%; + display: block; +} + +/* Natural flow and rhythm in articles by default */ +article > * + * { + margin-top: 1em; +} + +/* Remove _all_ animations and transitions for people that prefer not to see them */ +@media (prefers-reduced-motion: reduce) { + * { + animation-play-state: paused !important; + transition: none !important; + scroll-behavior: auto !important; + } +} diff --git a/dist/reset.min.css b/dist/reset.min.css new file mode 100644 index 0000000..ea812d3 --- /dev/null +++ b/dist/reset.min.css @@ -0,0 +1 @@ +*,*::before,*::after{box-sizing:border-box}ul,ol{padding:0}body,h1,h2,h3,h4,p,ul,ol,li,figure,figcaption,dl,dd{margin:0}body{min-height:100vh;scroll-behavior:smooth;text-rendering:optimizeSpeed;line-height:1.5}ul[class],ol[class]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}img{max-width:100%;display:block}article>*+*{margin-top:1em}@media(prefers-reduced-motion:reduce){*{animation-play-state:paused !important;transition:none !important;scroll-behavior:auto !important}} diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..78b4ed4 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,13 @@ +{ + "name": "modern-css-reset", + "version": "1.0.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "uglifycss": { + "version": "0.0.29", + "resolved": "https://registry.npmjs.org/uglifycss/-/uglifycss-0.0.29.tgz", + "integrity": "sha512-J2SQ2QLjiknNGbNdScaNZsXgmMGI0kYNrXaDlr4obnPW9ni1jljb1NeEVWAiTgZ8z+EBWP2ozfT9vpy03rjlMQ==" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..a13e0bf --- /dev/null +++ b/package.json @@ -0,0 +1,23 @@ +{ + "name": "modern-css-reset", + "version": "1.0.0", + "description": "A bare-bones CSS reset for modern web development", + "main": "./dist/reset.min.css", + "scripts": { + "build": "uglifycss src/reset.css > dist/reset.min.css && cp src/reset.css dist/reset.css" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/hankchizljaw/modern-css-reset.git" + }, + "keywords": [], + "author": "", + "license": "MIT", + "bugs": { + "url": "https://github.com/hankchizljaw/modern-css-reset/issues" + }, + "homepage": "https://github.com/hankchizljaw/modern-css-reset#readme", + "dependencies": { + "uglifycss": "0.0.29" + } +} diff --git a/src/reset.css b/src/reset.css new file mode 100644 index 0000000..b1fb347 --- /dev/null +++ b/src/reset.css @@ -0,0 +1,68 @@ +/* Box sizing rules */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Remove default padding */ +ul, +ol { + padding: 0; +} + +/* Remove default margin */ +body, +h1, +h2, +h3, +h4, +p, +ul, +ol, +li, +figure, +figcaption, +dl, +dd { + margin: 0; +} + +/* Set core body defaults */ +body { + min-height: 100vh; + scroll-behavior: smooth; + 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; +} + +/* Make images easier to work with */ +img { + max-width: 100%; + display: block; +} + +/* Natural flow and rhythm in articles by default */ +article > * + * { + margin-top: 1em; +} + +/* Remove _all_ animations and transitions for people that prefer not to see them */ +@media (prefers-reduced-motion: reduce) { + * { + animation-play-state: paused !important; + transition: none !important; + scroll-behavior: auto !important; + } +}