Created
October 31, 2012 16:01
-
-
Save justmarkup/3987891 to your computer and use it in GitHub Desktop.
Responsive Styleguide
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*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)); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment