Browse Source

Switch docs over to use pygments instead of prettify. Broke the phone example.

pull/216/head
connors 11 years ago
parent
commit
1221229f94
  1. 3
      _includes/header.html
  2. 10
      assets/css/docs.css
  3. 1
      assets/css/prettify.css
  4. 2
      assets/js/docs.js
  5. 28
      assets/js/prettify.js
  6. 804
      index.html

3
_includes/header.html

@ -8,7 +8,7 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="dist/ratchet.css">
<link rel="stylesheet" href="assets/css/docs.css">
<link rel="stylesheet" href="assets/css/prettify.css">
<link rel="stylesheet" href="assets/css/pygments.css">
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/img/apple-touch-icon-114x114.png">
@ -16,7 +16,6 @@
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="assets/img/apple-touch-icon-57x57.png">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="assets/js/prettify.js"></script>
<script src="dist/ratchet.js"></script>
<script src="assets/js/docs.js"></script>
<script src="assets/js/fingerblast.js"></script>

10
assets/css/docs.css

@ -465,7 +465,7 @@ h6 {
margin-top: 13px;
}
.content-section .prettyprint,
.content-section .highlight,
.content-section .instruction-code {
margin-top: 10px;
padding: 10px;
@ -478,11 +478,15 @@ h6 {
border-radius: 3px;
}
.prettyprint + .component-description,
.highlight + .component-description,
.component-note + .component-description {
margin-top: 36px;
}
pre {
margin: 0;
}
/* Content specific styles
-------------------------------------------------- */
@ -962,7 +966,7 @@ h6 {
left: 0;
z-index: 10000;
}
#sliders .prettyprint:not(.js) {
#sliders .highlight:not(.js) {
margin-top: 230px;
}

1
assets/css/prettify.css

@ -1 +0,0 @@
.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#999}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:teal}.atv{color:#d14}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}

2
assets/js/docs.js

@ -15,8 +15,6 @@ $(function() {
var topCache;
var eventListeners;
prettyPrint();
var initialize = function () {
currentActive = 0;
topCache = [];

28
assets/js/prettify.js

@ -1,28 +0,0 @@
var q=null;window.PR_SHOULD_USE_CONTINUATION=!0;
(function(){function L(a){function m(a){var f=a.charCodeAt(0);if(f!==92)return f;var b=a.charAt(1);return(f=r[b])?f:"0"<=b&&b<="7"?parseInt(a.substring(1),8):b==="u"||b==="x"?parseInt(a.substring(2),16):a.charCodeAt(1)}function e(a){if(a<32)return(a<16?"\\x0":"\\x")+a.toString(16);a=String.fromCharCode(a);if(a==="\\"||a==="-"||a==="["||a==="]")a="\\"+a;return a}function h(a){for(var f=a.substring(1,a.length-1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g),a=
[],b=[],o=f[0]==="^",c=o?1:0,i=f.length;c<i;++c){var j=f[c];if(/\\[bdsw]/i.test(j))a.push(j);else{var j=m(j),d;c+2<i&&"-"===f[c+1]?(d=m(f[c+2]),c+=2):d=j;b.push([j,d]);d<65||j>122||(d<65||j>90||b.push([Math.max(65,j)|32,Math.min(d,90)|32]),d<97||j>122||b.push([Math.max(97,j)&-33,Math.min(d,122)&-33]))}}b.sort(function(a,f){return a[0]-f[0]||f[1]-a[1]});f=[];j=[NaN,NaN];for(c=0;c<b.length;++c)i=b[c],i[0]<=j[1]+1?j[1]=Math.max(j[1],i[1]):f.push(j=i);b=["["];o&&b.push("^");b.push.apply(b,a);for(c=0;c<
f.length;++c)i=f[c],b.push(e(i[0])),i[1]>i[0]&&(i[1]+1>i[0]&&b.push("-"),b.push(e(i[1])));b.push("]");return b.join("")}function y(a){for(var f=a.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),b=f.length,d=[],c=0,i=0;c<b;++c){var j=f[c];j==="("?++i:"\\"===j.charAt(0)&&(j=+j.substring(1))&&j<=i&&(d[j]=-1)}for(c=1;c<d.length;++c)-1===d[c]&&(d[c]=++t);for(i=c=0;c<b;++c)j=f[c],j==="("?(++i,d[i]===void 0&&(f[c]="(?:")):"\\"===j.charAt(0)&&
(j=+j.substring(1))&&j<=i&&(f[c]="\\"+d[i]);for(i=c=0;c<b;++c)"^"===f[c]&&"^"!==f[c+1]&&(f[c]="");if(a.ignoreCase&&s)for(c=0;c<b;++c)j=f[c],a=j.charAt(0),j.length>=2&&a==="["?f[c]=h(j):a!=="\\"&&(f[c]=j.replace(/[A-Za-z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return f.join("")}for(var t=0,s=!1,l=!1,p=0,d=a.length;p<d;++p){var g=a[p];if(g.ignoreCase)l=!0;else if(/[a-z]/i.test(g.source.replace(/\\u[\da-f]{4}|\\x[\da-f]{2}|\\[^UXux]/gi,""))){s=!0;l=!1;break}}for(var r=
{b:8,t:9,n:10,v:11,f:12,r:13},n=[],p=0,d=a.length;p<d;++p){g=a[p];if(g.global||g.multiline)throw Error(""+g);n.push("(?:"+y(g)+")")}return RegExp(n.join("|"),l?"gi":"g")}function M(a){function m(a){switch(a.nodeType){case 1:if(e.test(a.className))break;for(var g=a.firstChild;g;g=g.nextSibling)m(g);g=a.nodeName;if("BR"===g||"LI"===g)h[s]="\n",t[s<<1]=y++,t[s++<<1|1]=a;break;case 3:case 4:g=a.nodeValue,g.length&&(g=p?g.replace(/\r\n?/g,"\n"):g.replace(/[\t\n\r ]+/g," "),h[s]=g,t[s<<1]=y,y+=g.length,
t[s++<<1|1]=a)}}var e=/(?:^|\s)nocode(?:\s|$)/,h=[],y=0,t=[],s=0,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=document.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);m(a);return{a:h.join("").replace(/\n$/,""),c:t}}function B(a,m,e,h){m&&(a={a:m,d:a},e(a),h.push.apply(h,a.e))}function x(a,m){function e(a){for(var l=a.d,p=[l,"pln"],d=0,g=a.a.match(y)||[],r={},n=0,z=g.length;n<z;++n){var f=g[n],b=r[f],o=void 0,c;if(typeof b===
"string")c=!1;else{var i=h[f.charAt(0)];if(i)o=f.match(i[1]),b=i[0];else{for(c=0;c<t;++c)if(i=m[c],o=f.match(i[1])){b=i[0];break}o||(b="pln")}if((c=b.length>=5&&"lang-"===b.substring(0,5))&&!(o&&typeof o[1]==="string"))c=!1,b="src";c||(r[f]=b)}i=d;d+=f.length;if(c){c=o[1];var j=f.indexOf(c),k=j+c.length;o[2]&&(k=f.length-o[2].length,j=k-c.length);b=b.substring(5);B(l+i,f.substring(0,j),e,p);B(l+i+j,c,C(b,c),p);B(l+i+k,f.substring(k),e,p)}else p.push(l+i,b)}a.e=p}var h={},y;(function(){for(var e=a.concat(m),
l=[],p={},d=0,g=e.length;d<g;++d){var r=e[d],n=r[3];if(n)for(var k=n.length;--k>=0;)h[n.charAt(k)]=r;r=r[1];n=""+r;p.hasOwnProperty(n)||(l.push(r),p[n]=q)}l.push(/[\S\s]/);y=L(l)})();var t=m.length;return e}function u(a){var m=[],e=[];a.tripleQuotedStrings?m.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/,q,"'\""]):a.multiLineStrings?m.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/,
q,"'\"`"]):m.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,q,"\"'"]);a.verbatimStrings&&e.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,q]);var h=a.hashComments;h&&(a.cStyleComments?(h>1?m.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,q,"#"]):m.push(["com",/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\n\r]*)/,q,"#"]),e.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,q])):m.push(["com",/^#[^\n\r]*/,
q,"#"]));a.cStyleComments&&(e.push(["com",/^\/\/[^\n\r]*/,q]),e.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,q]));a.regexLiterals&&e.push(["lang-regex",/^(?:^^\.?|[!+-]|!=|!==|#|%|%=|&|&&|&&=|&=|\(|\*|\*=|\+=|,|-=|->|\/|\/=|:|::|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|[?@[^]|\^=|\^\^|\^\^=|{|\||\|=|\|\||\|\|=|~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\s*(\/(?=[^*/])(?:[^/[\\]|\\[\S\s]|\[(?:[^\\\]]|\\[\S\s])*(?:]|$))+\/)/]);(h=a.types)&&e.push(["typ",h]);a=(""+a.keywords).replace(/^ | $/g,
"");a.length&&e.push(["kwd",RegExp("^(?:"+a.replace(/[\s,]+/g,"|")+")\\b"),q]);m.push(["pln",/^\s+/,q," \r\n\t\xa0"]);e.push(["lit",/^@[$_a-z][\w$@]*/i,q],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,q],["pln",/^[$_a-z][\w$@]*/i,q],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,q,"0123456789"],["pln",/^\\[\S\s]?/,q],["pun",/^.[^\s\w"-$'./@\\`]*/,q]);return x(m,e)}function D(a,m){function e(a){switch(a.nodeType){case 1:if(k.test(a.className))break;if("BR"===a.nodeName)h(a),
a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)e(a);break;case 3:case 4:if(p){var b=a.nodeValue,d=b.match(t);if(d){var c=b.substring(0,d.index);a.nodeValue=c;(b=b.substring(d.index+d[0].length))&&a.parentNode.insertBefore(s.createTextNode(b),a.nextSibling);h(a);c||a.parentNode.removeChild(a)}}}}function h(a){function b(a,d){var e=d?a.cloneNode(!1):a,f=a.parentNode;if(f){var f=b(f,1),g=a.nextSibling;f.appendChild(e);for(var h=g;h;h=g)g=h.nextSibling,f.appendChild(h)}return e}
for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),e;(e=a.parentNode)&&e.nodeType===1;)a=e;d.push(a)}var k=/(?:^|\s)nocode(?:\s|$)/,t=/\r\n?|\n/,s=a.ownerDocument,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=s.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);for(l=s.createElement("LI");a.firstChild;)l.appendChild(a.firstChild);for(var d=[l],g=0;g<d.length;++g)e(d[g]);m===(m|0)&&d[0].setAttribute("value",
m);var r=s.createElement("OL");r.className="linenums";for(var n=Math.max(0,m-1|0)||0,g=0,z=d.length;g<z;++g)l=d[g],l.className="L"+(g+n)%10,l.firstChild||l.appendChild(s.createTextNode("\xa0")),r.appendChild(l);a.appendChild(r)}function k(a,m){for(var e=m.length;--e>=0;){var h=m[e];A.hasOwnProperty(h)?window.console&&console.warn("cannot override language handler %s",h):A[h]=a}}function C(a,m){if(!a||!A.hasOwnProperty(a))a=/^\s*</.test(m)?"default-markup":"default-code";return A[a]}function E(a){var m=
a.g;try{var e=M(a.h),h=e.a;a.a=h;a.c=e.c;a.d=0;C(m,h)(a);var k=/\bMSIE\b/.test(navigator.userAgent),m=/\n/g,t=a.a,s=t.length,e=0,l=a.c,p=l.length,h=0,d=a.e,g=d.length,a=0;d[g]=s;var r,n;for(n=r=0;n<g;)d[n]!==d[n+2]?(d[r++]=d[n++],d[r++]=d[n++]):n+=2;g=r;for(n=r=0;n<g;){for(var z=d[n],f=d[n+1],b=n+2;b+2<=g&&d[b+1]===f;)b+=2;d[r++]=z;d[r++]=f;n=b}for(d.length=r;h<p;){var o=l[h+2]||s,c=d[a+2]||s,b=Math.min(o,c),i=l[h+1],j;if(i.nodeType!==1&&(j=t.substring(e,b))){k&&(j=j.replace(m,"\r"));i.nodeValue=
j;var u=i.ownerDocument,v=u.createElement("SPAN");v.className=d[a+1];var x=i.parentNode;x.replaceChild(v,i);v.appendChild(i);e<o&&(l[h+1]=i=u.createTextNode(t.substring(b,o)),x.insertBefore(i,v.nextSibling))}e=b;e>=o&&(h+=2);e>=c&&(a+=2)}}catch(w){"console"in window&&console.log(w&&w.stack?w.stack:w)}}var v=["break,continue,do,else,for,if,return,while"],w=[[v,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],
"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],F=[w,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],G=[w,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"],
H=[G,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"],w=[w,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],I=[v,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"],
J=[v,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],v=[v,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],K=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/,N=/\S/,O=u({keywords:[F,H,w,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END"+
I,J,v],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),A={};k(O,["default-code"]);k(x([],[["pln",/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),
["default-markup","htm","html","mxml","xhtml","xml","xsl"]);k(x([["pln",/^\s+/,q," \t\r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,q,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],["pun",/^[/<->]+/],["lang-js",/^on\w+\s*=\s*"([^"]+)"/i],["lang-js",/^on\w+\s*=\s*'([^']+)'/i],["lang-js",/^on\w+\s*=\s*([^\s"'>]+)/i],["lang-css",/^style\s*=\s*"([^"]+)"/i],["lang-css",/^style\s*=\s*'([^']+)'/i],["lang-css",
/^style\s*=\s*([^\s"'>]+)/i]]),["in.tag"]);k(x([],[["atv",/^[\S\s]+/]]),["uq.val"]);k(u({keywords:F,hashComments:!0,cStyleComments:!0,types:K}),["c","cc","cpp","cxx","cyc","m"]);k(u({keywords:"null,true,false"}),["json"]);k(u({keywords:H,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:K}),["cs"]);k(u({keywords:G,cStyleComments:!0}),["java"]);k(u({keywords:v,hashComments:!0,multiLineStrings:!0}),["bsh","csh","sh"]);k(u({keywords:I,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),
["cv","py"]);k(u({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["perl","pl","pm"]);k(u({keywords:J,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb"]);k(u({keywords:w,cStyleComments:!0,regexLiterals:!0}),["js"]);k(u({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes",
hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);k(x([],[["str",/^[\S\s]+/]]),["regex"]);window.prettyPrintOne=function(a,m,e){var h=document.createElement("PRE");h.innerHTML=a;e&&D(h,e);E({g:m,i:e,h:h});return h.innerHTML};window.prettyPrint=function(a){function m(){for(var e=window.PR_SHOULD_USE_CONTINUATION?l.now()+250:Infinity;p<h.length&&l.now()<e;p++){var n=h[p],k=n.className;if(k.indexOf("prettyprint")>=0){var k=k.match(g),f,b;if(b=
!k){b=n;for(var o=void 0,c=b.firstChild;c;c=c.nextSibling)var i=c.nodeType,o=i===1?o?b:c:i===3?N.test(c.nodeValue)?b:o:o;b=(f=o===b?void 0:o)&&"CODE"===f.tagName}b&&(k=f.className.match(g));k&&(k=k[1]);b=!1;for(o=n.parentNode;o;o=o.parentNode)if((o.tagName==="pre"||o.tagName==="code"||o.tagName==="xmp")&&o.className&&o.className.indexOf("prettyprint")>=0){b=!0;break}b||((b=(b=n.className.match(/\blinenums\b(?::(\d+))?/))?b[1]&&b[1].length?+b[1]:!0:!1)&&D(n,b),d={g:k,h:n,i:b},E(d))}}p<h.length?setTimeout(m,
250):a&&a()}for(var e=[document.getElementsByTagName("pre"),document.getElementsByTagName("code"),document.getElementsByTagName("xmp")],h=[],k=0;k<e.length;++k)for(var t=0,s=e[k].length;t<s;++t)h.push(e[k][t]);var e=q,l=Date;l.now||(l={now:function(){return+new Date}});var p=0,d,g=/\blang(?:uage)?-([\w.]+)(?!\S)/;m()};window.PR={createSimpleLexer:x,registerLangHandler:k,sourceDecorator:u,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",
PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ"}})();

804
index.html

@ -67,11 +67,11 @@ layout: default
</header>
</div>
<pre class="prettyprint">
&lt;header class=&quot;bar-nav&quot;&gt;
&lt;h1 class=&quot;title&quot;&gt;Title&lt;/h1&gt;
&lt;/header&gt;
</pre>
{% highlight html %}
<header class="bar-nav">
<h1 class="title">Title</h1>
</header>
{% endhighlight %}
</article>
@ -91,17 +91,17 @@ layout: default
</header>
</div>
<pre class="prettyprint">
&lt;header class=&quot;bar-nav&quot;&gt;
&lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
Left
&lt;/a&gt;
&lt;h1 class=&quot;title&quot;&gt;Title&lt;/h1&gt;
&lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
Right
&lt;/a&gt;
&lt;/header&gt;
</pre>
{% highlight html %}
<header class="bar-nav">
<a class="button">
Left
</a>
<h1 class="title">Title</h1>
<a class="button">
Right
</a>
</header>
{% endhighlight %}
</article>
<article class="component">
@ -120,17 +120,17 @@ Right
</header>
</div>
<pre class="prettyprint">
&lt;header class=&quot;bar-nav&quot;&gt;
&lt;a class=&quot;button-prev&quot; href=&quot;#&quot;&gt;
Previous
&lt;/a&gt;
&lt;h1 class=&quot;title&quot;&gt;Title&lt;/h1&gt;
&lt;a class=&quot;button-next&quot; href=&quot;#&quot;&gt;
Next
&lt;/a&gt;
&lt;/header&gt;
</pre>
{% highlight html %}
<header class="bar-nav">
<a class="button-prev">
Previous
</a>
<h1 class="title">Title</h1>
<a class="button-next">
Next
</a>
</header>
{% endhighlight %}
</article>
@ -160,27 +160,27 @@ Next
</header>
</div>
<pre class="prettyprint">
&lt;header class=&quot;bar-nav&quot;&gt;
&lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
Left
&lt;/a&gt;
&lt;ul class=&quot;segmented-controller&quot;&gt;
&lt;li class=&quot;active&quot;&gt;
&lt;a href=&quot;#&quot;&gt;One&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot;&gt;Two&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot;&gt;Three&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
Right
&lt;/a&gt;
&lt;/header&gt;
</pre>
{% highlight html %}
<header class="bar-nav">
<a class="button">
Left
</a>
<ul class="segmented-controller">
<li class="active">
<a>One</a>
</li>
<li>
<a>Two</a>
</li>
<li>
<a>Three</a>
</li>
</ul>
<a class="button">
Right
</a>
</header>
{% endhighlight %}
</article>
@ -225,42 +225,42 @@ Right
</nav>
</div>
<pre class="prettyprint">
&lt;nav class=&quot;bar-tab&quot;&gt;
&lt;ul class=&quot;tab-inner&quot;&gt;
&lt;li class=&quot;tab-item active&quot;&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;span class=&quot;icon icon-share&quot;&gt;&lt;/span&gt;
&lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;tab-item&quot;&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;span class=&quot;icon icon-share&quot;&gt;&lt;/span&gt;
&lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;tab-item&quot;&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;span class=&quot;icon icon-share&quot;&gt;&lt;/span&gt;
&lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;tab-item&quot;&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;span class=&quot;icon icon-share&quot;&gt;&lt;/span&gt;
&lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;tab-item&quot;&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;span class=&quot;icon icon-share&quot;&gt;&lt;/span&gt;
&lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;
</pre>
{% highlight html %}
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item active">
<a href="#">
<span class="icon icon-share"></span>
<div class="tab-label">Label</div>
</a>
</li>
<li class="tab-item">
<a href="#">
<span class="icon icon-share"></span>
<div class="tab-label">Label</div>
</a>
</li>
<li class="tab-item">
<a href="#">
<span class="icon icon-share"></span>
<div class="tab-label">Label</div>
</a>
</li>
<li class="tab-item">
<a href="#">
<span class="icon icon-share"></span>
<div class="tab-label">Label</div>
</a>
</li>
<li class="tab-item">
<a href="#">
<span class="icon icon-share"></span>
<div class="tab-label">Label</div>
</a>
</li>
</ul>
</nav>
{% endhighlight %}
<p class="component-note touch-only"><strong>Note:</strong> Use push.js to actually change content.</p>
</article>
@ -291,25 +291,27 @@ Right
</div>
</div>
<pre class="prettyprint">
&lt;!-- Segmented controller in standard bar fixed to top --&gt;
&lt;nav class=&quot;bar-standard&quot;&gt;
&lt;ul class=&quot;segmented-controller&quot;&gt;
&lt;li class=&quot;active&quot;&gt;
&lt;a href=&quot;#&quot;&gt;Thing one&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot;&gt;Thing two&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot;&gt;Thing three&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;
&lt;div class=&quot;bar-standard bar-header-secondary&quot;&gt;
&lt;a class=&quot;button-block&quot;&gt;Block level button&lt;/a&gt;
&lt;/div&gt;
</pre>
{% highlight html %}
<!-- Segmented controller in standard bar fixed to top -->
<nav class="bar-standard">
<ul class="segmented-controller">
<li class="active">
<a>Thing one</a>
</li>
<li>
<a>Thing two</a>
</li>
<li>
<a>Thing three</a>
</li>
</ul>
</nav>
<!-- Block button in standard bar fixed below top bar -->
<div class="bar-standard bar-header-secondary">
<a class="button-block">Block level button</a>
</div>
{% endhighlight %}
</article>
@ -327,14 +329,14 @@ Right
</ul>
</div>
<pre class="prettyprint">
&lt;ul class=&quot;table-view&quot;&gt;
&lt;li&gt;Item 1&lt;/li&gt;
&lt;li&gt;Item 2&lt;/li&gt;
&lt;li class=&quot;table-view-divider&quot;&gt;Divider&lt;/li&gt;
&lt;li&gt;Item 3&lt;/li&gt;
&lt;/ul&gt;
</pre>
{% highlight html %}
<ul class="table-view">
<li>Item 1</li>
<li>Item 2</li>
<li class="table-view-divider">Divider</li>
<li>Item 3</li>
</ul>
{% endhighlight %}
</article>
@ -365,28 +367,28 @@ Right
</ul>
</div>
<pre class="prettyprint">
&lt;ul class=&quot;table-view&quot;&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot;&gt;
Item 1
&lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot;&gt;
Item 2
&lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot;&gt;
Item 3
&lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
</pre>
{% highlight html %}
<ul class="table-view">
<li>
<a>
Item 1
<span class="chevron"></span>
</a>
</li>
<li>
<a>
Item 2
<span class="chevron"></span>
</a>
</li>
<li>
<a>
Item 3
<span class="chevron"></span>
</a>
</li>
</ul>
{% endhighlight %}
</article>
@ -401,13 +403,13 @@ Right
</ul>
</div>
<pre class="prettyprint">
&lt;ul class=&quot;table-view&quot;&gt;
&lt;li&gt;Item 1 &lt;span class=&quot;count&quot;&gt;4&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;Item 2 &lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;Item 3 &lt;span class=&quot;count&quot;&gt;5&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
{% highlight html %}
<ul class="table-view">
<li>Item 1 <span class="count">4</span></li>
<li>Item 2 <span class="count">1</span></li>
<li>Item 3 <span class="count">5</span></li>
</ul>
{% endhighlight %}
</article>
@ -440,31 +442,31 @@ Right
</ul>
</div>
<pre class="prettyprint">
&lt;ul class=&quot;table-view&quot;&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot;&gt;
Item 1
&lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;count&quot;&gt;4&lt;/span&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot;&gt;
Item 2
&lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot;&gt;
Item 3
&lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;count&quot;&gt;5&lt;/span&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
</pre>
{% highlight html %}
<ul class="table-view">
<li>
<a>
Item 1
<span class="chevron"></span>
<span class="count">4</span>
</a>
</li>
<li>
<a>
Item 2
<span class="chevron"></span>
<span class="count">1</span>
</a>
</li>
<li>
<a>
Item 3
<span class="chevron"></span>
<span class="count">5</span>
</a>
</li>
</ul>
{% endhighlight %}
</article>
@ -480,14 +482,14 @@ Right
</ul>
</div>
<pre class="prettyprint">
&lt;ul class=&quot;table-view&quot;&gt;
&lt;li&gt;Item 1 &lt;a class=&quot;button&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Item 2 &lt;a class=&quot;button-primary&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Item 3 &lt;a class=&quot;button-positive&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Item 4 &lt;a class=&quot;button-negative&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
{% highlight html %}
<ul class="table-view">
<li>Item 1 <a class="button">Button</a></li>
<li>Item 2 <a class="button-primary">Button</a></li>
<li>Item 3 <a class="button-positive">Button</a></li>
<li>Item 4 <a class="button-negative">Button</a></li>
</ul>
{% endhighlight %}
</article>
@ -517,28 +519,28 @@ Right
</ul>
</div>
<pre class="prettyprint">
&lt;ul class=&quot;table-view&quot;&gt;
&lt;li&gt;
Item 1
&lt;div class=&quot;toggle&quot;&gt;
&lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
Item 2
&lt;div class=&quot;toggle active&quot;&gt;
&lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
Item 3
&lt;div class=&quot;toggle&quot;&gt;
&lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
</pre>
{% highlight html %}
<ul class="table-view">
<li>
Item 1
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li>
Item 2
<div class="toggle active">
<div class="toggle-handle"></div>
</div>
</li>
<li>
Item 3
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
</ul>
{% endhighlight %}
</article>
@ -555,15 +557,15 @@ Item 3
</ul>
</div>
<pre class="prettyprint">
&lt;ul class=&quot;table-view inset&quot;&gt;
&lt;li&gt;Item 1&lt;/li&gt;
&lt;li&gt;Item 2&lt;/li&gt;
&lt;li class=&quot;table-view-divider&quot;&gt;Divider&lt;/li&gt;
&lt;li&gt;Item 3&lt;/li&gt;
&lt;li&gt;Item 4&lt;/li&gt;
&lt;/ul&gt;
</pre>
{% highlight html %}
<ul class="table-view inset">
<li>Item 1</li>
<li>Item 2</li>
<li class="table-view-divider">Divider</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
{% endhighlight %}
</article>
@ -579,12 +581,12 @@ Item 3
<a class="button-negative">Button</a>
</div>
<pre class="prettyprint">
&lt;a class=&quot;button&quot;&gt;Button&lt;/a&gt;
&lt;a class=&quot;button-primary&quot;&gt;Button&lt;/a&gt;
&lt;a class=&quot;button-positive&quot;&gt;Button&lt;/a&gt;
&lt;a class=&quot;button-negative&quot;&gt;Button&lt;/a&gt;
</pre>
{% highlight html %}
<a class="button">Button</a>
<a class="button-primary">Button</a>
<a class="button-positive">Button</a>
<a class="button-negative">Button</a>
{% endhighlight %}
</article>
@ -598,17 +600,17 @@ Item 3
<a class="button-negative">Count button<span class="count-negative count-filled">1</span></a>
</div>
<pre class="prettyprint">
&lt;a class=&quot;button&quot;&gt;Count button&lt;span class=&quot;count count-filled&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
&lt;a class=&quot;button-primary&quot;&gt;Count button&lt;span class=&quot;count-primary count-filled&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
&lt;a class=&quot;button-positive&quot;&gt;Count button&lt;span class=&quot;count-positive count-filled&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
&lt;a class=&quot;button-negative&quot;&gt;Count button&lt;span class=&quot;count-negative count-filled&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
{% highlight html %}
<a class="button">Count button<span class="count count-filled">1</span></a>
<a class="button-primary">Count button<span class="count-primary count-filled">1</span></a>
<a class="button-positive">Count button<span class="count-positive count-filled">1</span></a>
<a class="button-negative">Count button<span class="count-negative count-filled">1</span></a>
&lt;a class=&quot;button-filled&quot;&gt;Count button&lt;span class=&quot;count count-filled&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
&lt;a class=&quot;button-filled button-primary&quot;&gt;Count button&lt;span class=&quot;count-primary count-filled&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
&lt;a class=&quot;button-filled button-positive&quot;&gt;Count button&lt;span class=&quot;count-positive count-filled&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
&lt;a class=&quot;button-filled button-negative&quot;&gt;Count button&lt;span class=&quot;count-negative count-filled&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
</pre>
<a class="button-filled">Count button<span class="count count-filled">1</span></a>
<a class="button-filled button-primary">Count button<span class="count-primary count-filled">1</span></a>
<a class="button-filled button-positive">Count button<span class="count-positive count-filled">1</span></a>
<a class="button-filled button-negative">Count button<span class="count-negative count-filled">1</span></a>
{% endhighlight %}
</article>
@ -627,17 +629,17 @@ Item 3
<a class="button-negative button-block button-filled">Block button</a>
</div>
<pre class="prettyprint">
&lt;a class=&quot;button-block&quot;&gt;Block button&lt;/a&gt;
&lt;a class=&quot;button-primary button-block&quot;&gt;Block button&lt;/a&gt;
&lt;a class=&quot;button-positive button-block&quot;&gt;Block button&lt;/a&gt;
&lt;a class=&quot;button-negative button-block&quot;&gt;Block button&lt;/a&gt;
{% highlight html %}
<a class="button-block">Block button</a>
<a class="button-primary button-block">Block button</a>
<a class="button-positive button-block">Block button</a>
<a class="button-negative button-block">Block button</a>
&lt;a class=&quot;button-block button-filled&quot;&gt;Block button&lt;/a&gt;
&lt;a class=&quot;button-primary button-block button-filled&quot;&gt;Block button&lt;/a&gt;
&lt;a class=&quot;button-positive button-block button-filled&quot;&gt;Block button&lt;/a&gt;
&lt;a class=&quot;button-negative button-block button-filled&quot;&gt;Block button&lt;/a&gt;
</pre>
<a class="button-block button-filled">Block button</a>
<a class="button-primary button-block button-filled">Block button</a>
<a class="button-positive button-block button-filled">Block button</a>
<a class="button-negative button-block button-filled">Block button</a>
{% endhighlight %}
</article>
@ -671,30 +673,30 @@ Item 3
</ul>
</div>
<pre class="prettyprint">
&lt;ul class=&quot;segmented-controller&quot;&gt;
&lt;li class=&quot;active&quot;&gt;
&lt;a href=&quot;#item1&quot;&gt;Thing one&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;#item2&quot;&gt;Thing two&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;#item3&quot;&gt;Thing three&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class=&quot;inset table-view&quot;&gt;
&lt;li id=&quot;item1&quot; class=&quot;segmented-controller-item active&quot;&gt;
Item 1
&lt;/li&gt;
&lt;li id=&quot;item2&quot; class=&quot;segmented-controller-item&quot;&gt;
Item 2
&lt;/li&gt;
&lt;li id=&quot;item3&quot; class=&quot;segmented-controller-item&quot;&gt;
Item 3
&lt;/li&gt;
&lt;/ul&gt;
</pre>
{% highlight html %}
<ul class="segmented-controller">
<li class="active">
<a href="#item1mobile">Thing one</a>
</li>
<li>
<a href="#item2mobile">Thing two</a>
</li>
<li>
<a href="#item3mobile">Thing three</a>
</li>
</ul>
<ul class="inset table-view">
<li id="item1mobile" class="segmented-controller-item active">
Item 1
</li>
<li id="item2mobile" class="segmented-controller-item">
Item 2
</li>
<li id="item3mobile" class="segmented-controller-item">
Item 3
</li>
</ul>
{% endhighlight %}
</article>
@ -714,17 +716,19 @@ Item 3
<span class="count-negative count-filled">4</span>
</div>
<pre class="prettyprint">
&lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;
&lt;span class=&quot;count-primary&quot;&gt;2&lt;/span&gt;
&lt;span class=&quot;count-positive&quot;&gt;3&lt;/span&gt;
&lt;span class=&quot;count-negative&quot;&gt;4&lt;/span&gt;
&lt;span class=&quot;count count-filled&quot;&gt;1&lt;/span&gt;
&lt;span class=&quot;count-primary count-filled&quot;&gt;2&lt;/span&gt;
&lt;span class=&quot;count-positive count-filled&quot;&gt;3&lt;/span&gt;
&lt;span class=&quot;count-negative count-filled&quot;&gt;4&lt;/span&gt;
</pre>
{% highlight html %}
<span class="count">1</span>
<span class="count-primary">2</span>
<span class="count-positive">3</span>
<span class="count-negative">4</span>
<span class="count count-filled">1</span>
<span class="count-primary count-filled">2</span>
<span class="count-positive count-filled">3</span>
<span class="count-negative count-filled">4</span>
{% endhighlight %}
</article>
@ -741,14 +745,14 @@ Item 3
</form>
</div>
<pre class="prettyprint">
&lt;form&gt;
&lt;input type=&quot;text&quot; placeholder=&quot;Full name&quot;&gt;
&lt;input type=&quot;search&quot; placeholder=&quot;Search&quot;&gt;
&lt;textarea rows=&quot;5&quot;&gt;&lt;/textarea&gt;
&lt;a class=&quot;button-positive button-block button-filled&quot;&gt;Choose existing&lt;/a&gt;
&lt;/form&gt;
</pre>
{% highlight html %}
<form>
<input type="text" placeholder="Full name">
<input type="search" placeholder="Search">
<textarea rows="5"></textarea>
<a class="button-positive button-block button-filled">Choose existing</a>
</form>
{% endhighlight %}
</article>
@ -764,15 +768,13 @@ Item 3
</form>
</div>
<pre class="prettyprint">
&lt;form&gt;
&lt;div class=&quot;input-group&quot;&gt;
&lt;input type=&quot;text&quot; placeholder=&quot;Full name&quot;&gt;
&lt;input type=&quot;email&quot; placeholder=&quot;Email&quot;&gt;
&lt;input type=&quot;text&quot; placeholder=&quot;Username&quot;&gt;
&lt;/div&gt;
&lt;/form&gt;
</pre>
{% highlight html %}
<form class="input-group">
<input type="text" placeholder="Full name">
<input type="email" placeholder="Email">
<input type="text" placeholder="Username">
</form>
{% endhighlight %}
</article>
@ -797,24 +799,22 @@ Item 3
</form>
</div>
<pre class="prettyprint">
&lt;form&gt;
&lt;div class=&quot;input-group&quot;&gt;
&lt;div class=&quot;input-row&quot;&gt;
&lt;label&gt;Full name&lt;/label&gt;
&lt;input type=&quot;text&quot; placeholder=&quot;Mister Ratchet&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;input-row&quot;&gt;
&lt;label&gt;Email&lt;/label&gt;
&lt;input type=&quot;email&quot; placeholder=&quot;ratchetframework@gmail.com&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;input-row&quot;&gt;
&lt;label&gt;Username&lt;/label&gt;
&lt;input type=&quot;text&quot; placeholder=&quot;goRatchet&quot;&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/form&gt;
</pre>
{% highlight html %}
<form class="input-group">
<div class="input-row">
<label>Full name</label>
<input type="text" placeholder="Mister Ratchet">
</div>
<div class="input-row">
<label>Email</label>
<input type="email" placeholder="ratchetframework@gmail.com">
</div>
<div class="input-row">
<label>Username</label>
<input type="text" placeholder="goRatchet">
</div>
</form>
{% endhighlight %}
</article>
@ -832,23 +832,23 @@ Item 3
</div>
</div>
<pre class="prettyprint">
&lt;div class=&quot;toggle active&quot;&gt;
&lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;toggle&quot;&gt;
&lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
{% highlight html %}
<div class="toggle active">
<div class="toggle-handle"></div>
</div>
<div class="toggle">
<div class="toggle-handle"></div>
</div>
{% endhighlight %}
<p class="component-description">Toggles.js binds an event to the document that returns a detail object and can be used to fire a callback.</p>
<pre class="prettyprint js">
{% highlight js %}
// Only needed if you want to fire a callback
document
.querySelector('#myToggle')
.addEventListener('toggle', myFunction)
</pre>
{% endhighlight %}
</article>
@ -880,39 +880,39 @@ document
</div>
</div>
<pre class="prettyprint">
&lt;div id=&quot;myPopover&quot; class=&quot;popover&quot;&gt;
&lt;header class=&quot;bar-nav&quot;&gt;
&lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
Left
&lt;/a&gt;
&lt;h3 class=&quot;title&quot;&gt;Popover title&lt;/h3&gt;
&lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
Right
&lt;/a&gt;
&lt;/header&gt;
&lt;ul class=&quot;table-view&quot;&gt;
&lt;li&gt;Item1&lt;/li&gt;
&lt;li&gt;Item2&lt;/li&gt;
&lt;li&gt;Item3&lt;/li&gt;
&lt;li&gt;Item4&lt;/li&gt;
&lt;li&gt;Item5&lt;/li&gt;
&lt;li&gt;Item6&lt;/li&gt;
&lt;li&gt;Item7&lt;/li&gt;
&lt;li&gt;Item8&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</pre>
{% highlight html %}
<div id="popover" class="popover">
<header class="bar-nav">
<a class="button">
Left
</a>
<h3 class="title">Popover title</h3>
<a class="button">
Right
</a>
</header>
<ul class="table-view">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
<li>Item6</li>
<li>Item7</li>
<li>Item8</li>
</ul>
</div>
{% endhighlight %}
<p class="component-description">Popovers are designed to only fire from <a href="#bars">title bars</a>. Set the value of the title href to the id of a popover, like so:</p>
<pre class="prettyprint">
&lt;header class=&quot;bar-nav&quot;&gt;
&lt;a href=&quot;#myPopover&quot;&gt;
&lt;h1 class=&quot;title&quot;&gt;Title&lt;/h1&gt;
&lt;/a&gt;
&lt;/header&gt;
</pre>
{% highlight html %}
<header class="bar-nav">
<a href="#myPopover">
<h1 class="title">Popover title</h3>
</a>
</header>
{% endhighlight %}
</article>
@ -936,23 +936,21 @@ document
</div>
</div>
<pre class="prettyprint">
&lt;a href=&quot;#myModal&quot; class=&quot;button&quot;&gt;Open modal&lt;/a&gt;
&lt;div id=&quot;myModal&quot; class=&quot;modal&quot;&gt;
&lt;header class=&quot;bar-nav&quot;&gt;
&lt;h1 class=&quot;title&quot;&gt;Modal&lt;/h1&gt;
&lt;a class=&quot;button&quot; href=&quot;#myModal&quot;&gt;
Close
&lt;/a&gt;
&lt;/header&gt;
&lt;div class=&quot;content content-padded&quot;&gt;
&lt;p&gt;The contents of my modal.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
{% highlight html %}
<a href="#myModalexample" class="button">Open modal</a>
<div id="myModalexample" class="modal">
<header class="bar-nav">
<h1 class="title">Modal</h1>
<a class="button" href="#myModalexample">
Close
</a>
</header>
<div class="content content-padded">
<p>The contents of my modal</p>
</div>
</div>
{% endhighlight %}
<p class="component-description">Modals are designed to only fire from links. Set the value of the toggle links href to the id of a modal.</p>
@ -980,31 +978,31 @@ document
</div>
</div>
<pre class="prettyprint">
&lt;div class=&quot;slider&quot;&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;img src=&quot;assets/img/slide-1.jpg&quot;&gt;
&lt;span class=&quot;slide-text&quot;&gt;&larr; Slide me&lt;/span&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;img src=&quot;assets/img/slide-2.jpg&quot;&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;img src=&quot;assets/img/slide-3.jpg&quot;&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</pre>
{% highlight html %}
<div class="slider" id="mySlider">
<ul>
<li>
<img src="assets/img/slide-1.jpg">
<span class="slide-text">&larr; Slide me</span>
</li>
<li>
<img src="assets/img/slide-2.jpg">
</li>
<li>
<img src="assets/img/slide-3.jpg">
</li>
</ul>
</div>
{% endhighlight %}
<p class="component-description">Sliders.js binds an event to the document that returns a detail object and can be used to fire a callback.</p>
<pre class="prettyprint js">
{% highlight js %}
// Only needed if you want to fire a callback
document
.querySelector('#mySlider')
.addEventListener('slide', myFunction)
</pre>
{% endhighlight %}
</article>
@ -1013,19 +1011,19 @@ document
<h3 class="component-title">Push</h3>
<p class="component-description">Push.js is the engine that connects Ratchet pages together with AJAX and the history api. Push.js is listening to all clicks on a page, so just make sure it's included and link something in your Ratchet project up.</p>
<pre class="prettyprint js">
&lt;!-- A one.html link --&gt;
&lt;a href=&quot;two.html&quot;&gt;Two&lt;a&gt;
</pre>
{% highlight html %}
<!-- A one.html link -->
<a href="two.html">Two<a>
{% endhighlight %}
<p class="component-note">This will use push to replace everything in the .content div with the .content of two.html. Also, it will either update or remove .bar-nav and .bar-tab according to their presences in two.html.</p>
<p class="component-description">Now that pages are being loaded through push, it's easy to specify transitions for animations between pages. There are three different transitions to chose from: <code>fade</code>, <code>slide-in</code>, or <code>slide-out</code>.</p>
<pre class="prettyprint js">
&lt;!-- An one.html link that animates to two.html --&gt;
&lt;a href=&quot;two.html&quot; data-transition=&quot;fade&quot;&gt;Two&lt;a&gt;
</pre>
{% highlight html %}
<!-- An one.html link that animates to two.html -->
<a href="two.html" data-transition="fade">Two<a>
{% endhighlight %}
<p class="component-description">A working version of push:</p>
@ -1045,35 +1043,35 @@ document
</div>
</div>
<pre class="prettyprint push-example">
&lt;header class=&quot;bar-nav&quot;&gt;
&lt;h1 class=&quot;title&quot;&gt;Push&lt;/h1&gt;
&lt;/header&gt;
&lt;div class=&quot;content&quot;&gt;
&lt;ul class=&quot;table-view&quot;&gt;
&lt;li&gt;
&lt;a href=&quot;two.html&quot; data-transition=&quot;slide-in&quot;&gt;
Go to page 2
&lt;/a&gt;
&lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</pre>
{% highlight html %}
<header class="bar-nav">
<h1 class="title">Push</h1>
</header>
<div class="content">
<ul class="table-view">
<li>
<a href="two.html" data-transition="slide-in">
Load new page with push
</a>
<span class="chevron"></span>
</li>
</ul>
</div>
{% endhighlight %}
<p class="component-description">Have a link you don't want to intercepted by push? Try this:</p>
<pre class="prettyprint js">
&lt;!-- Use data-ignore=&quot;push&quot; to prevent the push.js interception --&gt;
&lt;a href=&quot;http://www.google.com&quot; data-ignore=&quot;push&quot;&gt;Google&lt;a&gt;
</pre>
{% highlight html %}
<!-- Use data-ignore="push" to prevent the push.js interception -->
<a href="http://www.google.com" data-ignore="push">Google<a>
{% endhighlight %}
<p class="component-description">Push.js binds an event to the document that returns a detail object and can be used to fire a callback.</p>
<pre class="prettyprint js">
{% highlight js %}
// Only needed if you want to fire a callback
window.addEventListener('push', myFunction);
</pre>
{% endhighlight %}
</article>

Loading…
Cancel
Save