justmarkup/index.html

## index.html
<!DOCTYPE html>
<html class="no-js">
    <head>
        <title>Responsive Styleguide</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <style>
            html {
                font: 62.5%/1.4 Arial, sans-serif;
                padding: 2em;
                background: #eee;
            }

            ul {margin: 0; padding: 0;}

            li {
                float: left;
                list-style: none;
                margin: 0.4em 0.7em 1em 0;
            }

            p {font-size: 1.2em;}

            button {
                padding: 0.2em 0.6em;
                font-size: 1.2em;
                text-shadow: 0 1px 1px white;
                -webkit-box-shadow: 0 1px 1px #fff;
                -moz-box-shadow:    0 1px 1px #fff;
                box-shadow:         0 1px 1px #fff;
            }

            .current-size {clear: both;}

            .current-size span {font-size: 1.4em;}

            iframe {border: 1px solid #ccc; float: left;}
        </style>
    </head>
    <body>
        <h1>Styleguide</h1>
        <ul class="controls">
            <li><button data-width="0" data-height="0">Random</button></li>
            <li><button data-width="320" data-height="480">320x480</button></li>
            <li><button data-width="480" data-height="320">480x320</button></li>
            <li><button data-width="360" data-height="640">360x640</button></li>
            <li><button data-width="640" data-height="360">640x360</button></li>
            <li><button data-width="768" data-height="1024">768x1024</button></li>
            <li><button data-width="1024" data-height="768">1024x768</button></li>
            <li><button data-width="800" data-height="1280">800x1280</button></li>
            <li><button data-width="1280" data-height="800">1280x800</button></li>
            <li><button data-width="900" data-height="1920">900x1920</button></li>
            <li><button data-width="1920" data-height="900">1920x900</button></li>
        </ul>
        <p class="current-size">Current size: <span class="current-width">320</span> x <span class="current-height">480</span></p>
        <iframe src="styleguide.html" width="320" height="480"></iframe>
        <script src="styleguide.js"></script>
    </body>
</html>

## styleguide.html
<!DOCTYPE html>
<html>
    <head>
        <title>My Styleguide</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <style>
            body {
                padding: 2em;
                background: #fff;
            }
        </style>

    </head>
    <body>
        <h2>#Typo</h2>
        <h1>Headline 1</h1>
        <h2>Headline 2</h2>
        <h3>Headline 3</h3>
        <h4>Headline 4</h4>
        <h5>Headline 5</h5>
        <h6>Headline 6</h6>
    </body>
</html>

## styleguide.js
/*global document*/

(function (doc) {
	"use strict";

	var iframe = doc.querySelector('iframe'),
		current_w = doc.querySelector('.current-width'),
		current_h = doc.querySelector('.current-height'),
		button_w,
		button_h,
		control = doc.querySelectorAll('button'),
		control_w,
		control_h;

	[].forEach.call(control, function (el) {
		el.addEventListener('click', function (ev) {
			control_w = this.dataset.width;
			control_h = this.dataset.height;
			if (control_w === "0") {
				control_w = Math.floor((Math.random() * 2700) + 300);
				control_h = Math.floor((Math.random() * 1600) + 200);
			}
			button_w = control_w;
			button_h = control_h;
			iframe.width = current_w.innerHTML = button_w;
			iframe.height = current_h.innerHTML = button_h;
			ev.preventDefault();
		}, false);
	});

}(document));
	<!DOCTYPE html>
	<html class="no-js">
	<head>
	<title>Responsive Styleguide</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<style>
	html {
	font: 62.5%/1.4 Arial, sans-serif;
	padding: 2em;
	background: #eee;
	}

	ul {margin: 0; padding: 0;}

	li {
	float: left;
	list-style: none;
	margin: 0.4em 0.7em 1em 0;
	}

	p {font-size: 1.2em;}

	button {
	padding: 0.2em 0.6em;
	font-size: 1.2em;
	text-shadow: 0 1px 1px white;
	-webkit-box-shadow: 0 1px 1px #fff;
	-moz-box-shadow: 0 1px 1px #fff;
	box-shadow: 0 1px 1px #fff;
	}

	.current-size {clear: both;}

	.current-size span {font-size: 1.4em;}

	iframe {border: 1px solid #ccc; float: left;}
	</style>
	</head>
	<body>
	<h1>Styleguide</h1>
	<ul class="controls">
	<li><button data-width="0" data-height="0">Random</button></li>
	<li><button data-width="320" data-height="480">320x480</button></li>
	<li><button data-width="480" data-height="320">480x320</button></li>
	<li><button data-width="360" data-height="640">360x640</button></li>
	<li><button data-width="640" data-height="360">640x360</button></li>
	<li><button data-width="768" data-height="1024">768x1024</button></li>
	<li><button data-width="1024" data-height="768">1024x768</button></li>
	<li><button data-width="800" data-height="1280">800x1280</button></li>
	<li><button data-width="1280" data-height="800">1280x800</button></li>
	<li><button data-width="900" data-height="1920">900x1920</button></li>
	<li><button data-width="1920" data-height="900">1920x900</button></li>
	</ul>
	<p class="current-size">Current size: <span class="current-width">320</span> x <span class="current-height">480</span></p>
	<iframe src="styleguide.html" width="320" height="480"></iframe>
	<script src="styleguide.js"></script>
	</body>
	</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>My Styleguide</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<style>
	body {
	padding: 2em;
	background: #fff;
	}
	</style>

	</head>
	<body>
	<h2>#Typo</h2>
	<h1>Headline 1</h1>
	<h2>Headline 2</h2>
	<h3>Headline 3</h3>
	<h4>Headline 4</h4>
	<h5>Headline 5</h5>
	<h6>Headline 6</h6>
	</body>
	</html>
	/global document/

	(function (doc) {
	"use strict";

	var iframe = doc.querySelector('iframe'),
	current_w = doc.querySelector('.current-width'),
	current_h = doc.querySelector('.current-height'),
	button_w,
	button_h,
	control = doc.querySelectorAll('button'),
	control_w,
	control_h;

	[].forEach.call(control, function (el) {
	el.addEventListener('click', function (ev) {
	control_w = this.dataset.width;
	control_h = this.dataset.height;
	if (control_w === "0") {
	control_w = Math.floor((Math.random() * 2700) + 300);
	control_h = Math.floor((Math.random() * 1600) + 200);
	}
	button_w = control_w;
	button_h = control_h;
	iframe.width = current_w.innerHTML = button_w;
	iframe.height = current_h.innerHTML = button_h;
	ev.preventDefault();
	}, false);
	});

	}(document));