diff --git a/README.md b/README.md
index 3e989b2..9edfe68 100644
--- a/README.md
+++ b/README.md
@@ -4,10 +4,10 @@ A tiny modern CSS reset that covers the basics:
* **resets the font sizes**: so that using semantic markup doesn't affect the styling
* **resets the block margins**: so that the spacing is only applied when you need it
-* **preserves the inline margins**: so that buttons and inputs keep their default layout
+* **resets tables**: so that tabular data only takes the space it needs
+* **preserves the inline paddings**: so that buttons and inputs keep their default layout
* **sets the border-box box sizing**: so that borders and paddings don't affect the set dimensions
* **sets responsive media elements**: so that images and embeds scale with the browser width
-* **resets tables**: so that tabular data only takes the space it needs
## Install
@@ -19,4 +19,4 @@ Or download/clone the repo.
## Copyright and license
-Code copyright 2016 Jeremy Thomas. Code released under [the MIT license](https://github.com/jgthms/minireset.css/blob/master/LICENSE).
\ No newline at end of file
+Code copyright 2016 Jeremy Thomas. Code released under [the MIT license](https://github.com/jgthms/minireset.css/blob/master/LICENSE).
diff --git a/docs/docs.css b/docs/docs.css
new file mode 100644
index 0000000..ce6a05a
--- /dev/null
+++ b/docs/docs.css
@@ -0,0 +1 @@
+/*! minireset.css v0.0.2 | MIT License | github.com/jgthms/minireset.css */html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*{box-sizing:inherit}*:before,*:after{box-sizing:inherit}img,embed,object,audio,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}html{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;background:#fff;color:#666;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Helvetica","Arial",sans-serif;font-size:18px;min-width:300px;overflow-x:hidden;overflow-y:scroll;text-rendering:optimizeLegibility}body{font-size:1rem;font-weight:300;line-height:1.4;padding-bottom:calc((6.2rem * 3) - 2px)}.header,.nav,.main{margin-left:auto;margin-right:auto;max-width:25rem}a{color:#fc0c18;text-decoration:none}strong{color:#333;font-weight:600}.content{background:white;padding:3rem 1rem;position:relative;z-index:1}.header{text-align:center}.header figure{display:block;height:160px;margin:0 auto 1rem;width:160px}.header figure img{display:block;height:160px;width:160px}.header h1{color:#333;font-size:1.5rem;font-weight:600;margin:0}.header p{margin:0}.ghbtns{height:30px;margin-bottom:3rem;margin-top:1rem;text-align:center}.ghbtns iframe{display:inline-block;vertical-align:top}.nav{margin-bottom:3rem;margin-top:3rem;text-align:center}.button,.or{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.button,.npm{align-items:center;border-radius:3px;display:flex;flex-direction:column;justify-content:center;line-height:1.2;padding:1.5rem;text-align:center;transition:background 86ms ease-out}.button{background:#fc0c18;color:#fff;cursor:pointer;font-size:0.9rem;text-decoration:none}.button strong{color:#fff;font-size:1.1em}.button span{display:block}.button small{display:block;opacity:0.7}.button em{color:rgba(255,255,255,0.5);display:block;font-size:0.8em;font-style:normal;margin-top:0.5em}.button:hover{background:#1a1a1a}.or{margin:1rem}.npm{background:#eee;font-family:"Inconsolata","Consolas","Monaco",monospace;font-size:0.8rem}.main p{margin-bottom:1em}.main a:hover{text-decoration:underline}.main ul{list-style:disc outside}.main li+li{margin-top:1em}.main li strong{display:block;font-size:1.1em}.main li strong em{color:#fd3f49;font-style:normal}.main li strong em.preserves{color:#02d461}.main li strong em.sets{color:#0d91fd}.footer{background:#1a1a1a;bottom:0;box-shadow:inset 0 2rem 3rem black;color:#b3b3b3;left:0;padding-top:2rem;position:fixed;right:0}.footer a{color:#4d4d4d;display:block;line-height:1;padding:2rem;transition:background 29ms ease-out}.footer a span{display:block;font-size:0.8rem;margin-bottom:0.4rem}.footer a strong{color:gray;display:block;font-weight:normal;transition:background 29ms ease-out}.footer a:hover{background:#fd3f49;color:rgba(0,0,0,0.3)}.footer a:hover strong{color:rgba(0,0,0,0.5)}.footer a:nth-child(2):hover{background:#0d91fd}.footer a:nth-child(3):hover{background:#02d461}.fork-me{display:block;height:140px;position:fixed;right:0;top:0;width:140px}.fork-me img{display:block;height:140px;width:140px}@media (max-width: 699px){.main{padding:0 1rem 0 2rem}.fork-me{position:absolute}}@media (min-width: 700px){body{padding-bottom:calc(6.2rem - 2px)}.content{padding:5rem}.footer{display:flex}.footer a{flex-grow:1}}
diff --git a/docs/docs.sass b/docs/docs.sass
new file mode 100644
index 0000000..7cef199
--- /dev/null
+++ b/docs/docs.sass
@@ -0,0 +1,219 @@
+@import "../minireset.sass"
+
+$grey: hsl(0, 0%, 40%)
+$grey-dark: hsl(0, 0%, 20%)
+$grey-darker: hsl(0, 0%, 10%)
+
+$blue: hsl(207, 98%, 52%)
+$green: hsl(147, 98%, 42%)
+$red: hsl(357, 98%, 62%)
+
+$primary: #fc0c18
+
+$background: #eee
+$border: #ddd
+
+$family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
+$family-monospace: "Inconsolata", "Consolas", "Monaco", monospace !default
+
+html
+ -moz-osx-font-smoothing: grayscale
+ -webkit-font-smoothing: antialiased
+ background: #fff
+ color: $grey
+ font-family: $family-sans-serif
+ font-size: 18px
+ min-width: 300px
+ overflow-x: hidden
+ overflow-y: scroll
+ text-rendering: optimizeLegibility
+
+body
+ font-size: 1rem
+ font-weight: 300
+ line-height: 1.4
+ padding-bottom: calc((6.2rem * 3) - 2px)
+
+.header, .nav, .main
+ margin-left: auto
+ margin-right: auto
+ max-width: 25rem
+
+a
+ color: $primary
+ text-decoration: none
+
+strong
+ color: $grey-dark
+ font-weight: 600
+
+.content
+ background: white
+ padding: 3rem 1rem
+ position: relative
+ z-index: 1
+
+.header
+ text-align: center
+ figure
+ display: block
+ height: 160px
+ margin: 0 auto 1rem
+ width: 160px
+ img
+ display: block
+ height: 160px
+ width: 160px
+ h1
+ color: $grey-dark
+ font-size: 1.5rem
+ font-weight: 600
+ margin: 0
+ p
+ margin: 0
+
+.ghbtns
+ height: 30px
+ margin-bottom: 3rem
+ margin-top: 1rem
+ text-align: center
+ iframe
+ display: inline-block
+ vertical-align: top
+
+.nav
+ margin-bottom: 3rem
+ margin-top: 3rem
+ text-align: center
+
+.button, .or
+ -webkit-touch-callout: none
+ -webkit-user-select: none
+ -moz-user-select: none
+ -ms-user-select: none
+ user-select: none
+
+.button, .npm
+ align-items: center
+ border-radius: 3px
+ display: flex
+ flex-direction: column
+ justify-content: center
+ line-height: 1.2
+ padding: 1.5rem
+ text-align: center
+ transition: background 86ms ease-out
+
+.button
+ background: $primary
+ color: #fff
+ cursor: pointer
+ font-size: 0.9rem
+ text-decoration: none
+ strong
+ color: #fff
+ font-size: 1.1em
+ span
+ display: block
+ small
+ display: block
+ opacity: 0.7
+ em
+ color: rgba(white, 0.5)
+ display: block
+ font-size: 0.8em
+ font-style: normal
+ margin-top: 0.5em
+ &:hover
+ background: $grey-darker
+
+.or
+ margin: 1rem
+
+.npm
+ background: $background
+ font-family: $family-monospace
+ font-size: 0.8rem
+
+.main
+ p
+ margin-bottom: 1em
+ a:hover
+ text-decoration: underline
+ ul
+ list-style: disc outside
+ li
+ + li
+ margin-top: 1em
+ strong
+ display: block
+ font-size: 1.1em
+ em
+ color: $red
+ font-style: normal
+ &.preserves
+ color: $green
+ &.sets
+ color: $blue
+
+.footer
+ background: $grey-darker
+ bottom: 0
+ box-shadow: inset 0 2rem 3rem black
+ color: hsl(0, 0%, 70%)
+ left: 0
+ padding-top: 2rem
+ position: fixed
+ right: 0
+ a
+ color: hsl(0, 0%, 30%)
+ display: block
+ line-height: 1
+ padding: 2rem
+ transition: background 29ms ease-out
+ span
+ display: block
+ font-size: 0.8rem
+ margin-bottom: 0.4rem
+ strong
+ color: hsl(0, 0%, 50%)
+ display: block
+ font-weight: normal
+ transition: background 29ms ease-out
+ &:hover
+ background: $red
+ color: rgba(black, 0.3)
+ strong
+ color: rgba(black, 0.5)
+ &:nth-child(2):hover
+ background: $blue
+ &:nth-child(3):hover
+ background: $green
+
+.fork-me
+ display: block
+ height: 140px
+ position: fixed
+ right: 0
+ top: 0
+ width: 140px
+ img
+ display: block
+ height: 140px
+ width: 140px
+
+@media (max-width: 699px)
+ .main
+ padding: 0 1rem 0 2rem
+ .fork-me
+ position: absolute
+
+@media (min-width: 700px)
+ body
+ padding-bottom: calc(6.2rem - 2px)
+ .content
+ padding: 5rem
+ .footer
+ display: flex
+ a
+ flex-grow: 1
diff --git a/docs/favicon.ico b/docs/favicon.ico
new file mode 100644
index 0000000..986403c
Binary files /dev/null and b/docs/favicon.ico differ
diff --git a/docs/favicons/android-chrome-192x192.png b/docs/favicons/android-chrome-192x192.png
new file mode 100644
index 0000000..4318002
Binary files /dev/null and b/docs/favicons/android-chrome-192x192.png differ
diff --git a/docs/favicons/android-chrome-512x512.png b/docs/favicons/android-chrome-512x512.png
new file mode 100644
index 0000000..fc0c58e
Binary files /dev/null and b/docs/favicons/android-chrome-512x512.png differ
diff --git a/docs/favicons/apple-touch-icon.png b/docs/favicons/apple-touch-icon.png
new file mode 100644
index 0000000..22f2667
Binary files /dev/null and b/docs/favicons/apple-touch-icon.png differ
diff --git a/docs/favicons/browserconfig.xml b/docs/favicons/browserconfig.xml
new file mode 100644
index 0000000..761cac9
--- /dev/null
+++ b/docs/favicons/browserconfig.xml
@@ -0,0 +1,9 @@
+
+
+
+
+
+ #fc0c18
+
+
+
diff --git a/docs/favicons/favicon-16x16.png b/docs/favicons/favicon-16x16.png
new file mode 100644
index 0000000..2ae7460
Binary files /dev/null and b/docs/favicons/favicon-16x16.png differ
diff --git a/docs/favicons/favicon-32x32.png b/docs/favicons/favicon-32x32.png
new file mode 100644
index 0000000..f58a24a
Binary files /dev/null and b/docs/favicons/favicon-32x32.png differ
diff --git a/docs/favicons/favicon.ico b/docs/favicons/favicon.ico
new file mode 100644
index 0000000..986403c
Binary files /dev/null and b/docs/favicons/favicon.ico differ
diff --git a/docs/favicons/manifest.json b/docs/favicons/manifest.json
new file mode 100644
index 0000000..d567572
--- /dev/null
+++ b/docs/favicons/manifest.json
@@ -0,0 +1,17 @@
+{
+ "name": "minireset.css",
+ "icons": [
+ {
+ "src": "\/favicons\/android-chrome-192x192.png",
+ "sizes": "192x192",
+ "type": "image\/png"
+ },
+ {
+ "src": "\/favicons\/android-chrome-512x512.png",
+ "sizes": "512x512",
+ "type": "image\/png"
+ }
+ ],
+ "theme_color": "#ffffff",
+ "display": "standalone"
+}
diff --git a/docs/favicons/mstile-150x150.png b/docs/favicons/mstile-150x150.png
new file mode 100644
index 0000000..89c47b9
Binary files /dev/null and b/docs/favicons/mstile-150x150.png differ
diff --git a/docs/favicons/safari-pinned-tab.svg b/docs/favicons/safari-pinned-tab.svg
new file mode 100644
index 0000000..57ecdb7
--- /dev/null
+++ b/docs/favicons/safari-pinned-tab.svg
@@ -0,0 +1,57 @@
+
+
+
diff --git a/docs/images/minireset-logo.png b/docs/images/minireset-logo.png
new file mode 100644
index 0000000..5a56bad
Binary files /dev/null and b/docs/images/minireset-logo.png differ
diff --git a/docs/images/minireset.png b/docs/images/minireset.png
new file mode 100644
index 0000000..fb63401
Binary files /dev/null and b/docs/images/minireset.png differ
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 0000000..1cee468
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,87 @@
+
+
+
+ minireset.css: a tiny modern CSS reset
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - resets the font sizesso that using semantic markup doesn't affect the styling
+ - resets the block marginsso that the spacing is only applied when you need it
+ - resets tablesso that tabular data only takes the space it needs
+ - preserves the inline paddingsso that buttons and inputs keep their default layout
+ - sets the border-box box sizingso that borders and paddings don't affect the set dimensions
+ - sets responsive media elementsso that images and embeds scale with the browser width
+
+
+
+
+
+
+
+
+
diff --git a/package.json b/package.json
index e31f102..5cf014c 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,9 @@
"scripts": {
"build": "npm run build-sass && npm run build-min-sass",
"build-sass": "node-sass --output-style expanded minireset.sass minireset.css",
- "build-min-sass": "node-sass --output-style compressed minireset.sass minireset.min.css"
+ "build-min-sass": "node-sass --output-style compressed minireset.sass minireset.min.css",
+ "docs": "node-sass --output-style compressed docs/docs.sass docs/docs.css",
+ "start": "npm run docs -- --watch"
},
"repository": {
"type": "git",
@@ -26,5 +28,10 @@
"homepage": "https://github.com/jgthms/minireset.css#readme",
"devDependencies": {
"node-sass": "^3.9.3"
- }
+ },
+ "files": [
+ "minireset.css",
+ "minireset.min.css",
+ "minireset.sass"
+ ]
}