Skip to content

Instantly share code, notes, and snippets.

@ruandre

ruandre/boiler.html

Last active September 21, 2021 19:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ruandre/df77d839eb86716bac1176d82385e329 to your computer and use it in GitHub Desktop.
Save ruandre/df77d839eb86716bac1176d82385e329 to your computer and use it in GitHub Desktop.
Download ZIP
HTML Boilerplate
Raw
boiler.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<!-- <meta name="robots" content="noindex,nofollow"> -->
<meta name="description" content="">
<meta name="theme-color" content="#fff">
<link rel="shortcut icon" href="favicon.ico">
<!-- https://ogp.me/ -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="">
<meta property="og:title" content="">
<meta property="og:description" content="">
<!-- note: may have to use absolute path to images -->
<meta property="og:image:alt" content="">
<meta property="og:image" itemprop="image" content="ogimage1200x630.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image" itemprop="image" content="ogimage300x300.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="300">
<meta property="og:image:height" content="300">
<meta name="twitter:card" content="summary_large_image">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
/* kill marching ants; REMEMBER a11ty styles! */
*{outline-width:0;}
/* nice but may decrease performance */
/* *{text-rendering:optimizeLegibility;} */
/* border-box all the things */
html{box-sizing:border-box;}
*,*::before,*::after{box-sizing:inherit;}
/* font stack */
html,body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";}
/* base */
html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
html,body{line-height:1;margin:0;overflow-x:hidden;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
a{background-color:transparent;color:inherit;text-decoration:none;-webkit-text-decoration-skip:objects;}
img{border-style:none;display:block;height:auto;max-width:100%;}
/* svg */
svg:not(:root){overflow:hidden;}
svg{fill:currentColor;}
/* intrinsic ratios */
.ir{display:block;overflow:visible;padding:0 0 100%;position:relative;height:0;width:100%;}
.ir > *{position:absolute;height:100%;width:100%;top:0;left:0;}
/* clearfix */
.cf::before,.cf::after{content:"";display:table;}
.cf::after{clear:both;}
/* reset form elements */
button,input,optgroup,select,textarea{font:inherit;font-size:100%;line-height:1;margin:0;}
button,input{overflow:visible;}
button,select{text-transform:none;}
button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;}
button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}
button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText;}
textarea{overflow:auto;}
[type="checkbox"],[type="radio"]{padding:0;}
/* ios/safari shadow etc */
input,select,textarea{background:none;background:transparent;background-image:none;border:0;box-shadow:none;padding:0;width:100%;-webkit-appearance:none;-moz-appearance:none;}
input:focus,select:focus,textarea:focus{outline:none;}
/* reset tables */
table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
table{border-collapse:collapse;border-spacing:0;}
/* layout */
.layout-center{margin-left:auto;margin-right:auto;max-width:100%;padding-left:1rem;padding-right:1rem;width:64rem;}
/* buttons */
.btn{background-color:#000;border-radius:0.25rem;color:#fff;display:inline-block;font-size:0.875rem;font-weight:600;line-height:1.5;margin:1.25rem 0;padding:0.75rem 2.25rem;text-transform:uppercase;}
.btn:hover{background-color:#ccc;color:#333;}
.btn-ico{display:inline-block;width:0.7rem;}
/* font sizing for small screens */
html{font-size:100%;}
@media (max-width:18.75em){html{font-size:5.5vw;}}
/* utility */
.is-hidden{display:none!important;}
.usn{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
/* selection */
::-moz-selection{background:#000;color:#fff;}
::selection{background:#000;color:#fff;}
/* misc */
.msg-bar{background-color:#000;background-color:rgba(0,0,0,0.75);color:#fff;font-weight:normal;left:0;line-height:1.5;padding:1rem;position:fixed;text-align:center;top:0;width:100%;z-index:9999;}
</style>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-00000000-0"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag("js", new Date());
gtag("config", "UA-00000000-0");
</script>
</head>
<body>
<!-- https://schema.org/ImageObject -->
<link itemprop="thumbnailUrl" href="ogimage300x300.png">
<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
<link itemprop="url" href="ogimage300x300.png">
</span>
<noscript><div class="msg-bar">This website requires JavaScript.<br>Please enable JavaScript and try&nbsp;again.</div></noscript>
<div id="no-cookies" class="msg-bar is-hidden">This website uses cookies for authentication.<br>Please enable cookies and try&nbsp;again.</div>
<script>
(function() {
"use strict";
var cookiesOn = function() {
try {
document.cookie = "cookietest=1";
var r = document.cookie.indexOf("cookietest=") !== -1;
document.cookie = "cookietest=1; expires=Thu, 01-Jan-1970 00:00:01 GMT";
return r;
} catch (e) {
return false;
}
};
if (!cookiesOn()) {
document.getElementById("no-cookies").classList.remove("is-hidden");
}
})();
</script>
<!-- svg 'sprite sheet' -->
<svg id="defs" style="display:none">
<defs>
<symbol id="svg-arrow" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
<path d="M8.122 24l-4.122-4 8-8-8-8 4.122-4 11.878 12z" />
</symbol>
</defs>
</svg>
<div class="layout-center">
<a class="btn usn" href="https://google.com/ncr" target="_blank" rel="noopener noreferrer">
Google <span class="btn-ico"><span class="ir"><svg><use xlink:href="#svg-arrow" /></svg></span></span>
</a>
</div>
<script>
(function() {
"use strict";
autoTrackLinks();
function autoTrackLinks() {
forEach($("a"), function(link) {
on("click", link, function(ev, el) {
trackClick(el.textContent, el.getAttribute("href"));
});
});
}
function trackClick(category, label) {
gtag("event", "click", {
event_category: clean(category),
event_label: clean(label)
});
}
function clean(str) {
return (str && str.trim().replace(/\s\s+/g, " ")) || "n/a";
}
function forEach(arr, cb) {
var l = arr.length;
for (var i = 0; i < l; i++) cb(arr[i]);
}
function on(ev, el, cb) {
el.addEventListener(ev, function(e) {
cb(e, el);
});
}
function $(sel) {
// may have to polyfill Array.from if targeting older browsers
return Array.from(document.querySelectorAll(sel));
}
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment