reset

README.md

@@ -1,3 +1,57 @@
-# css_reset
+# CSS Reset
+## Modern CSS Reset
 
-Modern CSS Reset
+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;
+}
+```

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;
+}

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}

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"
+}

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;
+}

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;
+}