Add docs

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
 

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

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

docs/favicons/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+  <msapplication>
+    <tile>
+      <square150x150logo src="/favicons/mstile-150x150.png"/>
+      <TileColor>#fc0c18</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig>

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

docs/favicons/safari-pinned-tab.svg

@@ -0,0 +1,57 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="640.000000pt" height="640.000000pt" viewBox="0 0 640.000000 640.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,640.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M699 6396 c-2 -2 -22 -7 -44 -10 -22 -4 -56 -11 -75 -17 -275 -82
+-482 -296 -556 -574 -18 -68 -19 -158 -19 -2595 0 -2426 1 -2528 19 -2595 65
+-249 247 -456 480 -546 162 -63 -5 -59 2699 -59 2645 1 2528 -1 2672 49 195
+69 395 262 465 449 60 159 55 -71 57 2677 2 2700 5 2554 -47 2702 -74 211
+-277 410 -488 478 -143 46 -21 44 -2663 45 -1373 0 -2498 -2 -2500 -4z m4559
+-651 c35 -8 102 -33 150 -56 118 -57 224 -163 281 -281 77 -160 71 25 70
+-2203 0 -1666 -3 -2011 -14 -2065 -38 -176 -176 -351 -339 -430 -156 -75 4
+-71 -2234 -67 -1104 1 -2016 5 -2027 9 -162 52 -224 87 -317 180 -60 60 -86
+96 -117 160 -76 157 -71 -14 -71 2208 0 1982 1 1996 21 2075 31 120 81 208
+169 295 97 96 204 154 333 180 23 4 940 8 2037 8 1654 0 2006 -2 2058 -13z"/>
+<path d="M1270 2560 l0 -320 70 0 70 0 1 33 c0 17 1 129 1 248 l1 216 88 1 89
+1 0 -250 0 -250 72 3 73 3 0 245 0 245 50 2 c71 3 104 -6 116 -30 8 -13 12
+-98 12 -244 l0 -223 72 0 71 0 -1 243 c-1 261 -7 296 -53 340 -56 54 -73 56
+-415 57 l-317 1 0 -321z"/>
+<path d="M2129 2873 c-1 -9 -1 -602 0 -620 1 -9 22 -13 71 -13 l70 0 0 320 0
+320 -70 0 c-38 0 -70 -3 -71 -7z"/>
+<path d="M2340 2560 l0 -321 72 3 73 3 1 235 c1 129 2 240 3 246 1 9 56 12
+192 11 173 0 194 -2 210 -18 11 -11 19 -31 20 -46 0 -16 1 -118 2 -228 l2
+-200 71 -3 71 -3 -2 248 c-2 259 -7 287 -48 331 -53 58 -69 60 -380 62 l-286
+1 -1 -321z"/>
+<path d="M3129 2863 c-1 -24 -1 -594 0 -610 1 -9 22 -13 71 -13 l70 0 0 320 0
+320 -70 0 c-60 0 -70 -3 -71 -17z"/>
+<path d="M1270 1610 l0 -320 70 0 70 0 0 33 c1 17 1 74 1 125 l0 93 199 -3
+c146 -2 202 -6 212 -16 12 -12 16 -63 18 -194 l0 -38 70 0 70 0 0 118 c-1 72
+-6 132 -15 155 -11 33 -11 44 1 73 28 68 9 206 -34 241 -9 8 -35 23 -57 33
+-36 17 -67 19 -322 20 l-283 1 0 -321z m568 128 l-3 -53 -212 -1 -213 -2 0 48
+c0 25 3 49 6 52 3 3 100 6 215 7 l210 2 -3 -53z"/>
+<path d="M2053 1678 c2 -226 4 -257 21 -288 50 -93 91 -102 430 -98 l260 3 0
+68 1 67 -250 1 c-137 0 -259 2 -269 4 -30 6 -46 28 -50 68 l-4 37 280 0 c154
+-1 283 2 286 5 3 3 6 35 6 70 l1 65 -55 1 c-30 0 -159 0 -285 0 l-231 0 1 52
+1 52 278 2 c153 1 281 4 284 7 4 5 7 76 3 119 -1 16 -25 17 -356 17 l-354 0 2
+-252z"/>
+<path d="M2961 1918 c-82 -23 -117 -72 -125 -173 -3 -49 16 -120 41 -147 44
+-49 65 -53 303 -58 l225 -5 -2 -45 c-1 -25 -2 -48 -2 -52 -1 -5 -129 -8 -284
+-8 l-284 0 0 -70 1 -71 277 1 c304 1 334 6 384 56 76 76 64 241 -22 298 -52
+34 -70 36 -295 37 -178 0 -198 2 -199 17 -2 18 -1 71 0 84 1 4 110 7 244 7
+133 0 260 0 282 0 l41 1 0 70 1 70 -276 -1 c-152 0 -291 -5 -310 -11z"/>
+<path d="M3618 1918 c-7 -22 -2 -430 6 -481 9 -60 62 -120 121 -136 25 -7 144
+-11 311 -11 l272 0 0 70 0 70 -251 1 c-139 0 -261 2 -272 4 -27 5 -45 33 -45
+72 l0 33 284 0 283 0 2 70 2 70 -28 1 c-15 0 -145 0 -288 0 l-260 1 3 54 4 54
+282 0 282 0 2 70 2 70 -354 0 c-274 0 -355 -3 -358 -12z"/>
+<path d="M4399 1926 c-2 -2 -2 -34 -1 -70 l4 -66 139 0 c104 0 139 -3 140 -12
+0 -7 2 -119 2 -248 l2 -235 70 -3 71 -3 -1 238 c-1 131 1 244 3 251 3 8 19 13
+41 12 20 -1 82 -2 139 -1 l102 1 0 70 0 70 -353 0 c-195 0 -356 -2 -358 -4z"/>
+</g>
+</svg>

docs/index.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>minireset.css: a tiny modern CSS reset</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <meta property="og:url" content="http://jgthms.com/minireset.css/">
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="minireset.css">
+    <meta property="og:description" content="A tiny modern CSS reset">
+    <meta property="og:image" content="http://jgthms.com/minireset.css/minireset.png">
+    <meta property="og:image:type" content="image/png">
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="630">
+
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:site" content="@jgthms">
+    <meta name="twitter:creator" content="@jgthms">
+    <meta name="twitter:title" content="minireset.css">
+    <meta name="twitter:description" content="A tiny modern CSS reset">
+    <meta name="twitter:image" content="http://jgthms.com/minireset.css/minireset.png">
+
+    <link rel="apple-touch-icon" sizes="180x180" href="http://jgthms.com/minireset.css/favicons/apple-touch-icon.png">
+    <link rel="icon" type="image/png" href="http://jgthms.com/minireset.css/favicons/favicon-32x32.png" sizes="32x32">
+    <link rel="icon" type="image/png" href="http://jgthms.com/minireset.css/favicons/favicon-16x16.png" sizes="16x16">
+    <link rel="manifest" href="http://jgthms.com/minireset.css/favicons/manifest.json">
+    <link rel="mask-icon" href="http://jgthms.com/minireset.css/favicons/safari-pinned-tab.svg" color="#fc0c18">
+    <link rel="shortcut icon" href="http://jgthms.com/minireset.css/favicons/favicon.ico">
+    <meta name="msapplication-config" content="http://jgthms.com/minireset.css/favicons/browserconfig.xml">
+    <meta name="theme-color" content="#ffffff">
+
+    <link rel="stylesheet" type="text/css" href="docs.css">
+  </head>
+  <body>
+    <div class="content">
+      <header class="header">
+        <figure>
+          <img src="images/minireset-logo.png" alt="minireset.css logo">
+        </figure>
+        <h1>minireset.css</h1>
+        <p>A tiny modern CSS reset</p>
+      </header>
+
+      <div class="ghbtns">
+        <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=minireset.css&type=star&count=true&size=large" frameborder="0" scrolling="0" width="130px" height="30px"></iframe>
+        <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=minireset.css&type=fork&count=false&size=large" frameborder="0" scrolling="0" width="80px" height="30px"></iframe>
+      </div>
+
+      <nav class="nav">
+        <a class="button" href="https://raw.githubusercontent.com/jgthms/minireset.css/master/minireset.min.css">
+          <span>Download <strong>minireset.min.css</strong></span>
+          <small>544 Bytes minified</small>
+        </a>
+        <p class="or">or</p>
+        <pre class="npm">npm install minireset.css</pre>
+      </nav>
+
+      <main class="main">
+        <ul>
+          <li><strong><em>resets</em> the font sizes</strong>so that using semantic markup doesn't affect the styling</li>
+          <li><strong><em>resets</em> the block margins</strong>so that the spacing is only applied when you need it</li>
+          <li><strong><em>resets</em> tables</strong>so that tabular data only takes the space it needs</li>
+          <li><strong><em class="preserves">preserves</em> the inline paddings</strong>so that buttons and inputs keep their default layout</li>
+          <li><strong><em class="sets">sets</em> the border-box box sizing</strong>so that borders and paddings don't affect the set dimensions</li>
+          <li><strong><em class="sets">sets</em> responsive media elements</strong>so that images and embeds scale with the browser width</li>
+        </ul>
+      </main>
+
+      <a class="fork-me" href="https://github.com/jgthms/minireset.css"><img src="https://raw.githubusercontent.com/philwareham/github-ribbons-retina/master/fork-me%402x.png" alt="Fork me on GitHub"></a>
+    </div>
+
+    <footer class="footer">
+      <a href="https://github.com/jgthms/minireset.css/blob/master/LICENSE">
+        <span>License</span>
+        <strong>MIT</strong>
+      </a>
+      <a href="https://github.com/jgthms/minireset.css">
+        <span>On</span>
+        <strong>GitHub</strong>
+      </a>
+      <a href="http://jgthms.com">
+        <span>By</span>
+        <strong>@jgthms</strong>
+      </a>
+    </footer>
+  </body>
+</html>

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