Skip to content

Instantly share code, notes, and snippets.

@calvinjuarez

calvinjuarez/boilerplate.html

Last active September 5, 2018 22:44
Show Gist options
  • Save calvinjuarez/3b87a439b23d4539d65cc57c05bba47a to your computer and use it in GitHub Desktop.
Save calvinjuarez/3b87a439b23d4539d65cc57c05bba47a to your computer and use it in GitHub Desktop.
Download ZIP
HTML Boilerplate
Raw
boilerplate.html
<!DOCTYPE html>
<html class="js-unavailable" lang="{{ LANGUAGE_CODE }}">
<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 }}</title>
<meta name="application-name" content="{{ SHORT_TITLE }}">
<meta name="apple-mobile-web-app-title" content="{{ SHORT_TITLE }}">
<link rel="shortcut icon" type="image/png" href="{{ PATH_TO_ICO_OR_32X32_PNG }}">
<link rel="apple-touch-icon" href="{{ PATH_TO_128X128_PNG }}">
<link rel="icon" sizes="192x192" href="{{ PATH_TO_192X192_PNG }}">
<link rel="mask-icon" color="{{ THEME_COLOR }}" href="{{ PATH_TO_COLORLESS_SVG }}">
<meta name="theme-color" content="{{ THEME_COLOR }}">
<meta name="msapplication-TileColor" content="{{ THEME_COLOR }}">
<meta name="msapplication-TileImage" content="{{ PATH_TO_144X144_TRANSPARENT_SILHOUETTE_PNG }}">
<meta name="msapplication-tap-highlight" content="no">
<!-- TRUE PROGRESSIVE WEB APPS ONLY -->
<!-- <link rel="manifest" href="manifest.json"> -->
<!-- <meta name=”apple-mobile-web-app-capable” content=”yes”> --><!-- CAREFUL; SEE: https://medium.com/@firt/dont-use-ios-web-app-meta-tag-irresponsibly-in-your-progressive-web-apps-85d70f4438cb -->
<link rel="stylesheet" href="{{ PATH_TO_CSS }}">
</head>
<body>
<a class="sr-only sr-only-focusable" href="#content">Skip to Content</a>
<header class="header">
<h1>{{ PAGE_TITLE }}</h1>
</header>
<main class="content" id="content">
{{ MAIN_CONTENT }}
</main>
<footer class="footer">
<p class="copyright">&copy; {{ YEAR }} {{ COPYRIGHT HOLDER }}. All rights reserved.</p>
</footer>
<div id="scripts" hidden>
<script>
//! INIT ON READY
document.addEventListener('DOMContentLoaded', () => {
//! -- Disable Unlinked Links
function _preventDefault(e) { e.preventDefault() } // to allow removing, make a reference to this fn available on `window` or somewhere
document.querySelectorAll('a[href="#"],a[href="."],a[href="./"]').forEach(unlink => unlink.addEventListener('click', _preventDefault))
//! -- Remove `.js-unavailable` Class
document.documentElement.classList.remove('js-unavailable')
})
</script>
<script>
//! INIT ON READY (IE 10+)
//document.addEventListener('DOMContentLoaded', function () {
// //! -- Disable Unlinked Links
// function _preventDefault(e) { e.preventDefault() }
// Array.prototype.forEach.call(document.querySelectorAll('a[href="#"],a[href="."],a[href="./"]'), function (element) {
// element.addEventListener('click', _preventDefault)
// })
// //! -- Remove `.js-unavailable` Class
// document.documentElement.classList.remove('js-unavailable')
//})
</script>
<script>
//! INIT ON READY (IE 8+)
//(function () { // #noglobal
// function _init() {
// //! -- Disable Unlinked Links
// function _preventDefault(e) { e.preventDefault ? e.preventDefault() : (e.returnValue = false) }
// for (var i = 0, unlinks = document.querySelectorAll('a[href="#"],a[href="."],a[href="./"]'); i < unlinks.length; ++i)
// unlinks[i].addEventListener('click', _preventDefault)
// //! -- Remove `.js-unavailable` Class
// if (document.documentElement.classList) document.documentElement.classList.remove('js-unavailable')
// else document.documentElement.className = document.documentElement.className.replace(/\s*\b(js-unavailable)\b\s*/gi, ' ')
// }
//
// if (document.attachEvent ? document.readyState === 'complete' : document.readyState !== 'loading') _init()
// else document.addEventListener('DOMContentLoaded', _init)
//})(undefined)
</script>
<script src="{{ PATH_TO_JS }}"></script>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment