9 lines
40 KiB
HTML
9 lines
40 KiB
HTML
<!DOCTYPE html><html><head><title>images | Ribs
|
|
</title><meta charset="utf-8"><style>*{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;border:0}body{padding:60px 0 40px;background-color:hsl(207,10%,90%);color:hsl(207,5%,30%)}.container{max-width:1300px;margin:0 auto;padding:0 20px}.section{position:relative;margin-bottom:20px}.docs{position:relative;z-index:2;width:68%;min-height:200px;background-color:hsl(207,0%,100%);background-clip:padding-box;border:1px solid hsla(207,5%,5%,.1);border-radius:5px;box-shadow:0 0 3px hsla(207,5%,5%,.1)}.code{position:absolute;top:5px;bottom:5px;right:0;z-index:1;width:33%;padding:10px 10px 10px 20px;border-radius:0 5px 5px 0;border:1px solid hsla(207,20%,10%,.1);background-color:hsla(207,20%,95%,.9);background-clip:padding-box;opacity:.5;-webkit-transition:opacity .4s;-moz-transition:opacity .4s;-o-transition:opacity .4s;transition:opacity .4s}.code:hover{opacity:1}.preview{background:hsl(207,0%,100%);border-top:1px solid hsl(207,30%,95%);position:relative;z-index:1}.preview-code+.preview{margin-top:0;border-top:0}.preview iframe{display:block;width:100%;height:100%;overflow:hidden}.preview-code{position:relative;z-index:2;display:block;width:100%;color:hsl(207,9%,37%);max-height:200px;padding:10px 20px;overflow-y:auto;background:hsl(207,30%,95%);border:1px solid hsl(207,30%,85%);border-left:0;border-right;box-shadow:inset 0 1px 2px hsla(207,30%,10%,.1);line-height:1.1!important;resize:none}.preview-code:focus{outline:0;background:hsl(207,30%,97%);box-shadow:inset 0 1px 2px hsla(207,30%,10%,.1),0 0 5px hsla(207,75%,75%,.9)}.preview-code:last-child{border-bottom:0;border-radius:0 0 5px 5px}.resizeable{padding:15px;overflow:auto;background:hsl(207,0%,100%);box-shadow:0 0 2px hsla(207,10%,20%,.2);resize:both}.preview-code,pre{white-space:pre-wrap;word-wrap:break-word;overflow-y:auto}.code pre{height:100%;margin-top:0}.bar{position:fixed;left:0;right:0;z-index:1010;min-height:40px;line-height:40px;background-image:-webkit-linear-gradient(hsla(207,10%,35%,.97),hsla(207,5%,25%,.92));background-image:-moz-linear-gradient(hsla(207,10%,35%,.97),hsla(207,5%,25%,.92));background-image:-o-linear-gradient(hsla(207,10%,35%,.97),hsla(207,5%,25%,.92));background-image:linear-gradient(hsla(207,10%,35%,.97),hsla(207,5%,25%,.92))}.bar.top{top:0;box-shadow:0 1px 2px hsla(207,5%,0%,.2)}.bar.bottom{bottom:0;box-shadow:0 -1px 2px hsla(207,5%,0%,.2)}.bar ul{margin:0!important}.bar li{display:block;list-style:none}.bar .icon path{fill:hsla(27,10%,75%,.75)}.docs .icon path{fill:hsla(207,10%,75%,.5)}.docs .permalink:hover .icon path{fill:hsl(207,10%,75%)}.bar button{color:hsla(27,10%,75%,.75)}.bar button:hover .icon path,.bar button.is-active .icon path{fill:hsl(27,10%,85%)}.bar button:hover,.bar button.is-active{color:hsl(27,10%,85%)}.bar .icon{vertical-align:middle;display:inline-block}.bar,.bar a,.bar a:visited{color:hsl(27,10%,85%);text-shadow:1px 1px 0 hsla(27,5%,0%,.5)}.bar a:hover,.bar a.is-active{color:hsl(27,10%,95%);text-shadow:1px 1px 0 hsla(27,5%,0%,1);text-decoration:none}.brand{float:left;margin-right:20px;font-weight:700;font-size:16px;text-decoration:none}.brand,a.brand,a.brand:visited{color:hsl(27,5%,5%);text-shadow:1px 1px 0 hsla(27,5%,100%,.2)}.brand:hover,a.brand:hover{color:hsl(27,5%,0%);text-shadow:1px 1px 0 hsla(27,5%,100%,.3);text-decoration:none}.menu{font-size:12px}.menu>li{float:left;position:relative}.menu a{display:block;margin-right:15px}.dropdown-toggle{position:relative;padding-right:15px}.dropdown-toggle:after{display:block;position:absolute;right:0;top:18px;content:'';border:4px solid;border-left-color:transparent;border-right-color:transparent;border-bottom-color:transparent}.nav-results,.dropdown{position:absolute;z-index:1020;top:32px;left:-16px;width:175px;max-height:500px;padding:10px 0;overflow-y:auto;word-wrap:break-word;font-size:11px;line-height:20px;background-color:hsla(207,10%,25%,.97);border:1px solid hsla(207,5%,70%,.3);border-radius:3px;box-shadow:0 0 3px hsla(207,5%,0%,.2)}.toc-list{width:200px}.nav-results{right:0;width:200px;left:auto;padding:5px 0}.nav-results-filename{display:block;font-size:10px;opacity:.75}.nav-results a{display:block;line-height:15px;padding:5px 10px}.nav-results li:not([hidden])~li a{border-top:1px solid hsla(27,10%,90%,.1)}.dropdown a{padding:0 15px}.dropdown li:hover{background-color:hsl(207,10%,22%)}.nav{float:right;position:relative}.nav input[type="search"]{padding:2px 4px;color:#fff;width:150px;border:1px solid hsla(207,5%,0%,.3);background:hsla(207,12%,40%,.9);box-shadow:inset 1px 1px 3px hsla(207,5%,0%,.05),1px 1px 0 hsla(207,5%,100%,.05);border-radius:10px;-webkit-appearance:textfield}.nav input[type="search"]:focus{outline:0;background:hsla(207,7%,45%,.9)}.settings{text-align:center}.bar button{display:inline-block;vertical-align:middle;padding:0 5px;margin:0 3px;background:transparent}.bar button:first-child{margin-left:0}.settings .auto{line-height:32px;font-size:11px;font-weight:700;letter-spacing:-1px;text-shadow:none;text-transform:uppercase}body{font-family:sans-serif;font-size:14px;line-height:1.618}.docs pre,p,ol,ul,dl,figure,blockquote,table{margin-left:20px;margin-right:20px}.preview,.docs pre,p,ol,ul,dl,figure,blockquote,table{margin-top:10px}ul ul,ol ol,ul ol,ol ul,blockquote p:last-child{margin-top:0}ul,ol{padding-left:1.5em}p:last-child,ol:last-child,ul:last-child,dl:last-child{margin-bottom:20px}hr,h1,h2,h3,h4,h5,h6{margin:1em 20px .5em}h1:first-of-type{margin-top:20px}h1,h2,h3,h4,h5,h6{line-height:1.2;color:hsl(207,10%,50%)}h1 a,h1 a:hover,h1 a:visited{color:inherit;text-decoration:inherit}h1{font-size:3.052em;font-weight:400;color:hsl(207,10%,45%)}h2{font-size:1.953em}h3{font-size:1.536em}h1,h2,h3{letter-spacing:-.025em}h4{font-size:1.25em}h5{font-size:1em;text-transform:uppercase}h6{font-size:1em}.permalink{position:absolute;top:15px;right:15px}a{color:hsl(207,90%,50%);text-decoration:none}a:hover{color:hsl(207,95%,40%);text-decoration:underline}a:visited{color:hsl(207,100%,35%)}.preview-code,pre,code,var{font-style:normal;font-family:"Ubuntu Mono","Andale Mono","DejaVu Sans Mono","Monaco","Bitstream Vera Sans Mono","Consolas","Lucida Console",monospace;font-size:12px}.docs pre,code,var{padding:.1em 3px;background:hsla(207,5%,0%,.025);border:1px solid hsla(207,5%,0%,.05);border-radius:3px}.code pre{line-height:1.1!important}pre code{padding:0;background:transparent;border:0}.cf:before,.cf:after{content:'';display:table}.cf:after{clear:both}[unselectable="on"]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[hidden]{display:none!important}small{font-size:85%;opacity:.9}</style><script type="text/preview">(function(){"use strict";var a=function(a){return Array.prototype.slice.call(a)},b=document.getElementsByTagName("body")[0],c=["link","visited","hover","active","focus","target","enabled","disabled","checked"],d=new RegExp(":(("+c.join(")|(")+"))","gi"),e=a(document.styleSheets).map(function(b){return a(b.cssRules).filter(function(a){return a.selectorText&&a.selectorText.match(d)}).map(function(a){return a.cssText.replace(d,".\\3A $1")}).join("")}).join("");if(e.length){var f=document.createElement("style");f.innerText=e;var g=document.getElementsByTagName("style")[0];g.parentNode.insertBefore(f,g)}var h=function(){var a=window.getComputedStyle(b,null);return function(){if(b.childElementCount===0)return b.offsetHeight;var c=b.getElementsByTagName("*"),d=[];for(var e=0,f=c.length;e<f;e++)d.push(c[e].offsetTop+c[e].offsetHeight+parseInt(window.getComputedStyle(c[e],null).getPropertyValue("margin-bottom")));var g=Math.max.apply(Math,d);return g+=parseInt(a.getPropertyValue("padding-bottom"),10),Math.max(g,b.offsetHeight)}}(),i={getHeight:function(){window.parent.postMessage({height:h()},"*")}};window.addEventListener("message",function(a){if(a.data==null)return;typeof a.data=="string"&&i[a.data]()},!1)})()</script><style type="text/preview">article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:transparent}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}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-cancel-button,input[type="search"]::-webkit-search-decoration{-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{background:#fff;font:14px/21px "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;color:#444;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}hr{border:solid #ddd;border-width:1px 0 0;clear:both;margin:10px 0 30px;height:0}.container{position:relative;margin:0 auto;padding:0}.container .alpha{margin-left:0}.container .omega{margin-right:0}.column,.columns{float:left;margin-left:10px;margin-right:10px}.alpha-omega{margin-right:0;margin-left:0}.row{margin-bottom:20px}.container{width:960px}.container .one{width:40px}.container .two{width:100px}.container .three{width:160px}.container .four{width:220px}.container .five{width:280px}.container .six{width:340px}.container .seven{width:400px}.container .eight{width:460px}.container .nine{width:520px}.container .ten{width:580px}.container .eleven{width:640px}.container .twelve{width:700px}.container .thirteen{width:760px}.container .fourteen{width:820px}.container .fifteen{width:880px}.container .sixteen{width:940px}.container .one-third{width:300px}.container .two-thirds{width:620px}.container .one-half{width:460px}.container .one-quarter{width:220px}.container .three-quarters{width:700px}.container .offset-by-one{padding-left:60px}.container .offset-by-two{padding-left:120px}.container .offset-by-three{padding-left:180px}.container .offset-by-four{padding-left:240px}.container .offset-by-five{padding-left:300px}.container .offset-by-six{padding-left:360px}.container .offset-by-seven{padding-left:420px}.container .offset-by-eight{padding-left:480px}.container .offset-by-nine{padding-left:540px}.container .offset-by-ten{padding-left:600px}.container .offset-by-eleven{padding-left:660px}.container .offset-by-twelve{padding-left:720px}.container .offset-by-thirteen{padding-left:780px}.container .offset-by-fourteen{padding-left:840px}.container .offset-by-fifteen{padding-left:900px}.container .pull-by-one{left:-60px}.container .pull-by-two{left:-120px}.container .pull-by-three{left:-180px}.container .pull-by-four{left:-240px}.container .pull-by-five{left:-300px}.container .pull-by-six{left:-360px}.container .pull-by-seven{left:-420px}.container .pull-by-eight{left:-480px}.container .pull-by-nine{left:-540px}.container .pull-by-ten{left:-600px}.container .pull-by-eleven{left:-660px}.container .pull-by-twelve{left:-720px}.container .pull-by-thirteen{left:-780px}.container .pull-by-fourteen{left:-840px}.container .pull-by-fifteen{left:-900px}.container .push-by-one{left:60px}.container .push-by-two{left:120px}.container .push-by-three{left:180px}.container .push-by-four{left:240px}.container .push-by-five{left:300px}.container .push-by-six{left:360px}.container .push-by-seven{left:420px}.container .push-by-eight{left:480px}.container .push-by-nine{left:540px}.container .push-by-ten{left:600px}.container .push-by-eleven{left:660px}.container .push-by-twelve{left:720px}.container .push-by-thirteen{left:780px}.container .push-by-fourteen{left:840px}.container .push-by-fifteen{left:900px}@media only screen and (max-width: 959px){.container{ width:768px}.container .one{width:28px}.container .two{width:76px}.container .three{width:124px}.container .four{width:172px}.container .five{width:220px}.container .six{width:268px}.container .seven{width:316px}.container .eight{width:364px}.container .nine{width:412px}.container .ten{width:460px}.container .eleven{width:508px}.container .twelve{width:556px}.container .thirteen{width:604px}.container .fourteen{width:652px}.container .fifteen{width:700px}.container .sixteen{width:748px}.container .one-third{width:236px}.container .two-thirds{width:492px}.container .one-half{width:364px}.container .one-quarter{width:172px}.container .three-quarters{width:556px}.container .offset-by-one{padding-left:48px}.container .offset-by-two{padding-left:96px}.container .offset-by-three{padding-left:144px}.container .offset-by-four{padding-left:192px}.container .offset-by-five{padding-left:240px}.container .offset-by-six{padding-left:288px}.container .offset-by-seven{padding-left:336px}.container .offset-by-eight{padding-left:384px}.container .offset-by-nine{padding-left:432px}.container .offset-by-ten{padding-left:480px}.container .offset-by-eleven{padding-left:528px}.container .offset-by-twelve{padding-left:576px}.container .offset-by-thirteen{padding-left:624px}.container .offset-by-fourteen{padding-left:672px}.container .offset-by-fifteen{padding-left:720px}.container .pull-by-one{left:-48px}.container .pull-by-two{left:-96px}.container .pull-by-three{left:-144px}.container .pull-by-four{left:-192px}.container .pull-by-five{left:-240px}.container .pull-by-six{left:-288px}.container .pull-by-seven{left:-336px}.container .pull-by-eight{left:-384px}.container .pull-by-nine{left:-432px}.container .pull-by-ten{left:-480px}.container .pull-by-eleven{left:-528px}.container .pull-by-twelve{left:-576px}.container .pull-by-thirteen{left:-624px}.container .pull-by-fourteen{left:-672px}.container .pull-by-fifteen{left:-720px}.container .push-by-one{left:48px}.container .push-by-two{left:96px}.container .push-by-three{left:144px}.container .push-by-four{left:192px}.container .push-by-five{left:240px}.container .push-by-six{left:288px}.container .push-by-seven{left:336px}.container .push-by-eight{left:384px}.container .push-by-nine{left:432px}.container .push-by-ten{left:480px}.container .push-by-eleven{left:528px}.container .push-by-twelve{left:576px}.container .push-by-thirteen{left:624px}.container .push-by-fourteen{left:672px}.container .push-by-fifteen{left:720px}.container{width:768px}.container .alpha{margin-right:10px}.container .omega{margin-left:10px}}@media only screen and (max-width: 767px){.container{ width:90%}.container .one,.container .two,.container .three,.container .four,.container .five,.container .six,.container .seven,.container .eight,.container .nine,.container .ten,.container .eleven,.container .twelve,.container .thirteen,.container .fourteen,.container .fifteen,.container .sixteen,.container .one-third,.container .two-thirds,.container .one-half,.container .one-quarter,.container .three-quarters{width:100%}.container .column,.container .columns{margin:0}.container .offset-by-one,.container .offset-by-two,.container .offset-by-three,.container .offset-by-four,.container .offset-by-five,.container .offset-by-six,.container .offset-by-seven,.container .offset-by-eight,.container .offset-by-nine,.container .offset-by-ten,.container .offset-by-eleven,.container .offset-by-twelve,.container .offset-by-thirteen,.container .offset-by-fourteen,.container .offset-by-fifteen{padding-left:0}}.container:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden}.clearfix:before,.clearfix:after,.row:before,.row:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0}.row:after,.clearfix:after{clear:both}.row,.clearfix{zoom:1}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit}h1{color:#181818;font-family:"Georgia","Times New Roman",serif;font-weight:400;font-size:46px;line-height:69px;margin:0 0 14px 0}h2{color:#181818;font-family:"Georgia","Times New Roman",serif;font-weight:400;font-size:35px;line-height:52.5px;margin:0 0 10px 0}h3{color:#181818;font-family:"Georgia","Times New Roman",serif;font-weight:400;font-size:28px;line-height:42px;margin:0 0 8px 0}h4{color:#181818;font-family:"Georgia","Times New Roman",serif;font-weight:400;font-size:21px;line-height:31.5px;margin:0 0 4px 0}h5{color:#181818;font-family:"Georgia","Times New Roman",serif;font-weight:400;font-size:17px;line-height:25.5px}h6{color:#181818;font-family:"Georgia","Times New Roman",serif;font-weight:400;font-size:14px;line-height:21px}.subheader{color:#777}p{margin:0 0 20px 0;line-height:21px}p img{margin:0}.lead{font-size:21px;line-height:31.5px;color:#777}em{font-style:italic}strong{font-weight:700;color:#333}small{font-size:80%}blockquote,blockquote p{font-size:17px;line-height:24px;color:#777;font-style:italic}blockquote{margin:0 0 20px;padding:9px 20px 0 19px;border-left:1px solid #ddd}blockquote cite{display:block;font-size:12px;color:#555}blockquote cite:before{content:"\2014 \0020"}blockquote cite a,blockquote cite a:visited,blockquote cite a:visited{color:#555}a,a:visited{color:#333;text-decoration:underline}a:hover,a:focus{color:#000;text-decoration:none;outline:0}p a,p a:visited{line-height:inherit}ul,ol{margin:0 0 20px 0}ul{list-style:none outside}ol{list-style:decimal}ol,ul.square,ul.circle,ul.disc{margin:0 0 0 10px}ul.square{list-style:square outside}ul.circle{list-style:circle outside}ul.disc{list-style:disc outside}ul ul,ul ol,ol ol,ol ul{margin:4px 0 5px 30px;font-size:90%}li{line-height:18px;margin:0 0 12px 0}.large li{line-height:21px}li p{line-height:21px}.button,button,input[type="submit"],input[type="reset"],input[type="button"]{background-color:#ccc;background-color:rgba(153,153,153,.2);background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.2)),to(rgba(0,0,0,.2)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-moz-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-o-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(0,0,0,.2));background-repeat:repeat-x;border:1px solid #aaa;border-top:1px solid #ccc;border-left:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;color:#444;display:inline-block;font-size:11px;font-weight:700;text-decoration:none;text-shadow:0 1px rgba(255,255,255,.75);cursor:pointer;margin:0 0 20px 0;line-height:normal;padding:8px 10px;font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif}.button:hover,button:hover,input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover{background-color:#ccc;background-color:rgba(153,153,153,.3);background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.3)),to(rgba(0,0,0,.3)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.3));background-image:-moz-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.3));background-image:-o-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.3));background-image:linear-gradient(to bottom,rgba(255,255,255,.3),rgba(0,0,0,.3));background-repeat:repeat-x;color:#222;border:1px solid #888;border-top:1px solid #aaa;border-left:1px solid #aaa}.button:active,button:active,input[type="submit"]:active,input[type="reset"]:active,input[type="button"]:active{background-color:#ccc;background-color:rgba(153,153,153,.2);background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.2)),to(rgba(0,0,0,.2)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-moz-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-o-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(0,0,0,.2));background-repeat:repeat-x;border:1px solid #666}.button .full-width,button.full-width,input[type="submit"].full-width,input[type="reset"].full-width,input[type="button"].full-width{width:100%;padding-left:0;padding-right:0;text-align:center}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}form{margin:0 0 20px 0}fieldset{margin:0 0 20px 0}input[type="search"],input[type="url"]{-webkit-appearance:textfield;-moz-appearance:textfield}input[type="text"],input[type="password"],input[type="email"],input[type="search"],input[type="url"],input[type="number"],input[type="tel"],textarea,select{border:1px solid #ccc;padding:6px 4px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;font:13px "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;color:#777;width:210px;max-width:100%;display:block;margin:0 0 20px 0;background:#fff}select{padding:10px;width:220px}input[type="text"]:focus,input[type="password"]:focus,input[type="email"]:focus,input[type="search"]:focus,input[type="url"]:focus,input[type="number"]:focus,input[type="tel"]:focus,textarea:focus{border:1px solid #aaa;color:#444;outline:0;-moz-box-shadow:0 0 3px rgba(0,0,0,.2);-webkit-box-shadow:0 0 3px rgba(0,0,0,.2);box-shadow:0 0 3px rgba(0,0,0,.2)}textarea{min-height:60px}label,legend{display:block;font-weight:700;font-size:13px}input[type="checkbox"]{display:inline}label span,legend span{font-weight:400;font-size:13px;color:#444}.scale-with-grid{max-width:100%;height:auto}table{max-width:100%;background:#fff;border-collapse:collapse;border-spacing:0;width:100%;margin:10px 0}table th,table td{padding:8px;line-height:21px;text-align:left;vertical-align:top;border-top:1px solid #ccc}table th{font-weight:700}table thead th{vertical-align:bottom}table caption thead tr:first-child th,table caption thead tr:first-child td,table colgroup thead tr:first-child th,table colgroup thead tr:first-child td,table thead:first-child tr:first-child th,table thead:first-child tr:first-child td{border-top:0}table tbody tbody{border-top:2px solid #ccc}table table{background:#fff}.table-condensed th,.table-condensed td{padding:4px 5px}.table-bordered{border:1px solid #ccc;border-collapse:separate;border-left:0;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.table-bordered th,.table-bordered td{border-left:1px solid #ccc}.table-bordered caption thead tr:first-child th,.table-bordered caption tbody tr:first-child th,.table-bordered caption tbody tr:first-child td,.table-bordered colgroup thead tr:first-child th,.table-bordered colgroup tbody tr:first-child th,.table-bordered colgroup tbody tr:first-child td,.table-bordered thead:first-child tr:first-child th,.table-bordered tbody:first-child tr:first-child th,.table-bordered tbody:first-child tr:first-child td{border-top:0}.table-bordered thead:first-child tr:first-child>th:first-child,.table-bordered tbody:first-child tr:first-child>td:first-child,.table-bordered tbody:first-child tr:first-child>th:first-child{-webkit-border-top-left-radius:3px;-moz-border-radius-topleft:3px;border-top-left-radius:3px}.table-bordered thead:first-child tr:first-child>th:last-child,.table-bordered tbody:first-child tr:first-child>td:last-child,.table-bordered tbody:first-child tr:first-child>th:last-child{-webkit-border-top-right-radius:3px;-moz-border-radius-topright:3px;border-top-right-radius:3px}.table-bordered thead:last-child tr:last-child>th:first-child,.table-bordered tbody:last-child tr:last-child>td:first-child,.table-bordered tbody:last-child tr:last-child>th:first-child,.table-bordered tfoot:last-child tr:last-child>td:first-child,.table-bordered tfoot:last-child tr:last-child>th:first-child{-webkit-border-bottom-left-radius:3px;-moz-border-radius-bottomleft:3px;border-bottom-left-radius:3px}.table-bordered thead:last-child tr:last-child>th:last-child,.table-bordered tbody:last-child tr:last-child>td:last-child,.table-bordered tbody:last-child tr:last-child>th:last-child,.table-bordered tfoot:last-child tr:last-child>td:last-child,.table-bordered tfoot:last-child tr:last-child>th:last-child{-webkit-border-bottom-right-radius:3px;-moz-border-radius-bottomright:3px;border-bottom-right-radius:3px}.table-bordered tfoot tbody:last-child tr:last-child td:first-child{-webkit-border-bottom-left-radius:0;-moz-border-radius-bottomleft:0;border-bottom-left-radius:0}.table-bordered tfoot tbody:last-child tr:last-child td:last-child{-webkit-border-bottom-right-radius:0;-moz-border-radius-bottomright:0;border-bottom-right-radius:0}.table-bordered caption thead tr:first-child th:first-child,.table-bordered caption tbody tr:first-child td:first-child,.table-bordered colgroup thead tr:first-child th:first-child,.table-bordered colgroup tbody tr:first-child td:first-child{-webkit-border-top-left-radius:3px;-moz-border-radius-topleft:3px;border-top-left-radius:3px}.table-bordered caption thead tr:first-child th:last-child,.table-bordered caption tbody tr:first-child td:last-child,.table-bordered colgroup thead tr:first-child th:last-child,.table-bordered colgroup tbody tr:first-child td:last-child{-webkit-border-top-right-radius:3px;-moz-border-radius-topright:3px;border-top-right-radius:3px}.table-striped tbody>tr:nth-child(odd)>td,.table-striped tbody>tr:nth-child(odd)>th{background-color:#efefef}.table-hover tbody tr:hover>td,.table-hover tbody tr:hover>th{background-color:#999}</style></head><body><nav class="bar top cf"><div class="container"><a href="index.html" class="brand">Ribs</a><ul class="menu"><li><a href="#" data-toggle="dropdown-1" unselectable="on" class="dropdown-toggle">scss</a><ul id="dropdown-1" hidden class="dropdown"><li><a href="Ribs.html">Ribs</a></li><li><a href="forms.html">forms</a></li><li><a href="grid.html">grid</a></li><li><a href="images.html">images</a></li><li><a href="links.html">links</a></li><li><a href="lists.html">lists</a></li><li><a href="mixins.html">mixins</a></li><li><a href="tables.html">tables</a></li><li><a href="typography.html">typography</a></li><li><a href="variables.html">variables</a></li></ul></li><li><a href="#" data-toggle="dropdown-2" unselectable="on" class="dropdown-toggle">normalize</a><ul id="dropdown-2" hidden class="dropdown"><li><a href="normalize-normalize.html">normalize</a></li></ul></li></ul><div class="nav"><button title="Table of Contents" data-toggle="nav-toc"><svg viewBox="0 0 512 512" height="22" width="22" class="icon"><path d="M108.9,403.1V462H50v-58.9H108.9z M108.9,285.4H50v58.9h58.9V285.4zM108.9,50H50v58.9h58.9V50z M108.9,167.7H50v58.9h58.9V167.7z M167.7,344.3H462v-58.9H167.7V344.3zM167.7,50v58.9H462V50H167.7z M167.7,462H462v-58.9H167.7V462z M167.7,226.6H462v-58.9H167.7V226.6z"></path></svg></button><input type="search" placeholder="Search" class="search"></div></div></nav><section class="container"><article id="images" class="section"><div class="docs"><a href="#images" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="images">Images</h1>
|
|
<h2 id="scale-an-image-in-line-with-the-responsive-grid">Scale an image in line with the responsive grid</h2>
|
|
<textarea class="preview-code" spellcheck="false"> <img src="foo.jpg" title="Scaling image of Foo" class="scale-with-grid"></textarea>
|
|
</div><div class="code"><pre><code>.scale-with-grid {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}</code></pre></div></article></section><div class="bar bottom"><div hidden class="settings container"><!-- Icons from http://iconmonstr.com--><button title="Desktop (1280)" data-width='1280'><svg viewBox="0 0 412 386" height="24" width="26" class="icon"><path d="m147.6,343.9c-4.5,15.9-26.2,37.6-42.1,42.1h201c-15.3,-4-38.1,-26.8-42.1,-42.1H147.6zM387,0.5H25c-13.8,0-25,11.2-25,25V294c0,13.8 11.2,25 25,25h362c13.8,0 25,-11.2 25,-25V25.5C412,11.7 400.8,0.5 387,0.5zM369.9,238.2H42.1L42.1,42.6 369.9,42.6V238.2z"></path></svg></button><button title="Laptop (1024)" data-width='1024'><svg viewBox="0 0 384 312" height="23" width="28" class="icon"><path d="m349.2,20.5c0,-11-9,-20-20,-20H53.6c-11,0-20,9-20,20v194H349.2v-194zm-27,167H60.6V27.5H322.2v160zm28,42H32.6L2.6,282.1c-3.5,6.2-3.5,13.8 0.1,19.9 3.6,6.2 10.2,9.9 17.3,9.9H363.1c7.1,0 13.7,-3.8 17.3,-10 3.6,-6.2 3.6,-13.8 0,-20l-30.2,-52.5zm-196.9,54 8,-23.5h60.5l8,23.5h-76.5z"></path></svg></button><button title="Tablet (768)" data-width='768'><svg viewBox="0 0 317 412" height="24" width="18" class="icon"><path d="M 316.5,380 V 32 c 0,-17.7 -14.3,-32 -32,-32 H 32 C 14.3,0 0,14.3 0,32 v 348 c 0,17.7 14.3,32 32,32 h 252.5 c 17.7,0 32,-14.3 32,-32 z M 40,367 V 45 H 276.5 V 367 H 40 z m 109.8,22.7 c 0,-4.7 3.8,-8.5 8.5,-8.5 4.7,0 8.5,3.8 8.5,8.5 0,4.7 -3.8,8.5 -8.5,8.5 -4.7,0 -8.5,-3.8 -8.5,-8.5 z"></path></svg></button><button title="Smart phone (320)" data-width='320'><svg viewBox="0 0 224 412" height="24" width="13" class="icon"><path d="M 190.7,0 H 33 C 14.8,0 0,14.8 0,33 v 346 c 0,18.2 14.8,33 33,33 h 157.7 c 18.2,0 33,-14.8 33,-33 V 33 c 0,-18.2 -14.8,-33 -33,-33 z M 94.3,30.2 h 37 c 2.2,0 4,1.8 4,4 0,2.2 -1.8,4 -4,4 h -37 c -2.2,0 -4,-1.8 -4,-4 0,-2.2 1.8,-4 4,-4 z m 18.5,362.8 c -8.8,0 -16,-7.2 -16,-16 0,-8.8 7.2,-16 16,-16 8.8,0 16,7.2 16,16 0,8.8 -7.2,16 -16,16 z M 198.6,343.8 H 25.1 V 68.2 h 173.5 v 275.5 z"></path></svg></button><button title="Feature phone (240)" data-width='240'><svg viewBox="0 0 201 412" height="24" width="12" class="icon"><path d="M 165.5,0.2 V 45 H 25 c -13.8,0 -25,11.2 -25,25 V 387 c 0,13.8 11.2,25 25,25 h 150.5 c 13.8,0 25,-11.2 25,-25 V 0.2 h -35 z M 65.2,366.5 H 34.2 v -24.5 h 31 v 24.5 z m 0,-44.3 H 34.2 v -24.5 h 31 v 24.5 z m 50.5,44.3 H 84.7 v -24.5 h 31 v 24.5 z m 0,-44.3 H 84.7 v -24.5 h 31 v 24.5 z m 50.5,44.3 h -31 v -24.5 h 31 v 24.5 z m 0,-44.3 h -31 v -24.5 h 31 v 24.5 z m 0,-59.3 h -132 V 95.4 h 132 V 262.9 z"></path></svg></button><button title="Auto (100%)" data-width="auto" class="auto is-active">Auto</button></div></div><script>(function(){var a=[{title:"Ribs",filename:"Ribs",url:"Ribs.html"},{title:"Ribs",filename:"Ribs",url:"Ribs.html#ribs"},{title:"Import of normalize, variables and mixins",filename:"Ribs",url:"Ribs.html#import-of-normalize-variables-and-mixins"},{title:"General body style",filename:"Ribs",url:"Ribs.html#general-body-style"},{title:"General horizontal rule style",filename:"Ribs",url:"Ribs.html#general-horizontal-rule-style"},{title:"Import of ribs functionality",filename:"Ribs",url:"Ribs.html#import-of-ribs-functionality"},{title:"Example Media Queries",filename:"Ribs",url:"Ribs.html#example-media-queries"},{title:"forms",filename:"forms",url:"forms.html"},{title:"Buttons",filename:"forms",url:"forms.html#buttons"},{title:"Forms",filename:"forms",url:"forms.html#forms"},{title:"grid",filename:"grid",url:"grid.html"},{title:"Grid System",filename:"grid",url:"grid.html#grid-system"},{title:"Desktop Grid",filename:"grid",url:"grid.html#desktop-grid"},{title:"Tablet Grid",filename:"grid",url:"grid.html#tablet-grid"},{title:"Mobile Grid",filename:"grid",url:"grid.html#mobile-grid"},{title:"Clearing",filename:"grid",url:"grid.html#clearing"},{title:"images",filename:"images",url:"images.html"},{title:"Images",filename:"images",url:"images.html#images"},{title:"links",filename:"links",url:"links.html"},{title:"Links",filename:"links",url:"links.html#links"},{title:"lists",filename:"lists",url:"lists.html"},{title:"Lists",filename:"lists",url:"lists.html#lists"},{title:"mixins",filename:"mixins",url:"mixins.html"},{title:"",filename:"mixins",url:"mixins.html#"},{title:"tables",filename:"tables",url:"tables.html"},{title:"Tables",filename:"tables",url:"tables.html#tables"},{title:"typography",filename:"typography",url:"typography.html"},{title:"Typography",filename:"typography",url:"typography.html#typography"},{title:"variables",filename:"variables",url:"variables.html"},{title:"Grid System Variables",filename:"variables",url:"variables.html#grid-system-variables"},{title:"Breakpoint max widths - you probably dont need to change these",filename:"variables",url:"variables.html#breakpoint-max-widths-you-probably-dont-need-to-change-these"},{title:"Form Variables",filename:"variables",url:"variables.html#form-variables"},{title:"Links",filename:"variables",url:"variables.html#links"},{title:"Headings",filename:"variables",url:"variables.html#headings"},{title:"Subheading",filename:"variables",url:"variables.html#subheading"},{title:"Paragraphs",filename:"variables",url:"variables.html#paragraphs"},{title:"General Text",filename:"variables",url:"variables.html#general-text"},{title:"Blockquotes",filename:"variables",url:"variables.html#blockquotes"},{title:"Horizontal rules",filename:"variables",url:"variables.html#horizontal-rules"},{title:"Main font",filename:"variables",url:"variables.html#main-font"},{title:"Lists",filename:"variables",url:"variables.html#lists"},{title:"Tables",filename:"variables",url:"variables.html#tables"},{title:"normalize",filename:"normalize/normalize",url:"normalize-normalize.html"},{title:"",filename:"normalize/normalize",url:"normalize-normalize.html#"},{title:"HTML5 display definitions",filename:"normalize/normalize",url:"normalize-normalize.html#html5-display-definitions"},{title:"Base",filename:"normalize/normalize",url:"normalize-normalize.html#base"},{title:"Links",filename:"normalize/normalize",url:"normalize-normalize.html#links"},{title:"Typography",filename:"normalize/normalize",url:"normalize-normalize.html#typography"},{title:"Embedded content",filename:"normalize/normalize",url:"normalize-normalize.html#embedded-content"},{title:"Figures",filename:"normalize/normalize",url:"normalize-normalize.html#figures"},{title:"Forms",filename:"normalize/normalize",url:"normalize-normalize.html#forms"},{title:"Tables",filename:"normalize/normalize",url:"normalize-normalize.html#tables"}];(function(){"use strict";var b=function(a,b){return Array.prototype.indexOf.call(a,b)!==-1},c=function(a,b){return Array.prototype.filter.call(a,b)},d=function(a,b){return Array.prototype.forEach.call(a,b)},e=document.getElementsByTagName("body")[0];e.addEventListener("click",function(a){var b=a.target;b.tagName.toLowerCase()==="svg"&&(b=b.parentNode);var c=!1;b.dataset.toggle!=null&&(a.preventDefault(),b.classList.contains("is-active")||(c=!0)),d(e.querySelectorAll("[data-toggle]"),function(a){a.classList.remove("is-active"),document.getElementById(a.dataset.toggle).hidden=!0}),c&&(b.classList.add("is-active"),document.getElementById(b.dataset.toggle).hidden=!1)}),function(){var f=e.getElementsByClassName("nav")[0];if(!f)return;var g=document.createElement("ul");g.className="nav-results",g.id="nav-search",g.hidden=!0,d(a,function(a){var b,c,d;b=document.createElement("li"),b._title=a.title.toLowerCase(),b.hidden=!0,b.appendChild(c=document.createElement("a")),c.href=a.url,c.innerHTML=a.title,c.appendChild(d=document.createElement("span")),d.innerHTML=a.filename,d.className="nav-results-filename",g.appendChild(b)}),f.appendChild(g);var h=g.children,i=function(a){d(h,function(a){a.hidden=!0});var b=this.value.toLowerCase(),e=[];b!==""&&(e=c(h,function(a){return a._title.indexOf(b)!==-1})),e.length>0?(d(e,function(a){a.hidden=!1}),g.hidden=!1):g.hidden=!0},j=f.querySelector('input[type="search"]');j.addEventListener("keyup",i),j.addEventListener("focus",i),e.addEventListener("click",function(a){if(a.target.classList&&a.target.classList.contains("search"))return;g.hidden=!0}),g.addEventListener("click",function(a){j.value=""});var k=document.createElement("ul");k.id="nav-toc",k.hidden=!0,k.className="nav-results toc-list",c(e.getElementsByTagName("*"),function(a){return b(["h1","h2","h3"],a.tagName.toLowerCase())}).map(function(a){var b=document.createElement("li"),c=document.createElement("a"),d=a.tagName.toLowerCase()[1];c.classList.add("level-"+d),b.appendChild(c),c.href="#"+a.id,c.innerHTML=a.innerHTML,k.appendChild(b)}),f.appendChild(k)}()})(),function(){"use strict";if(location.hash==="#__preview__"||location.protocol==="data:")return;var a=function(a,b){return Array.prototype.forEach.call(a,b)},b=function(a,b){var e=Array.prototype.slice.call(arguments,2);return d(a,function(a){return(c(b)?b||a:a[b]).apply(a,e)})},c=function(a){return Object.prototype.toString.call(a)==="[object Function]"},d=function(a,b){return Array.prototype.map.call(a,b)},e=function(a,b){return d(a,function(a){return a[b]})},f=function(a){var b={},c=a.split(";");for(var d=0;c.length>d;d++){var e=c[d].trim().split("=");b[e[0]]=e[1]}return b},g=function(a,c){return b(e(a,"classList"),"remove",c)},h=function(a,b){a.contentDocument.defaultView.postMessage(b,"*")},i=document.getElementsByTagName("head")[0],j=document.getElementsByTagName("body")[0],k=e(i.querySelectorAll('style[type="text/preview"]'),"innerHTML").join(""),l=e(i.querySelectorAll('script[type="text/preview"]'),"innerHTML").join(""),m=location.href.split("#")[0]+"#__preview__",n=document.createElement("iframe");n.src="data:text/html,",j.appendChild(n),n.addEventListener("load",function(){var b={sameOriginDataUri:!1};this.contentDocument&&(b.sameOriginDataUri=!0),this.parentNode.removeChild(this),a(j.getElementsByTagName("textarea"),function(a,c){o(a,b,c),q(),p(a)})});var o=function(a,b,c){var d,e,f;d=document.createElement("div"),d.appendChild(e=document.createElement("div")),d.className="preview",e.appendChild(f=document.createElement("iframe")),e.className="resizeable",f.setAttribute("scrolling","no"),f.name="iframe"+c++,f.addEventListener("load",function(){var c,d,e,f,g,i,j;j=this.contentDocument;if(!b.sameOriginDataUri&&this.src!==m)return;this.src===m&&(c=j.createElement("html"),c.appendChild(j.createElement("head")),c.appendChild(d=j.createElement("body")),d.innerHTML=a.textContent,j.replaceChild(c,j.documentElement)),g=j.createElement("head"),g.appendChild(f=j.createElement("style")),g.appendChild(e=j.createElement("script")),e.textContent=l,f.textContent=k,i=j.getElementsByTagName("head")[0],i.parentNode.replaceChild(g,i),h(this,"getHeight")});var g;b.sameOriginDataUri?g="data:text/html;charset=utf-8,"+encodeURIComponent("<!doctype html><html><head></head></body>"+a.textContent):g=m,f.setAttribute("src",g);var i=function(){f.contentDocument.body.innerHTML=this.value,h(f,"getHeight")};a.addEventListener("keypress",i),a.addEventListener("keyup",i),a.parentNode.insertBefore(d,a)},p=function(a){var b=document.createElement("div");b.className="preview-code",b.style.position="absolute",b.style.left="-9999px",j.appendChild(b);var c=parseInt(window.getComputedStyle(a).getPropertyValue("max-height"),10),d=function(a){b.textContent=this.value+"\n";var d=b.offsetHeight+2;d>=c?this.style.overflow="auto":this.style.overflow="hidden",this.style.height=b.offsetHeight+2+"px"};a.addEventListener("keypress",d),a.addEventListener("keyup",d),d.call(a)},q=function(){var b=j.getElementsByClassName("settings")[0],c=j.getElementsByClassName("resizeable"),d=30,e=function(b){document.cookie="preview-width="+b,a(c,function(a){b==="auto"&&(b=a.parentNode.offsetWidth),a.style.width=b+"px",h(a.getElementsByTagName("iframe")[0],"getHeight")})},i=f(document.cookie)["preview-width"];if(i){e(i),g(b.getElementsByClassName("is-active"),"is-active");var k=b.querySelector('button[data-width="'+i+'"]');k&&k.classList.add("is-active")}window.addEventListener("message",function(a){if(a.data==null||!a.source)return;var b=a.data,c=document.getElementsByName(a.source.name)[0];b.height!=null&&c&&(c.parentNode.style.height=b.height+d+"px")},!1),b&&c.length>0&&(b.hidden=!1,b.addEventListener("click",function(a){var c=a.target.tagName.toLowerCase(),d;if(c==="button")d=a.target;else{if(c!=="svg")return;d=a.target.parentNode}a.preventDefault(),g(b.getElementsByClassName("is-active"),"is-active"),d.classList.add("is-active");var f=d.dataset.width;e(f)}))}}()})()</script></body></html><!-- Generated with StyleDocco (http://jacobrask.github.com/styledocco). -->
|