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 @@ + + + + +Created by potrace 1.11, written by Peter Selinger 2001-2013 + + + + + + + + + + + + + + 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 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ minireset.css logo +
+

minireset.css

+

A tiny modern CSS reset

+
+ +
+ + +
+ + + +
+ +
+ + Fork me on GitHub +
+ + + + 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" + ] }