diff --git a/_includes/header.html b/_includes/header.html index 37ec4d0..543817b 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -8,7 +8,7 @@ - + @@ -16,7 +16,6 @@ - diff --git a/assets/css/docs.css b/assets/css/docs.css index f2ccc67..f762fd6 100644 --- a/assets/css/docs.css +++ b/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; } diff --git a/assets/css/prettify.css b/assets/css/prettify.css deleted file mode 100644 index 1266970..0000000 --- a/assets/css/prettify.css +++ /dev/null @@ -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} \ No newline at end of file diff --git a/assets/js/docs.js b/assets/js/docs.js index cdb872c..87db5bd 100644 --- a/assets/js/docs.js +++ b/assets/js/docs.js @@ -15,8 +15,6 @@ $(function() { var topCache; var eventListeners; - prettyPrint(); - var initialize = function () { currentActive = 0; topCache = []; diff --git a/assets/js/prettify.js b/assets/js/prettify.js deleted file mode 100644 index eef5ad7..0000000 --- a/assets/js/prettify.js +++ /dev/null @@ -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;c122||(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;ci[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=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=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=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=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*=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",/^[^]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^]*>([\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=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 -
-<header class="bar-nav">
-<h1 class="title">Title</h1>
-</header>
-
+{% highlight html %} +
+

Title

+
+{% endhighlight %} @@ -91,17 +91,17 @@ layout: default -
-<header class="bar-nav">
-<a class="button" href="#">
-Left
-</a>
-<h1 class="title">Title</h1>
-<a class="button" href="#">
-Right
-</a>
-</header>
-
+{% highlight html %} +
+ + Left + +

Title

+ + Right + +
+{% endhighlight %}
@@ -120,17 +120,17 @@ Right -
-<header class="bar-nav">
-<a class="button-prev" href="#">
-Previous
-</a>
-<h1 class="title">Title</h1>
-<a class="button-next" href="#">
-Next
-</a>
-</header>
-
+{% highlight html %} +
+ + Previous + +

Title

+ + Next + +
+{% endhighlight %}
@@ -160,27 +160,27 @@ Next -
-<header class="bar-nav">
-<a class="button" href="#">
-Left
-</a>
-<ul class="segmented-controller">
-<li class="active">
-  <a href="#">One</a>
-</li>
-<li>
-  <a href="#">Two</a>
-</li>
-<li>
-  <a href="#">Three</a>
-</li>
-</ul>
-<a class="button" href="#">
-Right
-</a>
-</header>
-
+{% highlight html %} +
+ + Left + + + + Right + +
+{% endhighlight %} @@ -225,42 +225,42 @@ Right -
-<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>
-
+{% highlight html %} + +{% endhighlight %}

Note: Use push.js to actually change content.

@@ -291,25 +291,27 @@ Right -
-<!-- Segmented controller in standard bar fixed to top -->
-<nav class="bar-standard">
-<ul class="segmented-controller">
-<li class="active">
-  <a href="#">Thing one</a>
-</li>
-<li>
-  <a href="#">Thing two</a>
-</li>
-<li>
-  <a href="#">Thing three</a>
-</li>
-</ul>
-</nav>
-<div class="bar-standard bar-header-secondary">
-<a class="button-block">Block level button</a>
-</div>
-
+{% highlight html %} + + + + +
+ Block level button +
+{% endhighlight %} @@ -327,14 +329,14 @@ Right -
-<ul class="table-view">
-<li>Item 1</li>
-<li>Item 2</li>
-<li class="table-view-divider">Divider</li>
-<li>Item 3</li>
-</ul>
-
+{% highlight html %} +
    +
  • Item 1
    • +
  • Item 2
    • +
  • Divider
    • +
  • Item 3
    • +
+{% endhighlight %} @@ -365,28 +367,28 @@ Right -
-<ul class="table-view">
-<li>
-<a href="#">
-  Item 1
-  <span class="chevron"></span>
-</a>
-</li>
-<li>
-<a href="#">
-  Item 2
-  <span class="chevron"></span>
-</a>
-</li>
-<li>
-<a href="#">
-  Item 3
-  <span class="chevron"></span>
-</a>
-</li>
-</ul>
-
+{% highlight html %} + +{% endhighlight %} @@ -401,13 +403,13 @@ Right -
-<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>
-
+{% highlight html %} +
    +
  • Item 1 4
    • +
  • Item 2 1
    • +
  • Item 3 5
    • +
+{% endhighlight %} @@ -440,31 +442,31 @@ Right -
-<ul class="table-view">
-<li>
-<a href="#">
-  Item 1
-  <span class="chevron"></span>
-  <span class="count">4</span>
-</a>
-</li>
-<li>
-<a href="#">
-  Item 2
-  <span class="chevron"></span>
-  <span class="count">1</span>
-</a>
-</li>
-<li>
-<a href="#">
-  Item 3
-  <span class="chevron"></span>
-  <span class="count">5</span>
-</a>
-</li>
-</ul>
-
+{% highlight html %} + +{% endhighlight %} @@ -480,14 +482,14 @@ Right -
-<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>
-
+{% highlight html %} + +{% endhighlight %} @@ -517,28 +519,28 @@ Right -
-<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>
-
+{% highlight html %} +
    +
  • + Item 1 +
    +
    +
    +
    • +
  • + Item 2 +
    +
    +
    +
    • +
  • + Item 3 +
    +
    +
    +
    • +
+{% endhighlight %} @@ -555,15 +557,15 @@ Item 3 -
-<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>
-
+{% highlight html %} +
    +
  • Item 1
    • +
  • Item 2
    • +
  • Divider
    • +
  • Item 3
    • +
  • Item 4
    • +
+{% endhighlight %} @@ -579,12 +581,12 @@ Item 3 Button -
-<a class="button">Button</a>
-<a class="button-primary">Button</a>
-<a class="button-positive">Button</a>
-<a class="button-negative">Button</a>
-
+{% highlight html %} +Button +Button +Button +Button +{% endhighlight %} @@ -598,17 +600,17 @@ Item 3 Count button1 -
-<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>
+{% highlight html %}
+Count button1
+Count button1
+Count button1
+Count button1
 
-<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>
-
+Count button1 +Count button1 +Count button1 +Count button1 +{% endhighlight %} @@ -627,17 +629,17 @@ Item 3 Block button -
-<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>
+{% highlight html %}
+Block button
+Block button
+Block button
+Block button
 
-<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>
-
+Block button +Block button +Block button +Block button +{% endhighlight %} @@ -671,30 +673,30 @@ Item 3 -
-<ul class="segmented-controller">
-<li class="active">
-<a href="#item1">Thing one</a>
-</li>
-<li>
-<a href="#item2">Thing two</a>
-</li>
-<li>
-<a href="#item3">Thing three</a>
-</li>
-</ul>
-<ul class="inset table-view">
-<li id="item1" class="segmented-controller-item active">
-Item 1
-</li>
-<li id="item2" class="segmented-controller-item">
-Item 2
-</li>
-<li id="item3" class="segmented-controller-item">
-Item 3
-</li>
-</ul>
-
+{% highlight html %} + +
    +
  • + Item 1 +
    • +
  • + Item 2 +
    • +
  • + Item 3 +
    • +
+{% endhighlight %} @@ -714,17 +716,19 @@ Item 3 4 -
-<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>
-
+{% highlight html %} +1 +2 +3 +4 + +1 +2 +3 +4 +{% endhighlight %} + @@ -741,14 +745,14 @@ Item 3 -
-<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>
-
+{% highlight html %} +
+ + + + Choose existing +
+{% endhighlight %} @@ -764,15 +768,13 @@ Item 3 -
-<form>
-<div class="input-group">
-<input type="text" placeholder="Full name">
-<input type="email" placeholder="Email">
-<input type="text" placeholder="Username">
-</div>
-</form>
-
+{% highlight html %} +
+ + + +
+{% endhighlight %} @@ -797,24 +799,22 @@ Item 3 -
-<form>
-<div 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>
-</div>
-</form>
-
+{% highlight html %} +
+
+ + +
+
+ + +
+
+ + +
+
+{% endhighlight %} @@ -832,23 +832,23 @@ Item 3 -
-<div class="toggle active">
-<div class="toggle-handle"></div>
-</div>
-<div class="toggle">
-<div class="toggle-handle"></div>
-</div>
-
+{% highlight html %} +
+
+
+
+
+
+{% endhighlight %}

Toggles.js binds an event to the document that returns a detail object and can be used to fire a callback.

-
+{% highlight js %}
 // Only needed if you want to fire a callback
 document
 .querySelector('#myToggle')
 .addEventListener('toggle', myFunction)
-
+{% endhighlight %} @@ -880,39 +880,39 @@ document -
-<div id="myPopover" class="popover">
-<header class="bar-nav">
-<a class="button" href="#">
-  Left
-</a>
-<h3 class="title">Popover title</h3>
-<a class="button" href="#">
-  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>
-
+{% highlight html %} +
+
+ + Left + +

Popover title

+ + Right + +
+
    +
  • Item1
    • +
  • Item2
    • +
  • Item3
    • +
  • Item4
    • +
  • Item5
    • +
  • Item6
    • +
  • Item7
    • +
  • Item8
    • +
+
+{% endhighlight %}

Popovers are designed to only fire from title bars. Set the value of the title href to the id of a popover, like so:

-
-<header class="bar-nav">
-<a href="#myPopover">
-<h1 class="title">Title</h1>
-</a>
-</header>
-
+{% highlight html %} +
+ +

Popover title

+ +
+{% endhighlight %} @@ -936,23 +936,21 @@ document - -
-<a href="#myModal" class="button">Open modal</a>
-
-<div id="myModal" class="modal">
-<header class="bar-nav">
-<h1 class="title">Modal</h1>
-<a class="button" href="#myModal">
-  Close
-</a>
-</header>
-
-<div class="content content-padded">
-<p>The contents of my modal.</p>
-</div>
-</div>
-
+{% highlight html %} +Open modal + +{% endhighlight %}

Modals are designed to only fire from links. Set the value of the toggle links href to the id of a modal.

@@ -980,31 +978,31 @@ document -
-<div class="slider">
-<ul>
-<li>
-  <img src="assets/img/slide-1.jpg">
-  <span class="slide-text">← Slide me</span>
-</li>
-<li>
-  <img src="assets/img/slide-2.jpg">
-</li>
-<li>
-  <img src="assets/img/slide-3.jpg">
-</li>
-</ul>
-</div>
-
+{% highlight html %} +
+
    +
  • + + ← Slide me +
    • +
  • + +
    • +
  • + +
    • +
+
+{% endhighlight %}

Sliders.js binds an event to the document that returns a detail object and can be used to fire a callback.

-
+{% highlight js %}
 // Only needed if you want to fire a callback
 document
 .querySelector('#mySlider')
 .addEventListener('slide', myFunction)
-
+{% endhighlight %} @@ -1013,19 +1011,19 @@ document

Push

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.

-
-<!-- A one.html link -->
-<a href="two.html">Two<a>
-
+{% highlight html %} + +Two +{% endhighlight %}

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.

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: fade, slide-in, or slide-out.

-
-<!-- An one.html link that animates to two.html -->
-<a href="two.html" data-transition="fade">Two<a>
-
+{% highlight html %} + +Two +{% endhighlight %}

A working version of push:

@@ -1045,35 +1043,35 @@ document -
-<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">
-          Go to page 2
-      </a>
-      <span class="chevron"></span>
-  </li>
-</ul>
-</div>
-
+{% highlight html %} +
+

Push

+
+
+ +
+{% endhighlight %}

Have a link you don't want to intercepted by push? Try this:

-
-<!-- Use data-ignore="push" to prevent the push.js interception -->
-<a href="http://www.google.com" data-ignore="push">Google<a>
-
+{% highlight html %} + +Google +{% endhighlight %}

Push.js binds an event to the document that returns a detail object and can be used to fire a callback.

-
+{% highlight js %}
 // Only needed if you want to fire a callback
 window.addEventListener('push', myFunction);
-
+{% endhighlight %}