diff --git a/README.md b/README.md index 0d0905d..48c450b 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,57 @@ -# css_reset +# CSS Reset +## Modern CSS Reset -Modern CSS Reset \ No newline at end of file +Das bessere Box Modell +``` +*, +*::before, +*::after { + box-sizing: border-box; +} +``` +Alle Aussenabstände auf 0 setzen +``` +* { + margin: 0; +} +``` +Höhe 100% & smooth scrolling +``` +html, +body { + height: 100%; + scroll-behavior: smooth; +} +``` +Bilder / Videos skalierbar +``` +img, +picture, +video, +canvas, +svg { + display: block; + max-width: 100%; +} +``` +"Schöne Schriften" +``` +input, +button, +textarea, +select { + font: inherit; +} +``` +Lange Wörter umbrechen +``` +p, +h1, +h2, +h3, +h4, +h5, +h6 { + overflow-wrap: break-word; +} +``` \ No newline at end of file diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 0000000..989ade7 --- /dev/null +++ b/css/reset.css @@ -0,0 +1,42 @@ +* { + margin: 0; +} + +*::before, *::after { + box-sizing: border-box; +} + +html { + height: 100%; +} + +body { + height: 100%; + scroll-behavior: smooth; +} + +img, +picture, +video, +canvas, +svg { + display: block; + max-width: 100%; +} + +input, +button, +textarea, +select { + font: inherit; +} + +p, +h1, +h2, +h3, +h4, +h5, +h6 { + overflow-wrap: break-word; +} diff --git a/css/reset.min.css b/css/reset.min.css new file mode 100644 index 0000000..62fb5aa --- /dev/null +++ b/css/reset.min.css @@ -0,0 +1 @@ +*{margin:0}*::before,*::after{box-sizing:border-box}html{height:100%}body{height:100%;scroll-behavior:smooth}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word} diff --git a/package.json b/package.json new file mode 100644 index 0000000..1a04c24 --- /dev/null +++ b/package.json @@ -0,0 +1,13 @@ +{ + "name": "CSS Reset", + "version": "1.0.0", + "description": "Modern CSS Reset", + "main": "index.html", + "scripts": { + "scss": "node-sass scss/reset.scss css/reset.css --output-style expanded", + "cssmin": "node-sass css/reset.css css/reset.min.css --output-style compressed", + "build:css": "npm run scss && npm run cssmin", + "watch:css": "onchange 'scss/*.scss' 'scss/inc/*.scss' -- npm run build:css" + }, + "author": "☰NETSESION" +} \ No newline at end of file diff --git a/reset.css b/reset.css new file mode 100644 index 0000000..3c06205 --- /dev/null +++ b/reset.css @@ -0,0 +1,46 @@ +*, +*::before, +*::after { + box-sizing: border-box; +} + +* { + margin: 0; +} + +html, +body { + height: 100%; + scroll-behavior: smooth; +} + +body { + line-height: calc(1em + 0.5rem); + -webkit-font-smoothing: antialiased; +} + +img, +picture, +video, +canvas, +svg { + display: block; + max-width: 100%; +} + +input, +button, +textarea, +select { + font: inherit; +} + +p, +h1, +h2, +h3, +h4, +h5, +h6 { + overflow-wrap: break-word; +} \ No newline at end of file diff --git a/scss/reset.scss b/scss/reset.scss new file mode 100644 index 0000000..4323829 --- /dev/null +++ b/scss/reset.scss @@ -0,0 +1,44 @@ +* { + margin: 0; + + &::before, + &::after { + box-sizing: border-box; + } +} + +html { + height: 100%; +} + +body { + height: 100%; + scroll-behavior: smooth; + +} + +img, +picture, +video, +canvas, +svg { + display: block; + max-width: 100%; +} + +input, +button, +textarea, +select { + font: inherit; +} + +p, +h1, +h2, +h3, +h4, +h5, +h6 { + overflow-wrap: break-word; +} \ No newline at end of file