Created
March 31, 2016 23:33
-
-
Save mhulse/3c4bccc5d82aeb074ae33edcdf570bdf to your computer and use it in GitHub Desktop.
Starter dummy html example; see: https://github.com/mhulse/html-dummies/issues/56
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html class="no-js no-touch" lang="en" dir="ltr"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <script>/*! no-js uglified | https://gist.github.com/mhulse/4704893 */!function(e){e.documentElement.className=e.documentElement.className.replace(/\bno-js\b/,"js")}(document);</script> | |
| <script>/*! no-touch uglified | https://gist.github.com/mhulse/4704893 */!function(o,n,c){("ontouchstart"in o||o.DocumentTouch&&n instanceof DocumentTouch||c.MaxTouchPoints>0||c.msMaxTouchPoints>0)&&(n.documentElement.className=n.documentElement.className.replace(/\bno-touch\b/,"touch"))}(window,document,navigator);</script> | |
| <title></title> | |
| <meta name="description" content=""> | |
| <meta name="keywords" content=""> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700,400italic,700italic"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.0.0/normalize.min.css"> | |
| <link rel="stylesheet" href="http://yui.yahooapis.com/combo?pure/0.6.0/grids-min.css&pure/0.6.0/grids-responsive-min.css"> | |
| <style> | |
| /* https://github.com/mhulse/css-bullets */ | |
| *, | |
| *::before, | |
| *::after { | |
| -webkit-box-sizing: border-box; | |
| -khtml-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| -o-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| /* `16px` base font size: */ | |
| font: 400 1.4rem/1.4 Roboto, sans-serif; /* Use `em` if you want the property to scale according to its font size and `rem` for everything else. */ | |
| padding: 1rem; | |
| } | |
| @media screen and (min-width: 35.5rem) { | |
| body { padding: 4rem; } | |
| } | |
| @media screen and (min-width: 128rem) { | |
| body { padding: 6rem; } | |
| } | |
| /* | |
| When setting the primary font stack, apply it to the Pure grid units along | |
| with `html`, `button`, `input`, `select`, and `textarea`. Pure Grids use | |
| specific font stacks to ensure the greatest OS/browser compatibility. | |
| */ | |
| html, button, input, select, textarea, | |
| .pure-g [class *= "pure-u"] { | |
| /* Set your content font stack here: */ | |
| font-family: Roboto, sans-serif; | |
| } | |
| .pure-g > :first-child > :first-child { margin-top: 0 !important; } | |
| .pure-g > :last-child > :last-child { margin-bottom: 0 !important; } | |
| @media screen and (min-width: 48em) { | |
| .pure-g > div:first-child { padding-right: 2rem; } | |
| } | |
| img { | |
| max-width: 100%; | |
| height: auto; | |
| display: block; | |
| } | |
| a, | |
| a:visited { | |
| color: #d68100; | |
| text-decoration: none; | |
| } | |
| .no-touch a:visited:hover, | |
| a:focus, | |
| .no-touch a:focus:hover, | |
| .no-touch a:hover, | |
| a:active { | |
| color: #0f0077; | |
| text-decoration: none; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| font-weight: 700; | |
| line-height: 1.1; | |
| letter-spacing: .02em; | |
| word-spacing: .12em; | |
| margin: 2rem 0; | |
| padding: 0; | |
| } | |
| h1 + h1, h1 + h2, h1 + h3, h1 + h4, h1 + h5, h1 + h6, | |
| h2 + h1, h2 + h2, h2 + h3, h2 + h4, h2 + h5, h2 + h6, | |
| h3 + h1, h3 + h2, h3 + h3, h3 + h4, h3 + h5, h3 + h6, | |
| h4 + h1, h4 + h2, h4 + h3, h4 + h4, h4 + h5, h4 + h6, | |
| h5 + h1, h5 + h2, h5 + h3, h5 + h4, h5 + h5, h5 + h6, | |
| h6 + h1, h6 + h2, h6 + h3, h6 + h4, h6 + h5, h6 + h6 { | |
| font-weight: 400; | |
| margin-top: -1.65rem; | |
| } | |
| h1, .h1 { font-size: 3rem; } | |
| h2, .h2 { font-size: 2.6rem; } | |
| h3, .h3 { font-size: 2.4rem; } | |
| h4, .h4 { font-size: 2.2rem; } | |
| h5, .h5 { font-size: 2rem; } | |
| h6, .h6 { font-size: 1.8rem; } | |
| h1:empty { display: none; } | |
| [container] { | |
| margin-right: auto; | |
| margin-left: auto; | |
| max-width: 192 rem; | |
| } | |
| hr, | |
| .hr { | |
| border: 0; | |
| border-top: 1px solid #999; | |
| height: 0; | |
| margin: 15px 0 20px; | |
| padding: 0; | |
| -webkit-box-sizing: content-box; | |
| -moz-box-sizing: content-box; | |
| -ms-box-sizing: content-box; | |
| -o-box-sizing: content-box; | |
| box-sizing: content-box; | |
| } | |
| .table { | |
| font-size: 1.6rem; | |
| empty-cells: hide; | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| margin-top: 0; | |
| width: 100%; | |
| } | |
| .table thead { | |
| text-align: left; | |
| vertical-align: bottom; | |
| } | |
| .table tbody { vertical-align: top; } | |
| .table th, | |
| .table td { padding: 1rem .5rem; } | |
| .table th { padding-top: 0; } | |
| .table > tbody > :last-child > td { padding-bottom: 0; } | |
| .table th:first-child, | |
| .table td:first-child { padding-left: 0; } | |
| .table th:last-child, | |
| .table td:last-child { padding-right: 0; } | |
| .table.table-border-x thead th, | |
| .table.table-border-x tbody th, | |
| .table.table-border-x tbody td { border-bottom: 1px solid #000; } | |
| .table.table-border-x tfoot th, | |
| .table.table-border-x tfoot td { border-top: 1px solid #000; } | |
| .table.table-border-x tbody tr:last-child th, | |
| .table.table-border-x tbody tr:last-child td { border-bottom: 0; } | |
| .table.table-border-y th, | |
| .table.table-border-y td { | |
| border-right: 1px solid #000; | |
| border-left: 1px solid #000; | |
| } | |
| .table.table-border-y th:first-child, | |
| .table.table-border-y td:first-child { border-left: 0; } | |
| .table.table-border-y th:last-child, | |
| .table.table-border-y td:last-child { border-right: 0; } | |
| /* | |
| <div class="scroll"><img ...></div> | |
| <div class="scroll"><table></table></div> | |
| */ | |
| .scroll { | |
| width: 100%; | |
| overflow-y: auto; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| .scroll > * { | |
| margin-top: 0; | |
| margin-bottom: 0; | |
| -webkit-transform: translateZ(0); | |
| } | |
| /* | |
| <div class="mm"> | |
| <video ...></video> | |
| </div> | |
| <div class="mm tv"><iframe ...></iframe></div> | |
| */ | |
| .mm { | |
| height: 0; | |
| padding-bottom: 56.25%; /* 16:9 = (9 / 16 = .5625) x 100 */ | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .mm iframe, | |
| .mm object, | |
| .mm embed, | |
| .mm video { | |
| border: 0; | |
| width: 100% !important; | |
| height: 100% !important; | |
| max-width: none; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| } | |
| .mm.theatre { padding-bottom: 59.171597633136%; } /* 1.69:1 = (1 / 1.69 = .59171597633136) x 100 */ | |
| .mm.slide { padding-bottom: 66.666666666667%; } /* 3:2 = (2 / 3 = .66666666666667) x 100 */ | |
| .mm.tv { padding-bottom: 75%; } /* 4:3 = (3 / 4 = .75) x 100 */ | |
| </style> | |
| </head> | |
| <body> | |
| <header container> | |
| </header> | |
| <main container> | |
| </main> | |
| </main> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> | |
| <script> | |
| $(function() { | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment