Skip to content

Instantly share code, notes, and snippets.

@dmhendricks

dmhendricks/index.html

Last active August 6, 2021 21:28
Show Gist options
  • Save dmhendricks/a41479436a20ce5cd4ee5a6cd5f8e811 to your computer and use it in GitHub Desktop.
Save dmhendricks/a41479436a20ce5cd4ee5a6cd5f8e811 to your computer and use it in GitHub Desktop.
Download ZIP
HTML 5 Boilerplate
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Boilerplate</title>
<meta name="description" content="Boilerplate" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="canonical" href="https://example.com/" />
<meta name="apple-mobile-web-app-title" content="Boilerplate" />
<meta name="application-name" content="Boilerplate" />
<meta name="msapplication-TileColor" content="#BADA55" />
<meta name="theme-color" content="#BADA55" />
<link rel="dns-prefetch" href="//unpkg.com" />
<link rel="manifest" href="/site.webmanifest">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="https://unpkg.com/basscss/css/basscss.min.css" />
<link rel="stylesheet" href="/assets/css/custom.css" />
<!-- Embedded style example -->
<style>
body { font-family: Verdana, Geneva, sans-serif; margin: 2em; }
a { color: #1155CC; }
a:hover { color: #0C419E; }
#status { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
</style>
</head>
<body>
<!-- Screen Readers -->
<a href="#content" class="sr-only" accesskey="s">Skip to main content</a>
<!-- Add your content here -->
<main id="content" tabindex="-1">
<p>This is a <a href="https://is.gd/BS19NA">forked</a> HTML5 boilerplate.</p>
<p id="status">The DOM is loaded!</p>
</main>
<!-- Include some external JavaScripts -->
<script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
<script src="/assets/js/main.js"></script>
<!-- Embedded JavaScript and jQuery example -->
<script>
jQuery.noConflict();
// Pure JavaScript
(function($) {
// Yes, Virginia, $ is not bound to jQuery here
$( '#status' ).style.color = '#777';
})( document.querySelector.bind( document ) );
// jQuery
(function($) {
$( '#status' ).fadeIn( 'slow' );
})( window.jQuery );
</script>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID -->
<script>window.ga=function(){ga.q.push(arguments)},ga.q=[],ga.l=+new Date,ga('create','UA-XXXXX-Y','auto'),ga('set','transport','beacon'),ga('send','pageview');</script>
<script src="https://www.google-analytics.com/analytics.js" async></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment