diff --git a/.gitignore b/.gitignore index 34332fd..0a2cdd2 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ .DS_Store -assets/.sass-cache \ No newline at end of file +assets/.sass-cache +/node_modules/ diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..94559f5 --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,25 @@ +module.exports = function(grunt) { + + // Project configuration. + grunt.initConfig({ + pkg: grunt.file.readJSON('package.json'), + uglify: { + options: { + mangle: true + }, + bookmarklet: { + files: { + 'assets/js/bookmarklet.min.js': ['assets/js/bookmarklet.js'], + 'assets/js/app.min.js': ['assets/js/app.js'] + } + } + } + }); + + // Load the plugin that provides the "uglify" task. + grunt.loadNpmTasks('grunt-contrib-uglify'); + + // Default task(s). + grunt.registerTask('default', ['uglify']); + +}; diff --git a/assets/css/web.css b/assets/css/web.css index 302a890..2b6196d 100644 --- a/assets/css/web.css +++ b/assets/css/web.css @@ -1 +1 @@ -/* normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css */article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:hover,a:active{outline:0}h1{font-size:2em;margin:0.67em 0}h2{font-size:1.5em;margin:0.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:0.83em;margin:1.67em 0}h6{font-size:0.75em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}p,pre{margin:1em 0}pre,code,kbd,samp{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:75%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}body,html{height:100%;overflow:hidden}body{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d;font-family:"Gill Sans", "Gill Sans MT", Calibri, sans-serif;color:#fff;color:rgba(255,255,255,0.65);-webkit-font-smoothing:antialiased;text-shadow:0 1px 1px rgba(0,0,0,0.3);background-color:#619ec2}img{max-width:100%;max-height:80%}h1,h2,h3,h4,h5,h6{font-weight:normal;color:#fff}a{color:#fff;text-decoration:none}p{color:rgba(255,255,255,0.8)}body>header{position:fixed;top:0;left:0;right:0;text-align:right;padding:0 2em;line-height:60px;height:60px;font-size:.9em}body>header i{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;font-family:Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;margin:21px 0 0 6px;font-size:.8em;font-weight:600;text-align:center;float:right;display:block;background:rgba(255,255,255,0.9);line-height:18px;width:18px;height:18px;color:rgba(0,0,0,0.75)}section{display:table;width:100%;height:100%;text-align:center;table-layout:fixed}section article{display:table-cell;width:100%;height:100%;padding:0 1em;vertical-align:middle}section article hgroup{margin:0 0 3em}section article hgroup h3,section article hgroup h1{margin:0}section article hgroup h1{margin-bottom:.24em}section+section{background:#FFF}footer{font-size:.8em;z-index:20;position:absolute;left:0;right:0;bottom:10px;padding:0 2em;font-weight:normal;z-index:20;text-align:center}footer iframe{position:absolute;bottom:24px;left:50%;margin-left:-50px;width:100px!important}#bookmarklet{-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px;font-size:1.25em;position:relative;cursor:move;color:#fff;text-decoration:none;background:rgba(0,0,0,0.25);padding:10px 20px 8px;margin:0 0 10px 0;display:inline-block}#bookmarklet ~ span{display:inline-block;margin:0 0 0 10px;font-size:.8em}#help{-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px;background:rgba(255,255,255,0.95);width:400px;position:fixed;top:50%;left:50%;margin-left:-200px;margin-top:-160px;z-index:40;display:none;color:rgba(0,0,0,0.75);text-shadow:0 1px 0 white}#help.active{display:block}#help h4,#help p{color:rgba(0,0,0,0.75)}#help a{color:rgba(0,0,0,0.25)}#help header{padding:1em 1.5em;border-bottom:1px solid rgba(0,0,0,0.1)}#help header h4{margin:0}#help header a{float:right;color:rgba(0,0,0,0.35);font-size:1.25em}#help article{padding:0 1.5em}#help article p,#help article li{font-size:.9em}#help ul{padding:0}#help li{margin:0 0 1em}#help li img{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);box-shadow:0 1px 3px rgba(0,0,0,0.4);float:left;margin-right:10px}#help li p{margin:0;overflow:hidden;display:block}#help li span{padding-top:4px;display:block;font-size:.9em;color:rgba(0,0,0,0.5)}.dim.active{position:fixed;top:0;right:0;left:0;bottom:0;background:rgba(0,0,0,0.3);z-index:30}@media screen and (max-width: 640px){body{font-size:14px}#help{width:300px;margin-left:-150px}} +html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}html{line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}q,blockquote{quotes:none}q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}a img{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}body{background-image:-webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%),-webkit-linear-gradient(top, rgba(240,240,240,0.97),rgba(240,240,240,0.98));background-image:-moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%),-moz-linear-gradient(top, rgba(240,240,240,0.97),rgba(240,240,240,0.98));background-image:-o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%),-o-linear-gradient(top, rgba(240,240,240,0.97),rgba(240,240,240,0.98));background-image:radial-gradient(center, ellipse cover, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%),linear-gradient(to bottom, rgba(240,240,240,0.97),rgba(240,240,240,0.98));font:bold 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;height:100%;background-color:rgba(219,219,219,0.98);background-repeat:repeat}#bookmarklet{background-image:-webkit-linear-gradient(#e3e3e3,#e0e0e0);background-image:-moz-linear-gradient(#e3e3e3,#e0e0e0);background-image:-o-linear-gradient(#e3e3e3,#e0e0e0);background-image:linear-gradient(#e3e3e3,#e0e0e0);-webkit-box-shadow:inset 0 1px 0 #e9e9e9;-moz-box-shadow:inset 0 1px 0 #e9e9e9;box-shadow:inset 0 1px 0 #e9e9e9;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;position:absolute;top:50%;left:50%;margin-top:-12px;margin-left:-87px;border:1px solid #b4b4b4;border-bottom-color:#bababa;cursor:move;padding:4px 10px 6px 26px;color:#333;text-decoration:none;position:relative;text-shadow:0 1px 0 white}#bookmarklet:before{content:"";width:12px;height:8px;position:absolute;top:8px;left:8px;background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAICAMAAAD6Ou7DAAAANlBMVEUAAADh4eHd3t7g4OCurq7g4eHg4eHW1ta0tLSampqYmJi9vb3W19fX2NimpqakpaW1tra1tbVqAbBBAAAAEnRSTlMAM0VVZHR1d4WJjJmipLe60tX6WMlmAAAALklEQVQIW2PkZvvPAAGMvxgZGRlg4D+CCZLjYIcr+8nIzAzn/EVVxoJsGjsSBwAXbAsrDKogAwAAAABJRU5ErkJggg==')}#bookmarklet::after{pointer-events:none;content:"Drag me into your bookmarks bar";position:absolute;top:-69px;right:-157px;width:227px;height:69px;background:url('data:image/png;base64,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');display:block;text-indent:-9999px;opacity:.8}footer{position:fixed;left:0;right:0;bottom:10px;text-align:center;font-weight:normal;color:#AAA;text-shadow:0 1px 0 white}footer a{color:#7D91A9;text-decoration:none}footer a:hover{color:#9cabbd}footer iframe{position:absolute;bottom:20px;left:50%;margin-left:-50px;width:100px !important} diff --git a/assets/js/app.js b/assets/js/app.js index fdddbf9..151db12 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -1,27 +1,31 @@ -window.resbook = {}; -(function (rb) { - var d = document, - w = window, - url = d.URL, - title = d.title, - wrapper = null, - devices = null, - close = null, - keyboard = null, - refreshBtn = null, - reloadBtn = null, - body = null, - size = null, - auto = true, - isResized = false, - isAnimated = false, - sizes = { - smartphonePortrait: [320, 480], - smartphoneLandscape: [480, 320], - tabletPortrait: [1024, 768], - tabletLandscape: [768, 1024], - auto: 'auto' - }, refreshCss = function (disable) { +window.rwd = {}; + +(function (rwd) { + + var d = document; + var w = window; + var url = d.URL; + var title = d.title; + var wrapper = null; + var devices = null; + var close = null; + var keyboard = null; + var refreshBtn = null; + var reloadBtn = null; + var body = null; + var size = null; + var auto = true; + var isResized = false; + var isAnimated = false; + var sizes = { + smartphonePortrait: [320, 480], + smartphoneLandscape: [480, 320], + tabletPortrait: [1024, 768], + tabletLandscape: [768, 1024], + auto: 'auto' + }; + + var refreshCss = function (disable) { var ifrm = d.querySelector('#wrapper iframe'); ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument; var b = ifrm.document.querySelector('body'); @@ -29,64 +33,79 @@ window.resbook = {}; var el = ifrm.document.getElementById('cssrefresh'); if (el) { el.parentNode.removeChild(el); - b.classList.remove('cssrefresh') + b.classList.remove('cssrefresh'); } } else { var t = ifrm.document.createTextNode("(function(){var script=document.createElement('script');script.setAttribute('src','http://responsive.victorcoulon.fr/assets/js/cssrefresh.js');script.setAttribute('id','cssrefresh');var head=document.getElementsByTagName('head');head[0].appendChild(script)})()"), - s = ifrm.document.createElement("script"); + s = ifrm.document.createElement('script'); b.classList.add('cssrefresh'); s.appendChild(t); - ifrm.document.body.appendChild(s) - } - }, reloadIframe = function(){ - var ifrm = d.querySelector('#wrapper iframe'); - ifrm.src += ''; - }, resize = function (w, h, f) { - w = w || wrapper.clientWidth; - h = h || wrapper.clientHeight; - size.innerHTML = w + 'x' + h - }, setPosition = function (wh, t, cl) { - var width = (wh == 'auto') ? w.innerWidth : wh[0], - height = (wh == 'auto') ? w.innerHeight : wh[1], - style = 'width:' + width + 'px;height:' + height + 'px;margin-top:20px;'; - if (typeof (width) == 'undefined' || typeof (height) == 'undefined') return false; - style += (wh === 'auto') ? 'margin-top:0;' : ''; - wrapper.setAttribute('style', style); - wrapper.setAttribute('data-device', cl); - body.setAttribute('style', 'min-height:' + height + 'px;min-width:' + width + 'px;'); - resize(width, height); - if (wh === 'auto' && !t) { - isResized = false; - setTimeout(function () { - wrapper.setAttribute('style', ''); - body.setAttribute('style', ''); - isAnimated = false - }, 260) - } else { - isAnimated = false + ifrm.document.body.appendChild(s); } - }, readyElement = function (id, callback) { - var interval = setInterval(function () { - if (d.getElementById(id)) { - callback(d.getElementById(id)); - clearInterval(interval) - } - }, 60) }; - rb.changeUrl = function (u, t) { + + var reloadIframe = function(){ + var ifrm = d.querySelector('#wrapper iframe'); + ifrm.src += ''; + }; + + var resize = function (w, h) { + w = w || wrapper.clientWidth; + h = h || wrapper.clientHeight; + size.innerHTML = w + 'x' + h; + }; + + var setPosition = function (wh, t, cl) { + var width = (wh === 'auto') ? w.innerWidth : wh[0]; + var height = (wh === 'auto') ? w.innerHeight : wh[1]; + var style = 'width:' + width + 'px;height:' + height + 'px;margin-top:20px;'; + + if (typeof (width) === 'undefined' || typeof (height) === 'undefined'){ + return false; + } + + style += (wh === 'auto') ? 'margin-top:0;' : ''; + wrapper.setAttribute('style', style); + wrapper.setAttribute('data-device', cl); + body.setAttribute('style', 'min-height:' + height + 'px;min-width:' + width + 'px;'); + resize(width, height); + if (wh === 'auto' && !t) { + isResized = false; + setTimeout(function () { + wrapper.setAttribute('style', ''); + body.setAttribute('style', ''); + isAnimated = false; + }, 260); + } else { + isAnimated = false; + } + }; + + var readyElement = function (id, callback) { + var interval = setInterval(function () { + if (d.getElementById(id)) { + callback(d.getElementById(id)); + clearInterval(interval); + } + }, 60); + }; + + rwd.changeUrl = function (u, t) { d.title = t + ' - Responsive test'; if (history.pushState) { try { - history.pushState({}, "New Page", u) + history.pushState({}, 'New Page', u); } catch (e) {} } if (refreshBtn.classList.contains('active')) { - refreshCss() + refreshCss(); } else { - refreshCss(true) + refreshCss(true); } }; + readyElement('wrapper', function () { + wrapper = d.getElementById('wrapper'); devices = d.getElementById('devices'); size = d.getElementById('size'); @@ -95,70 +114,94 @@ window.resbook = {}; refreshBtn = d.querySelector('.cssrefresh a'); reloadBtn = d.querySelector('.reloadiframe a'); body = d.querySelector('body'); - if (window.chrome || (window.getComputedStyle && !window.globalStorage && !window.opera)) {} + + if (w.chrome || (w.getComputedStyle && !w.globalStorage && !w.opera)) { + + } + if (w.location.protocol !== 'http:') { - refreshBtn.setAttribute('style', 'display:none') + refreshBtn.setAttribute('style', 'display:none'); } else { - reloadBtn.setAttribute('style', 'display:none') - }[].forEach.call(document.querySelectorAll('#devices a'), function (el) { + reloadBtn.setAttribute('style', 'display:none'); + } + + [].forEach.call(d.querySelectorAll('#devices a'), function (el) { + el.addEventListener('click', function (e) { - [].forEach.call(document.querySelectorAll('#devices a'), function (el) { - el.classList.remove('active') + + [].forEach.call(d.querySelectorAll('#devices a'), function (el) { + el.classList.remove('active'); }); + e.preventDefault(); e.stopPropagation(); + var self = this; - if ((self.classList.contains('auto') && isResized === false) || isAnimated === true) return false; + + if ((self.classList.contains('auto') && isResized === false) || isAnimated === true) { + return false; + } + isAnimated = true; + if (isResized === false) { isResized = true; - setPosition(sizes.auto, true) + setPosition(sizes.auto, true); } + setTimeout(function () { self.classList.add('active'); if (self.classList.contains('smartphone-portrait')) { - setPosition(sizes.smartphonePortrait, false, 'smartphonePortrait') + setPosition(sizes.smartphonePortrait, false, 'smartphonePortrait'); } else if (self.classList.contains('smartphone-landscape')) { - setPosition(sizes.smartphoneLandscape, false, 'smartphoneLandscape') + setPosition(sizes.smartphoneLandscape, false, 'smartphoneLandscape'); } else if (self.classList.contains('tablet-portrait')) { - setPosition(sizes.tabletPortrait, false, 'tabletPortrait') + setPosition(sizes.tabletPortrait, false, 'tabletPortrait'); } else if (self.classList.contains('tablet-landscape')) { - setPosition(sizes.tabletLandscape, false, 'tabletLandscape') + setPosition(sizes.tabletLandscape, false, 'tabletLandscape'); } else if (self.classList.contains('auto')) { - setPosition(sizes.auto, false, 'auto') + setPosition(sizes.auto, false, 'auto'); } - }, 10) - }) + }, 10); + + }); + }); + close.addEventListener('click', function (e) { e.preventDefault(); e.stopPropagation(); - w.location = d.URL + w.location = d.URL; }, false); + keyboard.addEventListener('click', function (e) { e.preventDefault(); e.stopPropagation(); keyboard.classList.toggle('active'); - wrapper.classList.toggle('keyboard') + wrapper.classList.toggle('keyboard'); }, false); + refreshBtn.addEventListener('click', function (e) { e.preventDefault(); e.stopPropagation(); refreshBtn.classList.toggle('active'); if (refreshBtn.classList.contains('active')) { - refreshCss() + refreshCss(); } else { - refreshCss(true) + refreshCss(true); } }, false); + reloadBtn.addEventListener('click', function (e) { e.preventDefault(); e.stopPropagation(); reloadIframe(); }, false); + w.addEventListener('resize', function () { - resize() + resize(); }, false); + w.addEventListener('keyup', function (e) { var key = e.keyCode ? e.keyCode : e.charCode, keys = { @@ -170,23 +213,30 @@ window.resbook = {}; 116: 'reloadIframe', 82: 'reloadIframe' }; - if (typeof (keys[key]) == 'undefined'){ + + if (typeof (keys[key]) === 'undefined'){ return false; - } else if (e.metaKey && keys[key] == 'reloadIframe'){ + } + else if (e.metaKey && keys[key] === 'reloadIframe'){ e.preventDefault(); e.stopPropagation(); reloadIframe(); - return false - } else if (keys[key] == 'reloadIframe') { + return false; + } + else if (keys[key] === 'reloadIframe') { e.preventDefault(); e.stopPropagation(); reloadIframe(); - return false - } else { - setPosition(sizes[keys[key]], false, keys[key]) + return false; + } + else { + setPosition(sizes[keys[key]], false, keys[key]); } }, false); + resize(); size.style.minWidth = 0; - }) -})(resbook); + + }); + +})(rwd); diff --git a/assets/js/bookmarklet.js b/assets/js/bookmarklet.js index 36f40db..93a7e86 100644 --- a/assets/js/bookmarklet.js +++ b/assets/js/bookmarklet.js @@ -1,54 +1,54 @@ -((function () { +void( function () { var d = document; d.write( '<!DOCTYPE html>' + '<html>' + '<head>' + - '<meta charset="UTF-8">' + + '<meta charset='UTF-8'>' + '<title>'+d.title+' - Responsive test </title>' + - '<link rel="stylesheet" href="https://raw.github.com/christiannaths/responsive-bookmarklet/master/assets/css/app.css">' + - '<script src="https://raw.github.com/christiannaths/responsive-bookmarklet/master/assets/js/app.js"></script>' + + '<link rel='stylesheet' href='http://responsive.victorcoulon.fr/assets/css/app.css'>' + + '<script src='http://responsive.victorcoulon.fr/assets/js/app.min.js'></script>' + '</head>' + '<body>' + '<header>' + - '<div class="close">' + - '<a href="#">×</a>' + + '<div class='close'>' + + '<a href='#'>×</a>' + '</div>' + - '<div id="size"></div>' + - '<div class="keyboard">' + - '<a href="#">I</a>' + + '<div id='size'></div>' + + '<div class='keyboard'>' + + '<a href='#'>I</a>' + '</div>' + - '<div class="cssrefresh">' + - '<a href="#">I</a>' + + '<div class='cssrefresh'>' + + '<a href='#'>I</a>' + '</div>' + - '<div class="reloadiframe">' + - '<a href="#">I</a>' + + '<div class='reloadiframe'>' + + '<a href='#'>I</a>' + '</div>' + - '<div id="devices">' + - '<a href="#" class="tablet-portrait">' + + '<div id='devices'>' + + '<a href='#' class='tablet-portrait'>' + '<span>Tablet Portrait</span>' + '</a>' + - '<a href="#" class="tablet-landscape">' + + '<a href='#' class='tablet-landscape'>' + '<span>Tablet Landscape</span>' + '</a>' + - '<a href="#" class="smartphone-landscape">' + + '<a href='#' class='smartphone-landscape'>' + '<span>iPhone Landscape</span>' + '</a>' + - '<a href="#" class="smartphone-portrait">' + + '<a href='#' class='smartphone-portrait'>' + '<span>iPhone Portrait</span>' + '</a>' + - '<a href="#" class="auto active">' + + '<a href='#' class='auto active'>' + '<span>Auto</span>' + '</a>' + '</div>' + '</header>' + '<section>' + - '<div id="wrapper">' + - '<iframe src="'+d.URL+'" onLoad="resbook.changeUrl(this.contentWindow.location,this.contentDocument.title);"></iframe>' + - '<span class="keyboard-bg"></span>' + + '<div id='wrapper'>' + + '<iframe src=''+d.URL+'' onLoad='resbook.changeUrl(this.contentWindow.location,this.contentDocument.title);'></iframe>' + + '<span class='keyboard-bg'></span>' + '</div>' + '</section>' + '</body>' + '</html>' ); -})()); +}()); diff --git a/assets/sass/web.scss b/assets/sass/web.scss index 92aa26b..02029c9 100644 --- a/assets/sass/web.scss +++ b/assets/sass/web.scss @@ -1,703 +1,73 @@ -@import "compass/css3"; - -/*! normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css */ - -/* ============================================================================= - HTML5 display definitions - ========================================================================== */ - -/* - * Corrects block display not defined in IE6/7/8/9 & FF3 - */ - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -nav, -section, -summary { - display: block; -} - -/* - * Corrects inline-block display not defined in IE6/7/8/9 & FF3 - */ - -audio, -canvas, -video { - display: inline-block; - *display: inline; - *zoom: 1; -} - -/* - * Prevents modern browsers from displaying 'audio' without controls - * Remove excess height in iOS5 devices - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/* - * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4 - * Known issue: no IE6 support - */ - -[hidden] { - display: none; -} - - -/* ============================================================================= - Base - ========================================================================== */ - -/* - * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units - * http://clagnut.com/blog/348/#c790 - * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom - * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ - */ - -html { - font-size: 100%; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ - -ms-text-size-adjust: 100%; /* 2 */ -} - -/* - * Addresses font-family inconsistency between 'textarea' and other form elements. - */ - -html, -button, -input, -select, -textarea { - font-family: sans-serif; -} - -/* - * Addresses margins handled incorrectly in IE6/7 - */ - -body { - margin: 0; -} - - -/* ============================================================================= - Links - ========================================================================== */ - -/* - * Addresses outline displayed oddly in Chrome - */ - -a:focus { - outline: thin dotted; -} - -/* - * Improves readability when focused and also mouse hovered in all browsers - * people.opera.com/patrickl/experiments/keyboard/test - */ - -a:hover, -a:active { - outline: 0; -} - - -/* ============================================================================= - Typography - ========================================================================== */ - -/* - * Addresses font sizes and margins set differently in IE6/7 - * Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5 - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -h2 { - font-size: 1.5em; - margin: 0.83em 0; -} - -h3 { - font-size: 1.17em; - margin: 1em 0; -} - -h4 { - font-size: 1em; - margin: 1.33em 0; -} - -h5 { - font-size: 0.83em; - margin: 1.67em 0; -} - -h6 { - font-size: 0.75em; - margin: 2.33em 0; -} - -/* - * Addresses styling not present in IE7/8/9, S5, Chrome - */ - -abbr[title] { - border-bottom: 1px dotted; -} - -/* - * Addresses style set to 'bolder' in FF3+, S4/5, Chrome -*/ - -b, -strong { - font-weight: bold; -} - -blockquote { - margin: 1em 40px; -} - -/* - * Addresses styling not present in S5, Chrome - */ - -dfn { - font-style: italic; -} - -/* - * Addresses styling not present in IE6/7/8/9 - */ - -mark { - background: #ff0; - color: #000; -} - -/* - * Addresses margins set differently in IE6/7 - */ - -p, -pre { - margin: 1em 0; -} - -/* - * Corrects font family set oddly in IE6, S4/5, Chrome - * en.wikipedia.org/wiki/User:Davidgothberg/Test59 - */ - -pre, -code, -kbd, -samp { - font-family: monospace, serif; - _font-family: 'courier new', monospace; - font-size: 1em; -} - -/* - * Improves readability of pre-formatted text in all browsers - */ - -pre { - white-space: pre; - white-space: pre-wrap; - word-wrap: break-word; -} - -/* - * 1. Addresses CSS quotes not supported in IE6/7 - * 2. Addresses quote property not supported in S4 - */ - -/* 1 */ - -q { - quotes: none; -} - -/* 2 */ - -q:before, -q:after { - content: ''; - content: none; -} - -small { - font-size: 75%; -} - -/* - * Prevents sub and sup affecting line-height in all browsers - * gist.github.com/413930 - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sup { - top: -0.5em; -} - -sub { - bottom: -0.25em; -} - - -/* ============================================================================= - Lists - ========================================================================== */ - -/* - * Addresses margins set differently in IE6/7 - */ - -dl, -menu, -ol, -ul { - margin: 1em 0; -} - -dd { - margin: 0 0 0 40px; -} - -/* - * Addresses paddings set differently in IE6/7 - */ - -menu, -ol, -ul { - padding: 0 0 0 40px; -} - -/* - * Corrects list images handled incorrectly in IE7 - */ - -nav ul, -nav ol { - list-style: none; - list-style-image: none; -} - - -/* ============================================================================= - Embedded content - ========================================================================== */ - -/* - * 1. Removes border when inside 'a' element in IE6/7/8/9, FF3 - * 2. Improves image quality when scaled in IE7 - * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ - */ - -img { - border: 0; /* 1 */ - -ms-interpolation-mode: bicubic; /* 2 */ -} - -/* - * Corrects overflow displayed oddly in IE9 - */ - -svg:not(:root) { - overflow: hidden; -} - - -/* ============================================================================= - Figures - ========================================================================== */ - -/* - * Addresses margin not present in IE6/7/8/9, S5, O11 - */ - -figure { - margin: 0; -} - - -/* ============================================================================= - Forms - ========================================================================== */ - -/* - * Corrects margin displayed oddly in IE6/7 - */ - -form { - margin: 0; -} - -/* - * Define consistent border, margin, and padding - */ - -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -/* - * 1. Corrects color not being inherited in IE6/7/8/9 - * 2. Corrects text not wrapping in FF3 - * 3. Corrects alignment displayed oddly in IE6/7 - */ - -legend { - border: 0; /* 1 */ - padding: 0; - white-space: normal; /* 2 */ - *margin-left: -7px; /* 3 */ -} - -/* - * 1. Corrects font size not being inherited in all browsers - * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome - * 3. Improves appearance and consistency in all browsers - */ - -button, -input, -select, -textarea { - font-size: 100%; /* 1 */ - margin: 0; /* 2 */ - vertical-align: baseline; /* 3 */ - *vertical-align: middle; /* 3 */ -} - -/* - * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet - */ - -button, -input { - line-height: normal; /* 1 */ -} - -/* - * 1. Improves usability and consistency of cursor style between image-type 'input' and others - * 2. Corrects inability to style clickable 'input' types in iOS - * 3. Removes inner spacing in IE7 without affecting normal text inputs - * Known issue: inner spacing remains in IE6 - */ - -button, -input[type="button"], -input[type="reset"], -input[type="submit"] { - cursor: pointer; /* 1 */ - -webkit-appearance: button; /* 2 */ - *overflow: visible; /* 3 */ -} - -/* - * Re-set default cursor for disabled elements - */ - -button[disabled], -input[disabled] { - cursor: default; -} - -/* - * 1. Addresses box sizing set to content-box in IE8/9 - * 2. Removes excess padding in IE8/9 - * 3. Removes excess padding in IE7 - Known issue: excess padding remains in IE6 - */ - -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ - *height: 13px; /* 3 */ - *width: 13px; /* 3 */ -} - -/* - * 1. Addresses appearance set to searchfield in S5, Chrome - * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof) - */ - -input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; /* 2 */ - box-sizing: content-box; -} - -/* - * Removes inner padding and search cancel button in S5, Chrome on OS X - */ - -input[type="search"]::-webkit-search-decoration, -input[type="search"]::-webkit-search-cancel-button { - -webkit-appearance: none; -} - -/* - * Removes inner padding and border in FF3+ - * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ - */ - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -/* - * 1. Removes default vertical scrollbar in IE6/7/8/9 - * 2. Improves readability and alignment in all browsers - */ - -textarea { - overflow: auto; /* 1 */ - vertical-align: top; /* 2 */ -} - - -/* ============================================================================= - Tables - ========================================================================== */ - -/* - * Remove most spacing between table cells - */ - -table { - border-collapse: collapse; - border-spacing: 0; -} - -/** - * End Normalize.css - */ - - -body,html{height:100%;overflow:hidden;} - +@import "compass/reset","compass/css3"; body{ - @include transform-style(preserve-3d); - font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif; - color:#fff; - color:rgba(#fff,.65); - -webkit-font-smoothing: antialiased; - text-shadow:0 1px 1px rgba(0, 0, 0, .3); - - background-color: #619ec2; + @include background-image(radial-gradient(center, ellipse cover, rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 100%), linear-gradient(top, rgba(240,240,240,0.97), rgba(240,240,240,0.98))); + font:bold 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; + height:100%; + background-color: rgba(#dbdbdb,0.98); + background-repeat: repeat; } -img{ - max-width:100%; - max-height:80%; -} -h1,h2,h3,h4,h5,h6{ - font-weight:normal; - color:#fff; -} +#bookmarklet { + @include background-image(linear-gradient(#e3e3e3,#e0e0e0)); + @include box-shadow(inset 0 1px 0 #e9e9e9); + @include border-radius(4px); -a{ - color:#fff; + position: absolute; + top:50%; + left:50%; + margin-top:-12px; + margin-left:-87px; + border: 1px solid #b4b4b4; + border-bottom-color:#bababa; + cursor:move; + padding:4px 10px 6px 26px; + color:#333; text-decoration:none; -} - -p{ - color:rgba(#fff,.8); -} - -body>header{ - position:fixed; - top:0; - left:0; - right:0; - text-align:right; - padding:0 2em; - line-height:60px; - height:60px; - font-size:.9em; - i{ - @include border-radius(50%); - font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif; - margin:21px 0 0 6px; - font-size:.8em; - font-weight:600; - text-align:center; - float:right; + position:relative; + text-shadow:0 1px 0 white; + &:before{ + content:""; + width:12px; + height:8px; + position:absolute; + top:8px; + left:8px; + background:inline-image('drag.png'); + } + &::after{ + pointer-events:none; + content:"Drag me into your bookmarks bar"; + position:absolute; + top:-(image-height('dragme.png')); + right:-(image-width('dragme.png') - 70); + width:image-width('dragme.png'); + height:image-height('dragme.png'); + background:inline-image('dragme.png'); display:block; - background:rgba(#fff,.9); - line-height:18px; - width:18px; - height:18px; - color:rgba(black,.75); + text-indent:-9999px; + opacity:.8; } } -section{ - display:table; - width:100%; - height:100%; - text-align:center; - table-layout:fixed; - article{ - display:table-cell; - width:100%; - height:100%; - padding:0 1em; - vertical-align:middle; - hgroup{ - h3,h1{margin:0;} - h1{margin-bottom:.24em;} - margin:0 0 3em; - } - } - &+section{ - background:#FFF; - } -} footer{ - font-size:.8em; - z-index:20; - position:absolute; + position:fixed; left:0;right:0; bottom:10px; - padding:0 2em; - font-weight:normal; - z-index:20; text-align:center; + font-weight:normal; + color:#AAA; + text-shadow:0 1px 0 white; + a{color:#7D91A9;text-decoration:none;} + a:hover{color:adjust-lightness(#7D91A9, 10);} iframe{ position:absolute; - bottom: 24px; - left: 50%; - margin-left: -50px; - width: 100px!important; + bottom:20px; + left:50%;margin-left:-50px; + width:100px!important; } } - - -#bookmarklet{ - @include border-radius(4px); - font-size:1.25em; - position:relative; - cursor: move; - color:#fff; - text-decoration:none; - background:rgba(black,.25); - padding: 10px 20px 8px; - margin: 0 0 10px 0; - display:inline-block; - &~span{ - display:inline-block; - margin:0 0 0 10px; - font-size:.8em; - } -} - -#help{ - @include border-radius(4px); - background:rgba(#fff,.95); - width:400px; - position:fixed; - top:50%;left:50%; - margin-left:-200px; - margin-top:-160px; - z-index:40; - display:none; - color:rgba(#000,.75); - text-shadow:0 1px 0 white; - &.active{ - display:block; - } - h4,p{color:rgba(#000,.75);} - a{ - color:rgba(#000,.25); - } - - header{ - h4{margin:0;} - padding:1em 1.5em; - border-bottom:1px solid rgba(#000,.1); - a{float:right;color:rgba(#000,.35);font-size:1.25em;} - } - article{ - p,li{font-size:.9em;} - padding:0 1.5em; - } - ul{ - padding:0; - } - li{ - margin:0 0 1em; - img{ - @include border-radius(5px); - @include box-shadow(0 1px 3px rgba(#000,.4)); - float:left; - margin-right:10px; - } - p{margin:0;overflow:hidden;display:block;} - span{ - padding-top:4px; - display:block; - font-size:.9em; - color:rgba(#000,.5); - } - } -} - -.dim{ - &.active{ - position:fixed; - top:0;right:0;left:0;bottom:0; - background:rgba(#000,.3); - z-index:30; - } -} - - -@media screen and (max-width: 640px) { - body{font-size:14px;} - #help{ - width:300px; - margin-left:-150px; - } -} diff --git a/index.html b/index.html index f5a591d..f3eb8aa 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@ - Responsive Design Bookmarklet + Responsive Design Bookmarklet Test @@ -19,79 +19,12 @@ + Responsive Design Test -
-
- × -

How it works

-
-
-

There are some options when you run the bookmarklet. Here is some explanations.

- -
-
- - - -
- How it works i -
- -
-
-
-

Responsive Design Bookmarklet

-

a handy tool for responsive design testing

-
- RWD Bookmarklet
- Drag the link above into your bookmarks bar -
-
- - diff --git a/package.json b/package.json new file mode 100644 index 0000000..953ed2b --- /dev/null +++ b/package.json @@ -0,0 +1,27 @@ +{ + "name": "responsive-bookmarklet", + "version": "1.0.0", + "description": "a simple and powerful bookmarklet for testing responsive design http://responsive.victorcoulon.fr/", + "main": "index.html", + "repository": { + "type": "git", + "url": "git://github.com/Victa/responsive-bookmarklet.git" + }, + "keywords": [ + "rwd", + "responsive", + "bookmarklet", + "design" + ], + "author": "Victor Coulon", + "license": "MIT", + "readmeFilename": "readme.md", + "gitHead": "22a75b7cdc97c2f6fc8f56f4df0f1a787ce46542", + "bugs": { + "url": "https://github.com/Victa/responsive-bookmarklet/issues" + }, + "devDependencies": { + "grunt": "~0.4.2", + "grunt-contrib-uglify": "~0.2.7" + } +} diff --git a/readme.markdown b/readme.md similarity index 100% rename from readme.markdown rename to readme.md