Skip to content

Instantly share code, notes, and snippets.

@garyrozanc

garyrozanc/index.html

Created December 5, 2018 22:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save garyrozanc/08983545c9644cda0ed2342a7dc6cd9f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save garyrozanc/08983545c9644cda0ed2342a7dc6cd9f to your computer and use it in GitHub Desktop.
Download ZIP
Layout Evaluation Template - Product Page for Performance
Raw
index.html
<div class="viewport"><span id="w"></span><span id="h"></span></div>
<div class="row">
<div class="col-8">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/135363/LHCL-PRIM-WSTUFF-web-rez.jpg">
</div>
<div class="col-4">
<div class="col-12">
<p id="characters">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div class="col-6">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/135363/LHCL-PRIM-FRONT.jpg">
</div>
<div class="col-6">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/135363/LHCL-PRIM-SIDE.jpg">
</div>
</div>
</div>
<div class="row">
<div class="col-8">
<h2>Lorem ipsum dolor sit amet</h2>
<p>consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
</div>
<div class="row">
<div class="col-2">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/135363/LHACC-TR.jpg">
</div>
<div class="col-2">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/135363/LHACC-KIT.jpg">
</div>
<div class="col-2">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/135363/LHACC-PET.jpg">
</div>
<div class="col-2">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/135363/LHACC-BED.jpg">
</div>
</div>
<div class="row">
<div class="col-12">
<h1>Introduction to web typography</h1>
<p><i>Web typography</i> refers to the use of fonts on the <em>World Wide Web</em>. When HTML was first created, font faces and styles were controlled exclusively by the settings of each Web browser. There was no mechanism for individual Web pages to control font display until Netscape introduced the <code>&lt;font&gt;</code> tag in 1995, which was then standardized in the HTML 2 specification. However, the font specified by the tag had to be installed on the user's computer or a fallback font, such as a browser's default sans-serif or monospace font, would be used. The first <b>Cascading Style Sheets</b> specification was published in 1996 and provided the same capabilities.</p>
</div>
</div>
Raw
layout-evaluation-template-product-page-for-performance.markdown
Raw
script.js
(function() {
var sizeSpans = [];
function updateSizeSpan(ele, span) {
var w = ele.offsetWidth;
var h = ele.offsetHeight;
span.innerHTML = w + "&times;" + h;
}
function wrapOutline(ele) {
if (ele.classList.contains("outline") ||
ele.classList.contains("size")) {
// To avoid nesting outlines or adding an outline to the size
return;
}
// Size span
var span = document.createElement("span");
span.classList.add("size");
updateSizeSpan(ele, span);
sizeSpans.push(span);
// Outline
var outline = document.createElement("div");
outline.classList.add("outline");
// Wrap the element with the outline div
var parent = ele.parentNode;
parent.replaceChild(outline, ele);
outline.appendChild(ele);
outline.appendChild(span);
// Unwrapping handler
outline.addEventListener("click", function (e) {
var outline = e.target;
while (!outline.classList.contains("outline")) {
// Make sure to deal with the outline div directly
outline = outline.parentNode;
}
var ele = outline.firstChild;
var parent = outline.parentNode;
// Unwrap the element
outline.removeChild(ele);
parent.replaceChild(ele, outline);
// Remove span from sizeSpans;
var span = outline.lastChild;
sizeSpans.splice(sizeSpans.indexOf(span), 1);
// Un-highlight the text
var instance = new Mark(ele);
instance.unmark();
e.stopPropagation();
});
}
function highlight(ele) {
var instance = new Mark(ele);
instance.markRanges([{start: 45, length: 30}], {
element: "span",
className: "highlight"
});
}
var all = document.body.getElementsByTagName("*");
for (var i = 0; i < all.length; i++) {
if (all[i].parentNode !== document.body) {
continue;
}
all[i].addEventListener("click", function(e) {
var ele = e.target;
if (ele.tagName == "DIV" || ele.tagName == "BODY") {
// Avoid dealing with divs or the body tag
return;
}
while (ele.parentNode &&
ele.parentNode.tagName != "DIV" &&
ele.parentNode.tagName != "BODY") {
// Recurse up to avoid dealing with the smaller leaf nodes
ele = ele.parentNode;
}
highlight(ele);
wrapOutline(ele);
});
}
if (typeof(document.documentElement.clientWidth) != 'undefined') {
var $w = document.getElementById('w'),
$h = document.getElementById('h');
$w.innerHTML = document.documentElement.clientWidth;
$h.innerHTML = ' &times; ' + document.documentElement.clientHeight;
window.onresize = function(event) {
// Update the size in the upper-right corner
$w.innerHTML = document.documentElement.clientWidth;
$h.innerHTML = ' &times; ' + document.documentElement.clientHeight;
// Update the size spans
for (var i = 0; i < sizeSpans.length; i++) {
var span = sizeSpans[i];
var ele = span.parentNode.firstChild;
updateSizeSpan(ele, span);
}
};
}
})();
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script>
Raw
style.css
@import url('https://fonts.googleapis.com/css?family=Exo+2:300,300i,600|Vollkorn:700');
body {
font-family: 'Exo 2', sans-serif;
font-weight: 300;
}
i, em {
font-style: italic;
}
b, strong {
font-weight: 600;
}
h1, h2, h3 {
font-family: 'Vollkorn', serif;
font-weight: 700;
}
/* STOP!!!!!!! DO NOT DELETE OR CHANGE ANYTHING BELOW THIS LINE!!!!!!! */
.row {
margin: 14px auto;
width: 100%;
}
.row:after {
clear: both;
content: "";
display: table;
}
[class^="col-"] {
float: left;
width: 100%;
}
[class^="col-"] {
margin-left: 10px;
margin-right: 10px;
}
.col-1 {
width: calc(8.33333333% - 20px);
}
.col-2 {
width: calc(16.66666666% - 20px);
}
.col-3 {
width: calc(25% - 20px);
}
.col-4 {
width: calc(33.33333333% - 20px);
}
.col-5 {
width: calc(41.66666666% - 20px);
}
.col-6 {
width: calc(50% - 20px);
}
.col-7 {
width: calc(58.33333333% - 20px);
}
.col-8 {
width: calc(66.66666666% - 20px);
}
.col-9 {
width: calc(75% - 20px);
}
.col-10 {
width: calc(83.33333333% - 20px);
}
.col-11 {
width: calc(91.66666666% - 20px);
}
.col-12 {
width: calc(100% - 20px);
}
img {
max-width: 100%;
}
.viewport {
background-color: rgba(255, 0, 0, 0.5);
border-bottom-left-radius: 8px;
color: #fff;
font-family: 'Courier New', Courier, monospace;
font-size: 2em;
right: 0;
text-align: center;
top: 0;
padding: 3px 5px 0 5px;
position: fixed;
}
.highlight {
background-color: rgba(255, 255, 0, 0.75);
}
.outline {
outline: 1px solid rgba(194, 240, 177);
padding: 0;
position: relative;
}
.count {
background-color: rgba(194, 240, 177, 0.45);
}
.size {
background-color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment