@area17/a17-boilerplate
Version:
The official AREA 17 boilerplate
186 lines (151 loc) • 6.71 kB
HTML
<html dir="ltr" lang="en-US" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>A17</title>
<!-- Main Favicon -->
<link rel="shortcut icon" href="/dist/images/favicons/favicon.ico">
<!-- Apple Touch Icons (ipad/iphone standard+retina) -->
<link rel="apple-touch-icon" href="/dist/images/favicons/favicon-152.png"> <!-- General use iOS/Android icon, auto-downscaled by devices. -->
<link rel="apple-touch-icon" type="image/png" href="/dist/images/favicons/favicon-120.png" sizes="120x120"> <!-- iPhone retina touch icon -->
<link rel="apple-touch-icon" type="image/png" href="/dist/images/favicons/favicon-76.png" sizes="76x76"> <!-- iPad home screen icons -->
<!-- Favicon Fallbacks for old browsers that don't read .ico -->
<link rel="icon" type="image/png" href="/dist/images/favicons/favicon-32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/dist/images/favicons/favicon-16.png" sizes="16x16">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
<!-- insert head.js - ideally minified and inline and not linked like this -->
<script src="/dist/head.js"></script>
<link href="/dist/style.css" rel="stylesheet" />
</head>
<body>
<div id="a17" class="">
<header>
<h1>AREA 17</h1>
</header>
<main id="content">
<div data-behavior="dummyBehavior" data-dummyBehavior-start="100" data-dummyBehavior-media="large+">
<p>
Counter: <span data-dummyBehavior-counter></span>
<br>
<button data-dummyBehavior-reset>Reset</button>
</p>
<ul>
<li data-dummyBehavior-li> </li>
<li data-dummyBehavior-li> </li>
<li data-dummyBehavior-li> </li>
</ul>
<p><button data-dummyBehavior-delete>Delete counter</button></p>
</div>
</main>
<footer>
<a href="https://area17.com/?utm_source=www.CLIENT_URL.com&utm_medium=referral&utm_campaign=footer-credit-2018" target="_blank" rel="noopener">Site by AREA 17</a>
</footer>
<!-- DESIGN GRIDS -->
<div class="design-grid-toggles" data-env="Development">
<span class="design-grid-toggle design-grid-toggle--baseline" onClick="document.querySelector('.design-grid--baseline').classList.toggle('js-hide'); this.classList.toggle('js-active');" title="Toggle Baseline Grid">
<svg enable-background="new 0 0 10 10" version="1.1" viewBox="0 0 10 10" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<rect fill="currentColor" width="10" height="1"/>
<rect fill="currentColor" y="3" width="10" height="1"/>
<rect fill="currentColor" y="6" width="10" height="1"/>
<rect fill="currentColor" y="9" width="10" height="1"/>
</svg>
</span>
<span class="design-grid-toggle design-grid-toggle--columns" onClick="document.querySelector('.design-grid--columns').classList.toggle('js-hide'); this.classList.toggle('js-active');" title="Toggle Grid Columns">
<svg enable-background="new 0 0 10 10" version="1.1" viewBox="0 0 10 10" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<rect fill="currentColor" x="0" y="0" width="1" height="18"/>
<rect fill="currentColor" x="3" y="0" width="1" height="18"/>
<rect fill="currentColor" x="6" y="0" width="1" height="18"/>
<rect fill="currentColor" x="9" y="0" width="1" height="18"/>
</svg>
</span>
<span class="design-grid-toggle design-grid-toggle--img" title="Toggle Baseline Images">
<svg enable-background="new 0 0 10 10" version="1.1" viewBox="0 0 10 10" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<polygon fill="currentColor" points="8,8 2,8 3.5,3 5.5,6.2 6.5,5.2 "/>
<circle fill="currentColor" cx="7.2" cy="2.8" r="0.8"/>
<path fill="currentColor" d="M9,1v8H1V1H9 M10,0H0v10h10V0L10,0z"/>
</svg>
</span>
</div>
<span class="design-grid design-grid--baseline js-hide"></span>
<span class="design-grid design-grid--columns js-hide"></span>
<script>
var imgBaseline = function(el) {
// get baseline - assumes 5px baseline
var el = document.querySelector('.design-grid-toggle--img');
var baseline = el.getAttribute('data-baseline') || 5;
var active = false;
var timer;
function _handleClicks(e) {
if( active ){
_remove();
}else{
_add();
}
el.classList.toggle('js-active');
e.preventDefault();
}
function _handleResized() {
clearTimeout(timer);
timer = setTimeout(function(){
if( active ){
// remove the set heights to accurately recalculate heights if image width has changed
_remove();
// Add the new baselined heights
_add();
}
}, 200);
}
function _add() {
var images = document.querySelectorAll('img');
// set active var to true
active = true;
for (var i = 0; i <= images.length - 1; i++) {
// Get current image
var img = images[i];
// Get image height
var h = img.height;
// Round image height value to nearest baseline height value
var rH = Math.round(h / baseline) * baseline;
// Store old height if height was previously set
if( img.hasAttribute('height') ){
console.log(img.getAttribute('height'));
img.setAttribute('data-oldH', h);
}
// Update image height to rounded value
img.height = rH;
}
}
function _remove(){
var images = document.querySelectorAll('img');
// set active var to false
active = false;
for (var i = 0; i <= images.length - 1; i++) {
// Get current image
var img = images[i];
// if image has an old height set reset it to that, otherwise remove the height attribute
if( img.hasAttribute('data-oldH') ){
img.height = img.getAttribute('data-oldH');
img.removeAttribute('data-oldH');
}else{
img.removeAttribute('height');
}
}
}
if( el ){
el.addEventListener('click', _handleClicks, false);
document.addEventListener('resized', _handleResized);
}
};
document.addEventListener('DOMContentLoaded', function(){
imgBaseline();
});
</script>
<!-- END DESIGN GRIDS -->
</div>
<script src="/dist/app.js"></script>
</body>
</html>