From acb5a47833e867dacdbb23e008f1c695b68f0fc1 Mon Sep 17 00:00:00 2001 From: Luke Askew Date: Thu, 2 Apr 2015 21:30:35 -0400 Subject: [PATCH 01/51] intial commit --- .editorconfig | 17 + .gitattributes | 1 + .gitignore | 2 + .jshintrc | 22 + LICENSE.md | 7 + README.md | 61 +- dist/assets/fabricator/scripts/f.js | 1 + dist/assets/fabricator/styles/f.css | 1 + dist/assets/toolkit/scripts/toolkit.js | 1 + dist/assets/toolkit/styles/toolkit.css | 1 + dist/components.html | 533 +++++++++++++++++ dist/docs.html | 164 +++++ dist/favicon.ico | Bin 0 -> 17542 bytes dist/index.html | 209 +++++++ dist/pages.html | 162 +++++ dist/pages/home.html | 39 ++ dist/structures.html | 189 ++++++ gulpfile.js | 168 ++++++ index.html | 1 - package.json | 53 ++ recipes/bower.md | 28 + recipes/vendor-scripts.md | 62 ++ src/assets/fabricator/scripts/fabricator.js | 320 ++++++++++ src/assets/fabricator/scripts/prism.js | 558 ++++++++++++++++++ src/assets/fabricator/styles/fabricator.scss | 13 + .../fabricator/styles/partials/_code.scss | 124 ++++ .../styles/partials/_color-chips.scss | 25 + .../fabricator/styles/partials/_controls.scss | 60 ++ .../fabricator/styles/partials/_item.scss | 89 +++ .../fabricator/styles/partials/_main.scss | 50 ++ .../fabricator/styles/partials/_menu.scss | 101 ++++ .../styles/partials/_variables.scss | 45 ++ src/assets/toolkit/scripts/toolkit.js | 5 + src/assets/toolkit/styles/toolkit.scss | 7 + src/data/home.json | 3 + src/docs/javascript.md | 5 + src/favicon.ico | Bin 0 -> 17542 bytes src/materials/components/button.html | 5 + src/materials/components/checkbox.html | 3 + src/materials/components/lists/ordered.html | 5 + src/materials/components/lists/unordered.html | 5 + src/materials/components/paragraph.html | 1 + src/materials/components/radio.html | 11 + src/materials/components/select.html | 7 + src/materials/components/table.html | 38 ++ src/materials/components/text-input.html | 2 + src/materials/components/textarea.html | 1 + src/materials/structures/form.html | 6 + src/views/components.html | 11 + src/views/docs.html | 14 + src/views/index.html | 61 ++ src/views/layouts/default.html | 49 ++ src/views/layouts/includes/f-icons.html | 16 + .../layouts/includes/f-item-content.html | 9 + .../layouts/includes/f-item-controls.html | 12 + src/views/layouts/includes/f-item.html | 22 + src/views/layouts/includes/f-menu.html | 70 +++ src/views/pages.html | 15 + src/views/pages/home.html | 7 + src/views/structures.html | 11 + 60 files changed, 3506 insertions(+), 2 deletions(-) create mode 100644 .editorconfig create mode 100755 .gitattributes create mode 100755 .gitignore create mode 100755 .jshintrc create mode 100755 LICENSE.md mode change 100644 => 100755 README.md create mode 100755 dist/assets/fabricator/scripts/f.js create mode 100755 dist/assets/fabricator/styles/f.css create mode 100644 dist/assets/toolkit/scripts/toolkit.js create mode 100755 dist/assets/toolkit/styles/toolkit.css create mode 100644 dist/components.html create mode 100644 dist/docs.html create mode 100755 dist/favicon.ico create mode 100644 dist/index.html create mode 100644 dist/pages.html create mode 100644 dist/pages/home.html create mode 100644 dist/structures.html create mode 100755 gulpfile.js delete mode 100644 index.html create mode 100644 package.json create mode 100755 recipes/bower.md create mode 100755 recipes/vendor-scripts.md create mode 100755 src/assets/fabricator/scripts/fabricator.js create mode 100755 src/assets/fabricator/scripts/prism.js create mode 100755 src/assets/fabricator/styles/fabricator.scss create mode 100755 src/assets/fabricator/styles/partials/_code.scss create mode 100755 src/assets/fabricator/styles/partials/_color-chips.scss create mode 100755 src/assets/fabricator/styles/partials/_controls.scss create mode 100755 src/assets/fabricator/styles/partials/_item.scss create mode 100755 src/assets/fabricator/styles/partials/_main.scss create mode 100755 src/assets/fabricator/styles/partials/_menu.scss create mode 100755 src/assets/fabricator/styles/partials/_variables.scss create mode 100755 src/assets/toolkit/scripts/toolkit.js create mode 100755 src/assets/toolkit/styles/toolkit.scss create mode 100755 src/data/home.json create mode 100755 src/docs/javascript.md create mode 100755 src/favicon.ico create mode 100755 src/materials/components/button.html create mode 100755 src/materials/components/checkbox.html create mode 100755 src/materials/components/lists/ordered.html create mode 100755 src/materials/components/lists/unordered.html create mode 100755 src/materials/components/paragraph.html create mode 100755 src/materials/components/radio.html create mode 100755 src/materials/components/select.html create mode 100755 src/materials/components/table.html create mode 100755 src/materials/components/text-input.html create mode 100755 src/materials/components/textarea.html create mode 100755 src/materials/structures/form.html create mode 100755 src/views/components.html create mode 100755 src/views/docs.html create mode 100755 src/views/index.html create mode 100755 src/views/layouts/default.html create mode 100755 src/views/layouts/includes/f-icons.html create mode 100755 src/views/layouts/includes/f-item-content.html create mode 100755 src/views/layouts/includes/f-item-controls.html create mode 100755 src/views/layouts/includes/f-item.html create mode 100755 src/views/layouts/includes/f-menu.html create mode 100755 src/views/pages.html create mode 100755 src/views/pages/home.html create mode 100755 src/views/structures.html diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..4c218a0 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,17 @@ +# http://editorconfig.org +root = true + +[*] +charset = utf-8 +end_of_line = lf +indent_size = 4 +indent_style = tab +insert_final_newline = true +trim_trailing_whitespace = true + +[*.md] +trim_trailing_whitespace = false + +[{*.json,*.yml}] +indent_size = 2 +indent_style = space diff --git a/.gitattributes b/.gitattributes new file mode 100755 index 0000000..2125666 --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +* text=auto \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100755 index 0000000..5455e0c --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules +.sass-cache diff --git a/.jshintrc b/.jshintrc new file mode 100755 index 0000000..eeafae8 --- /dev/null +++ b/.jshintrc @@ -0,0 +1,22 @@ +{ + "boss": true, + "browser": true, + "curly": true, + "debug": true, + "devel": true, + "eqeqeq": true, + "expr": true, + "forin": true, + "immed": true, + "noarg": true, + "node": true, + "noempty": true, + "nonew": true, + "strict": true, + "trailing": true, + "undef": true, + "unused": true, + "predef": [ + "Prism" + ] +} \ No newline at end of file diff --git a/LICENSE.md b/LICENSE.md new file mode 100755 index 0000000..1dd5ba7 --- /dev/null +++ b/LICENSE.md @@ -0,0 +1,7 @@ +Copyright (c) 2014 Resource LLC + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/README.md b/README.md old mode 100644 new mode 100755 index 4509c00..592d28a --- a/README.md +++ b/README.md @@ -1 +1,60 @@ -# fbrctr.github.io +[![devDependency Status](https://david-dm.org/resource/fabricator/dev-status.svg?style=flat)](https://david-dm.org/resource/fabricator#info=devDependencies) + +![Fabricator](http://resource.github.io/fabricator/fb.jpg) + +# Fabricator + +> _fabricate_ - to make by assembling parts or sections. + +Fabricator is a tool for creating modular website toolkits - _think ["Tiny Bootstraps, for Every Client"](http://daverupert.com/2013/04/responsive-deliverables/#tiny-bootstraps-for-every-client)_ + +## Usage + +### 1. Download + +Each toolkit starts with a new instance of Fabricator. Grab the latest: + +```shell +$ curl -L https://github.com/resource/fabricator/archive/master.tar.gz | tar zx --strip 1 +``` + +Alternatively, you can scaffold a toolkit using the [Yeoman](http://yeoman.io) generator: + +```shell +$ npm install -g generator-fabricator +$ yo fabricator +``` + +### 2. Develop + +Start development environment: + +```shell +$ npm start +``` + +### 3. Build + +When you're ready to ship: + +```shell +$ npm run build +``` + +## Documentation + +[Check out the wiki](https://github.com/resource/fabricator/wiki). + +## Credits + +Created by [Luke Askew](http://lukeaskew.com). + +Logo by Tim Vonderloh. + +Icons borrowed from [SteadySets](http://dribbble.com/shots/929153-Steady-set-of-icons?list=show) and [Font Awesome](http://fortawesome.github.io/Font-Awesome/). + +Code syntax highlighting by [Prism](http://prismjs.com/). + +## License + +[Copyright (c) 2014 Resource LLC](https://github.com/resource/fabricator/blob/master/LICENSE.md) diff --git a/dist/assets/fabricator/scripts/f.js b/dist/assets/fabricator/scripts/f.js new file mode 100755 index 0000000..417cf46 --- /dev/null +++ b/dist/assets/fabricator/scripts/f.js @@ -0,0 +1 @@ +!function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var r=t.util.type(e);switch(r){case"Object":var a={};for(var n in e)e.hasOwnProperty(n)&&(a[n]=t.util.clone(e[n]));return a;case"Array":return e.slice()}return e}},languages:{extend:function(e,r){var a=t.util.clone(t.languages[e]);for(var n in r)a[n]=r[n];return a},insertBefore:function(e,r,a,n){n=n||t.languages;var o=n[e],i={};for(var l in o)if(o.hasOwnProperty(l)){if(l==r)for(var s in a)a.hasOwnProperty(s)&&(i[s]=a[s]);i[l]=o[l]}return n[e]=i},DFS:function(e,r){for(var a in e)r.call(e,a,e[a]),"Object"===t.util.type(e)&&t.languages.DFS(e[a],r)}},highlightAll:function(e,r){for(var a,n=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'),o=0;a=n[o++];)t.highlightElement(a,e===!0,r)},highlightElement:function(a,n,o){for(var i,l,s=a;s&&!e.test(s.className);)s=s.parentNode;if(s&&(i=(s.className.match(e)||[,""])[1],l=t.languages[i]),l){a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+i,s=a.parentNode,/pre/i.test(s.nodeName)&&(s.className=s.className.replace(e,"").replace(/\s+/g," ")+" language-"+i);var c=a.textContent;if(c){c=c.replace(/&/g,"&").replace(/e.length)break e;if(!(f instanceof a)){l.lastIndex=0;var d=l.exec(f);if(d){c&&(g=d[1].length);var m=d.index-1+g,d=d[0].slice(g),p=d.length,h=m+p,v=f.slice(0,m+1),b=f.slice(h+1),y=[u,1];v&&y.push(v);var w=new a(i,s?t.tokenize(d,s):d);y.push(w),b&&y.push(b),Array.prototype.splice.apply(n,y)}}}}return n},hooks:{all:{},add:function(e,r){var a=t.hooks.all;a[e]=a[e]||[],a[e].push(r)},run:function(e,r){var a=t.hooks.all[e];if(a&&a.length)for(var n,o=0;n=a[o++];)n(r)}}},r=t.Token=function(e,t){this.type=e,this.content=t};if(r.stringify=function(e,a,n){if("string"==typeof e)return e;if("[object Array]"==Object.prototype.toString.call(e))return e.map(function(t){return r.stringify(t,a,e)}).join("");var o={type:e.type,content:r.stringify(e.content,a,n),tag:"span",classes:["token",e.type],attributes:{},language:a,parent:n};"comment"==o.type&&(o.attributes.spellcheck="true"),t.hooks.run("wrap",o);var i="";for(var l in o.attributes)i+=l+'="'+(o.attributes[l]||"")+'"';return"<"+o.tag+' class="'+o.classes.join(" ")+'" '+i+">"+o.content+""},!self.document)return void self.addEventListener("message",function(e){var r=JSON.parse(e.data),a=r.language,n=r.code;self.postMessage(JSON.stringify(t.tokenize(n,t.languages[a]))),self.close()},!1);var a=document.getElementsByTagName("script");a=a[a.length-1],a&&(t.filename=a.src,document.addEventListener&&!a.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll))}(),Prism.languages.markup={comment:/<!--[\w\W]*?-->/g,prolog:/<\?.+?\?>/,doctype:/<!DOCTYPE.+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|\w+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/&#?[\da-z]{1,8};/gi},Prism.hooks.add("wrap",function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))}),Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/gi,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,ignore:/&(lt|gt|amp);/gi,punctuation:/[\{\};:]/g},Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/(<|<)style[\w\W]*?(>|>)[\w\W]*?(<|<)\/style(>|>)/gi,inside:{tag:{pattern:/(<|<)style[\w\W]*?(>|>)|(<|<)\/style(>|>)/gi,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}}),Prism.languages.clike={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:class|interface|extends|implements|trait|instanceof|new)\s+)[a-z0-9_\.\\]+/gi,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/gi,inside:{punctuation:/\(/}},number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|=?<|=?>|={1,2}|(&){1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g},Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(var|let|if|else|while|do|for|return|in|instanceof|function|new|with|typeof|try|catch|finally|null|break|continue)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(<|<)script[\w\W]*?(>|>)[\w\W]*?(<|<)\/script(>|>)/gi,inside:{tag:{pattern:/(<|<)script[\w\W]*?(>|>)|(<|<)\/script(>|>)/gi,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}}),function(){if(self.Prism&&self.document&&document.querySelector){var e={js:"javascript",html:"markup",svg:"markup"};Array.prototype.slice.call(document.querySelectorAll("pre[data-src]")).forEach(function(t){var r=t.getAttribute("data-src"),a=(r.match(/\.(\w+)$/)||[,""])[1],n=e[a]||a,o=document.createElement("code");o.className="language-"+n,t.textContent="",o.textContent="Loading…",t.appendChild(o);var i=new XMLHttpRequest;i.open("GET",r,!0),i.onreadystatechange=function(){4==i.readyState&&(i.status<400&&i.responseText?(o.textContent=i.responseText,Prism.highlightElement(o)):o.textContent=i.status>=400?"✖ Error "+i.status+" while fetching file: "+i.statusText:"✖ Error: File does not exist or is empty")},i.send(null)})}}();var fabricator=window.fabricator={};fabricator.options={toggles:{details:!0,notes:!0,code:!1}},fabricator.test={},fabricator.test.localStorage=function(){var e="_f";try{return localStorage.setItem(e,e),localStorage.removeItem(e),!0}catch(t){return!1}}(),fabricator.test.localStorage&&(localStorage.fabricator=localStorage.fabricator||JSON.stringify(fabricator.options)),fabricator.dom={primaryMenu:document.querySelector(".f-menu"),menuItems:document.querySelectorAll(".f-menu li a"),menuToggle:document.querySelector(".f-menu-toggle")},fabricator.buildColorChips=function(){for(var e,t=document.querySelectorAll(".f-color-chip"),r=t.length-1;r>=0;r--)e=t[r].querySelector(".f-color-chip__color").innerHTML,t[r].style.borderTopColor=e,t[r].style.borderBottomColor=e;return this},fabricator.setActiveItem=function(){var e=function(){for(var e,t,r=[],a=fabricator.dom.menuItems.length-1;a>=0;a--)fabricator.dom.menuItems[a].classList.remove("f-active"),t=fabricator.dom.menuItems[a].getAttribute("href"),e=t.indexOf("#")>-1?t.split("#").pop():t.split("/").pop().replace(/\.[^/.]+$/,""),r.push(e);return r.reverse()},t=function(){var t,r,a=window.location.href,n=e();t=a.indexOf("#")>-1?window.location.hash.replace("#",""):window.location.pathname.split("/").pop().replace(/\.[^/.]+$/,""),""===t&&(t="index"),r=n.indexOf(t)>-1?n.indexOf(t):0,fabricator.dom.menuItems[r].classList.add("f-active")};return window.addEventListener("hashchange",t),t(),this},fabricator.primaryMenuControls=function(){var e=fabricator.dom.menuToggle,t=function(){document.querySelector("html").classList.toggle("state--menu-active")};e.addEventListener("click",function(){t()});for(var r=function(){t()},a=0;a=0;r--)e[r].addEventListener("click",t.bind(this,e[r]))},function(){fabricator.primaryMenuControls().allItemsToggles().singleItemToggle().buildColorChips().setActiveItem().bindCodeAutoSelect(),Prism.highlightAll()}(); \ No newline at end of file diff --git a/dist/assets/fabricator/styles/f.css b/dist/assets/fabricator/styles/f.css new file mode 100755 index 0000000..1c9ebed --- /dev/null +++ b/dist/assets/fabricator/styles/f.css @@ -0,0 +1 @@ +code,code[class*='language-'],pre[class*='language-']{color:#333;text-align:left;white-space:pre;word-spacing:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;font-family:Consolas,'Liberation Mono',Menlo,Courier,monospace;line-height:1.4;direction:ltr;cursor:text}pre[class*='language-']{overflow:auto;margin:1em 0;padding:1.2em;border-radius:3px;font-size:85%}p code,li code,table code{margin:0;border-radius:3px;padding:.2em 0;font-size:85%}p code:before,p code:after,li code:before,li code:after,table code:before,table code:after{letter-spacing:-.2em;content:'\00a0'}code,:not(pre)>code[class*='language-'],pre[class*='language-']{background:#f7f7f7}:not(pre)>code[class*='language-']{padding:.1em;border-radius:.3em}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#969896}.token.punctuation,.token.string,.token.atrule,.token.attr-value{color:#183691}.token.property,.token.tag{color:#63a35c}.token.boolean,.token.number{color:#0086b3}.token.selector,.token.attr-name,.token.attr-value .punctuation:first-child,.token.keyword,.token.regex,.token.important{color:#a71d5d}.token.operator,.token.entity,.token.url,.language-css .token.string{color:#a71d5d}.token.entity{cursor:help}.namespace{opacity:.7}.f-color-chip{padding:1em;min-width:9em;border-top-width:9em;border-top-style:solid;border-bottom-width:.5em;border-bottom-style:solid;background-color:#fff;font-weight:700;font-size:.75em;display:inline-block;margin-right:1em;margin-bottom:2em}.f-color-chip .f-color-chip__color{background-color:#fff;content:attr(data-color);font-weight:400}.f-color-chip--primary{width:12em;border-top-width:13em}.f-menu{position:fixed;top:0;right:0;z-index:0;overflow-x:hidden;overflow-y:auto;width:14rem;height:100%;background-color:#fff;font-size:16px!important;font-family:sans-serif!important}@media (min-width:60em){.f-menu{right:auto;left:0}}.state--menu-active .f-menu{visibility:visible;-webkit-overflow-scrolling:touch}.f-menu ul{margin-top:0;margin-bottom:0;padding-left:0}.f-menu>ul{margin-bottom:1em}.f-menu>ul>li>a{margin-top:1em}.f-menu li{list-style-type:none;margin-top:0;margin-bottom:0}.f-menu a{display:block;padding:.75em 3em;color:#5c5c5c!important;text-decoration:none;font-size:.75em;line-height:1;-webkit-transition:background-color 200ms;transition:background-color 200ms}.f-menu a:hover{color:#5c5c5c!important;text-decoration:none;font-weight:400}.f-menu a.f-active{font-weight:700;color:#1f1f1f!important}.f-menu .f-menu__heading{padding-left:2em;color:#5c5c5c!important;font-weight:700}.f-menu .f-menu__heading:hover{color:#5c5c5c;font-weight:700}.f-controls-menu{border-top:1px solid #5c5c5c}.f-menu-bar:after{clear:both}.f-menu-bar:before,.f-menu-bar:after{display:table;content:' '}.f-menu-toggle{float:right;border:0;cursor:pointer}.f-menu-toggle svg{width:2em;height:2em}@media (min-width:60em){.f-menu-toggle{display:none}}html{height:100%}@media (max-width:60em){html.state--menu-active{overflow:hidden}}body{margin:0;min-height:100%}@media (max-width:60em){.state--menu-active body{width:100%;height:100%}}.f-container{-webkit-transition:all 350ms cubic-bezier(.86,0,.07,1)0;transition:all 350ms cubic-bezier(.86,0,.07,1)0s;position:relative;z-index:1;margin-left:0;background-color:#fff;-webkit-transform:translateZ(0);transform:translateZ(0)}.f-container:after{clear:both}.f-container:before,.f-container:after{display:table;content:' '}@media (max-width:60em){.f-container{min-height:100vh}.state--menu-active .f-container{-webkit-transform:translate(-14rem,0);-ms-transform:translate(-14rem,0);transform:translate(-14rem,0)}}@media (min-width:60em){.f-container{margin-left:14rem}}.f-main{box-sizing:border-box;padding:1em;min-height:100%}.f-controls:after{clear:both}.f-controls:before,.f-controls:after{display:table;content:' '}.f-controls .f-icon{box-sizing:border-box;width:33.33333%;padding:.75em 0;text-align:center;float:left;cursor:pointer}.f-controls .f-icon:hover:not(.f-active) use{fill:#5c5c5c}.f-controls .f-icon:last-child{border-right:0}.f-controls .f-icon svg{width:14px;height:14px;display:inline-block;vertical-align:middle}.f-controls .f-icon use{fill:#5c5c5c}.f-controls .f-active{box-shadow:inset 0 3px 0 #1f1f1f}.f-controls .f-active use{fill:#1f1f1f}.f-control{cursor:pointer;vertical-align:middle;margin-left:.75rem}.f-control:first-child{margin-left:0}.f-control svg{width:14px;height:14px}.f-control svg use{fill:#5c5c5c}.f-item-group{margin-top:3rem;margin-bottom:3rem;padding-bottom:3rem;border-bottom:1px solid #ccc}.f-item-group:after{clear:both}.f-item-group:before,.f-item-group:after{display:table;content:' '}.f-item-group:last-child{border-bottom:0;margin-bottom:0}.f-item-group~.f-item-group{margin-top:0}.f-item-group>.f-item-group{padding-bottom:1.5rem;margin-bottom:1.5rem;border-bottom:0}.f-item-group>.f-item-group:first-of-type{margin-top:0}.f-item-group>.f-item-group:last-child{margin-bottom:0;padding-bottom:0}.f-item-code{margin-top:2rem}.f-item-preview:after{clear:both}.f-item-preview:before,.f-item-preview:after{display:table;content:' '}.f-item-border-bottom{border-bottom:1px solid #ccc}.f-item-heading-group{margin-bottom:2rem;vertical-align:middle}.f-item-heading-group:after{clear:both}.f-item-heading-group:before,.f-item-heading-group:after{display:table;content:' '}.f-item-heading{margin-top:0;margin-bottom:0;line-height:1}.f-item-heading,.f-item-controls{display:inline-block;vertical-align:middle}.f-item-controls{margin-left:.5rem}.f-item-controls .f-control{width:14px;height:14px;display:block;float:left}.f-item-controls .f-control:hover use{fill:#5c5c5c}.f-item-controls .f-control use{fill:#ccc}.f-item-hidden{display:none}.f-item-notes{font-size:.875rem} \ No newline at end of file diff --git a/dist/assets/toolkit/scripts/toolkit.js b/dist/assets/toolkit/scripts/toolkit.js new file mode 100644 index 0000000..c9a93af --- /dev/null +++ b/dist/assets/toolkit/scripts/toolkit.js @@ -0,0 +1 @@ +!function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n?n:r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + + + +
+ +
+
+ +
+
+ + + +
+
+ + + + +

Components

+ + +
+ +
+

Button

+
+ + + + + + + + + + +
+
+

These are notes associated with this button component.

+ +
+
+ +
+
+ 
<button class="button">Submit</button>
+
+ + +
+ + +
+ +
+

Checkbox

+
+ + + + + + +
+
+
+ +
+
+ 
<label>
+    <input type="checkbox"> Checkbox
+</label>
+
+ + +
+ + +
+ +
+

Lists

+
+
+
+

Ordered

+
+ + + + + + +
+
+
+
    +
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    2. +
  2. Aliquam tincidunt mauris eu risus.
    3. +
  3. Vestibulum auctor dapibus neque.
    4. +
+
+
+ 
<ol>
+    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+    <li>Aliquam tincidunt mauris eu risus.</li>
+    <li>Vestibulum auctor dapibus neque.</li>
+</ol>
+
+ +
+
+
+

Unordered

+
+ + + + + + +
+
+
+
    +
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • +
  • Aliquam tincidunt mauris eu risus.
    • +
  • Vestibulum auctor dapibus neque.
    • +
+
+
+ 
<ul>
+    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+    <li>Aliquam tincidunt mauris eu risus.</li>
+    <li>Vestibulum auctor dapibus neque.</li>
+</ul>
+
+ +
+ +
+ + +
+ +
+

Paragraph

+
+ + + + + + +
+
+
+

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum + nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus.

+
+
+ 
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
+    nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus.</p>
+
+ + +
+ + +
+ +
+

Radio

+
+ + + + + + +
+
+
+ + + + + +
+
+ 
<label>
+    <input type="radio" name="groupName" id="radio1" /> Radio 1
+</label>
+
+<label>
+    <input type="radio" name="groupName" id="radio2" /> Radio 2
+</label>
+
+<label>
+    <input type="radio" name="groupName" id="radio3" /> Radio 3
+</label>
+
+ + +
+ + +
+ +
+

Select

+
+ + + + + + +
+
+
+ +
+
+ 
<select name="" id="">
+    <option value="">Option 1</option>
+    <option value="">Option 2</option>
+    <option value="">Option 3</option>
+    <option value="">Option 4</option>
+    <option value="">Option 5</option>
+</select>
+
+ + +
+ + +
+ +
+

Table

+
+ + + + + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table Heading 1Table Heading 2Table Heading 3
Table Footer 1Table Footer 2Table Footer 3
Table Cell 1Table Cell 2Table Cell 3
Table Cell 1Table Cell 2Table Cell 3
Table Cell 1Table Cell 2Table Cell 3
Table Cell 1Table Cell 2Table Cell 3
+
+
+ 
<table>
+    <thead>
+        <tr>
+            <th>Table Heading 1</th>
+            <th>Table Heading 2</th>
+            <th>Table Heading 3</th>
+        </tr>
+    </thead>
+    <tfoot>
+        <tr>
+            <th>Table Footer 1</th>
+            <th>Table Footer 2</th>
+            <th>Table Footer 3</th>
+        </tr>
+    </tfoot>
+    <tbody>
+        <tr>
+            <td>Table Cell 1</td>
+            <td>Table Cell 2</td>
+            <td>Table Cell 3</td>
+        </tr>
+        <tr>
+            <td>Table Cell 1</td>
+            <td>Table Cell 2</td>
+            <td>Table Cell 3</td>
+        </tr>
+        <tr>
+            <td>Table Cell 1</td>
+            <td>Table Cell 2</td>
+            <td>Table Cell 3</td>
+        </tr>
+        <tr>
+            <td>Table Cell 1</td>
+            <td>Table Cell 2</td>
+            <td>Table Cell 3</td>
+        </tr>
+    </tbody>
+</table>
+
+ + +
+ + +
+ +
+

Text Input

+
+ + + + + + +
+
+
+ + +
+
+ 
<label for="textInput">Text input</label>
+<input type="text" id="textInput">
+
+ + +
+ + +
+ +
+

Textarea

+
+ + + + + + +
+
+
+ +
+
+ 
<textarea name="" id="" cols="30" rows="10"></textarea>
+
+ + +
+ + + + +
+
+ + + + + + + + diff --git a/dist/docs.html b/dist/docs.html new file mode 100644 index 0000000..3efc567 --- /dev/null +++ b/dist/docs.html @@ -0,0 +1,164 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + + + +
+ +
+
+ +
+
+ + + +
+
+ + + + +

Docs

+ + +
+

Javascript

+

This is a markdown document.

+
var foo = "bar"
+
+ +
+ + + + +
+
+ + + + + + + + diff --git a/dist/favicon.ico b/dist/favicon.ico new file mode 100755 index 0000000000000000000000000000000000000000..925cf15424f6d339dc97be906aa4bbc8fe094fe4 GIT binary patch literal 17542 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 literal 0 HcmV?d00001 diff --git a/dist/index.html b/dist/index.html new file mode 100644 index 0000000..b4775ba --- /dev/null +++ b/dist/index.html @@ -0,0 +1,209 @@ + + + + + + + + Overview | Fabricator + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + + + +
+ +
+
+ +
+
+ + + +
+
+ + + + +

Overview

+ +

The front-end toolkit is a highly-modular design system for building web pages. It contains a collection of components and structures that can be assembled into more complex page layouts.

+ +

This guide contains real working examples, code snippets, documentation, and style guidelines.

+ +

Start by adding the following files to your page:

+ +

+ toolkit.css + toolkit.js +

+ +
+ +

Color

+ +
+
Dark
+
rgb(30,30,30)
+
+ +
+
Light
+
rgb(242,242,242)
+
+ +
+ +
+
Red
+
rgb(201,55,6)
+
+ +
+
Yellow
+
rgb(252,207,80)
+
+ +
+
Blue
+
rgb(39,102,143)
+
+ +
+ +

Typography

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam enim sunt sapiente molestias, sed dicta inventore consectetur beatae asperiores, aliquid laboriosam animi, praesentium repudiandae et, quam saepe sint cupiditate reiciendis.

+ +

Heading Level 1

+

Heading Level 2

+

Heading Level 3

+

Heading Level 4

+
Heading Level 5
+
Heading Level 6
+ + + +
+
+ + + + + + + + diff --git a/dist/pages.html b/dist/pages.html new file mode 100644 index 0000000..1b97971 --- /dev/null +++ b/dist/pages.html @@ -0,0 +1,162 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + + + +
+ +
+
+ +
+
+ + + +
+
+ + + + +

Pages

+ + + + + +
+
+ + + + + + + + diff --git a/dist/pages/home.html b/dist/pages/home.html new file mode 100644 index 0000000..c2361c5 --- /dev/null +++ b/dist/pages/home.html @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + +

Hello, World!

+ +

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus.

+
+
+
+ +
+
+ + + + + + + + + + diff --git a/dist/structures.html b/dist/structures.html new file mode 100644 index 0000000..ac2609c --- /dev/null +++ b/dist/structures.html @@ -0,0 +1,189 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + + + +
+ +
+
+ +
+
+ + + +
+
+ + + + +

Structures

+ + +
+ +
+

Form

+
+ + + + + + +
+
+
+
+
+ +
+ +
+
+
+ 
<form action="">
+    <div>
+        <label for="textInput">Text input</label>
+        <input type="text" id="textInput"> </div>
+    <button class="button">Submit</button>
+</form>
+
+ + +
+ + + + +
+
+ + + + + + + + diff --git a/gulpfile.js b/gulpfile.js new file mode 100755 index 0000000..698a451 --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,168 @@ +'use strict'; + +// modules +var assemble = require('fabricator-assemble'); +var browserify = require('browserify'); +var browserSync = require('browser-sync'); +var concat = require('gulp-concat'); +var csso = require('gulp-csso'); +var del = require('del'); +var gulp = require('gulp'); +var gutil = require('gulp-util'); +var gulpif = require('gulp-if'); +var imagemin = require('gulp-imagemin'); +var prefix = require('gulp-autoprefixer'); +var rename = require('gulp-rename'); +var reload = browserSync.reload; +var runSequence = require('run-sequence'); +var sass = require('gulp-sass'); +var source = require('vinyl-source-stream'); +var streamify = require('gulp-streamify'); +var uglify = require('gulp-uglify'); + + +// configuration +var config = { + dev: gutil.env.dev, + src: { + scripts: { + fabricator: [ + './src/assets/fabricator/scripts/prism.js', + './src/assets/fabricator/scripts/fabricator.js' + ], + toolkit: './src/assets/toolkit/scripts/toolkit.js' + }, + styles: { + fabricator: './src/assets/fabricator/styles/fabricator.scss', + toolkit: './src/assets/toolkit/styles/toolkit.scss' + }, + images: 'src/assets/toolkit/images/**/*', + views: './src/toolkit/views/*.html', + materials: [ + 'components', + 'structures', + 'templates', + 'documentation' + ] + }, + dest: './dist' +}; + + +// clean +gulp.task('clean', function (cb) { + del([config.dest], cb); +}); + + +// styles +gulp.task('styles:fabricator', function () { + return gulp.src(config.src.styles.fabricator) + .pipe(sass({ + errLogToConsole: true + })) + .pipe(prefix('last 1 version')) + .pipe(gulpif(!config.dev, csso())) + .pipe(rename('f.css')) + .pipe(gulp.dest(config.dest + '/assets/fabricator/styles')) + .pipe(gulpif(config.dev, reload({stream:true}))); +}); + +gulp.task('styles:toolkit', function () { + return gulp.src(config.src.styles.toolkit) + .pipe(sass({ + errLogToConsole: true + })) + .pipe(prefix('last 1 version')) + .pipe(gulpif(!config.dev, csso())) + .pipe(gulp.dest(config.dest + '/assets/toolkit/styles')) + .pipe(gulpif(config.dev, reload({stream:true}))); +}); + +gulp.task('styles', ['styles:fabricator', 'styles:toolkit']); + + +// scripts +gulp.task('scripts:fabricator', function () { + return gulp.src(config.src.scripts.fabricator) + .pipe(concat('f.js')) + .pipe(gulpif(!config.dev, uglify())) + .pipe(gulp.dest(config.dest + '/assets/fabricator/scripts')); +}); + +gulp.task('scripts:toolkit', function () { + return browserify(config.src.scripts.toolkit) + .bundle() + .on('error', function (error) { + gutil.log(gutil.colors.red(error)); + this.emit('end'); + }) + .pipe(source('toolkit.js')) + .pipe(gulpif(!config.dev, streamify(uglify()))) + .pipe(gulp.dest(config.dest + '/assets/toolkit/scripts')); +}); + +gulp.task('scripts', ['scripts:fabricator', 'scripts:toolkit']); + + +// images +gulp.task('images', ['favicon'], function () { + return gulp.src(config.src.images) + .pipe(imagemin()) + .pipe(gulp.dest(config.dest + '/assets/toolkit/images')); +}); + +gulp.task('favicon', function () { + return gulp.src('./src/favicon.ico') + .pipe(gulp.dest(config.dest)); +}); + + +// assemble +gulp.task('assemble', function (done) { + assemble(); + done(); +}); + + +// server +gulp.task('serve', function () { + + var reload = browserSync.reload; + + browserSync({ + server: { + baseDir: config.dest + }, + notify: false, + logPrefix: 'FABRICATOR' + }); + + gulp.watch('src/**/*.{html,md,json,yml}', ['assemble']).on('change', reload); + gulp.watch('src/assets/fabricator/styles/**/*.scss', ['styles:fabricator']); + gulp.watch('src/assets/toolkit/styles/**/*.scss', ['styles:toolkit']); + gulp.watch('src/assets/fabricator/scripts/**/*.js', ['scripts:fabricator']).on('change', reload); + gulp.watch('src/assets/toolkit/scripts/**/*.js', ['scripts:toolkit']).on('change', reload); + gulp.watch(config.src.images, ['images']).on('change', reload); +}); + + +// default build task +gulp.task('default', ['clean'], function () { + + // define build tasks + var tasks = [ + 'styles', + 'scripts', + 'images', + 'assemble' + ]; + + // run build + runSequence(tasks, function () { + if (config.dev) { + gulp.start('serve'); + } + }); + +}); diff --git a/index.html b/index.html deleted file mode 100644 index 349db2b..0000000 --- a/index.html +++ /dev/null @@ -1 +0,0 @@ -Hello, World. diff --git a/package.json b/package.json new file mode 100644 index 0000000..e168475 --- /dev/null +++ b/package.json @@ -0,0 +1,53 @@ +{ + "name": "fabricator", + "version": "0.7.0", + "description": "Fabricator is a tool for creating modular website toolkits", + "homepage": "http://resource.github.io/fabricator/", + "main": "README.md", + "scripts": { + "gulp": "gulp", + "prestart": "npm install", + "build": "npm install && gulp", + "start": "gulp --dev" + }, + "keywords": [ + "toolkit", + "framework", + "scaffold", + "patterns", + "library" + ], + "author": "Luke Askew", + "licenses": [ + { + "type": "MIT", + "url": "https://github.com/resource/fabricator/blob/master/LICENSE.md" + } + ], + "repository": { + "type": "git", + "url": "https://github.com/resource/fabricator.git" + }, + "engines": { + "node": ">=0.10.0" + }, + "devDependencies": { + "browser-sync": "^2.3.1", + "browserify": "^9.0.6", + "del": "^1.1.0", + "fabricator-assemble": "^0.1.5", + "gulp": "^3.8.10", + "gulp-autoprefixer": "^2.0.0", + "gulp-concat": "^2.4.2", + "gulp-csso": "^1.0.0", + "gulp-if": "~1.2.2", + "gulp-imagemin": "^2.0.0", + "gulp-rename": "~1.2.0", + "gulp-sass": "^1.1.0", + "gulp-streamify": "0.0.5", + "gulp-uglify": "^1.0.1", + "gulp-util": "^3.0.1", + "run-sequence": "^1.0.1", + "vinyl-source-stream": "^1.1.0" + } +} diff --git a/recipes/bower.md b/recipes/bower.md new file mode 100755 index 0000000..9be2651 --- /dev/null +++ b/recipes/bower.md @@ -0,0 +1,28 @@ +# Using Bower for dependency managment + +[Bower](http://bower.io) is a great tool for managing third party client side dependencies. Here's how to leverage Bower on a Fabricator instance: + +1. Install bower `$ npm install bower --save-dev` +2. Add a `.bowerrc` config file (see below). +3. Update `package.json` `scripts` object to hook into Bower install task. +4. Refer to the [vendor script recipe](https://github.com/resource/fabricator/blob/master/recipes/vendor-scripts.md) for steps on including these scripts into your `toolkit.js` file. + +**.bowerrc** +```json +{ + "directory": "src/toolkit/assets/vendor" +} +``` + +**package.json** + +```json +"scripts": { + "gulp": "gulp", + "bower": "bower", + "prestart": "npm install", + "build": "npm install && gulp", + "postinstall": "bower install", + "start": "gulp --dev" +}, +``` diff --git a/recipes/vendor-scripts.md b/recipes/vendor-scripts.md new file mode 100755 index 0000000..ea3ff0d --- /dev/null +++ b/recipes/vendor-scripts.md @@ -0,0 +1,62 @@ +# Including vendor scripts + +Third party scripts like [jQuery](http://jquery.com) can be a helpful part of your toolkit. Here's how to modify the `gulpfile.js` to include these files: + +1. Install the [streamqueue](https://www.npmjs.com/package/streamqueue) package: `$ npm install streamqueue --save-dev` +2. Create a `config.src.vendor` array and include vendor file paths. +3. Break the `scripts:toolkit` task into two streams - `toolkit()` and `vendor()` - then merge streams using `streamqueue()`. + +```javascript +var browserify = require('browserify'); +var concat = require('gulp-concat'); +var gulp = require('gulp'); +var gulpif = require('gulp-if'); +var gutil = require('gulp-util'); +var source = require('vinyl-source-stream'); +var streamqueue = require('streamqueue'); +var streamify = require('gulp-streamify'); +var uglify = require('gulp-uglify'); + +var config = { + dev: gutil.env.dev, + src: { + scripts: { + fabricator: [ + 'src/fabricator/scripts/prism.js', + 'src/fabricator/scripts/fabricator.js' + ], + vendor: [ + 'src/toolkit/assets/vendor/jquery/dist/jquery.js' + ], + toolkit: './src/toolkit/assets/scripts/toolkit.js' + } + }, + dest: 'dist' +}; + +gulp.task('scripts:toolkit', function () { + + var toolkit = function () { + return browserify(config.src.scripts.toolkit).bundle() + .on('error', function (error) { + gutil.log(gutil.colors.red(error)); + this.emit('end'); + }) + .pipe(source('toolkit.js')); + }; + + var vendor = function () { + return gulp.src(config.src.scripts.vendor) + .pipe(concat('vendor.js')); + }; + + return streamqueue({ objectMode: true }, vendor(), toolkit()) + .pipe(streamify(concat('toolkit.js'))) + .pipe(gulpif(!config.dev, streamify(uglify()))) + .pipe(gulp.dest(config.dest + '/toolkit/scripts')); + +}); + +``` + +**Optional:** Check out the [Bower recipe](https://github.com/resource/fabricator/blob/master/recipes/bower.md) for info on using Bower as your client-side dependecny manager. diff --git a/src/assets/fabricator/scripts/fabricator.js b/src/assets/fabricator/scripts/fabricator.js new file mode 100755 index 0000000..dd547a9 --- /dev/null +++ b/src/assets/fabricator/scripts/fabricator.js @@ -0,0 +1,320 @@ +'use strict'; + +/** + * Global `fabricator` object + * @namespace + */ +var fabricator = window.fabricator = {}; + + +/** + * Default options + * @type {Object} + */ +fabricator.options = { + toggles: { + details: true, + notes: true, + code: false + } +}; + +/** + * Feature detection + * @type {Object} + */ +fabricator.test = {}; + +// test for localstorage +fabricator.test.localStorage = (function () { + var test = '_f'; + try { + localStorage.setItem(test, test); + localStorage.removeItem(test); + return true; + } catch(e) { + return false; + } +}()); + +// create storage object if it doesn't exist; store options +if (fabricator.test.localStorage) { + localStorage.fabricator = localStorage.fabricator || JSON.stringify(fabricator.options); +} + + +/** + * Cache DOM + * @type {Object} + */ +fabricator.dom = { + primaryMenu: document.querySelector('.f-menu'), + menuItems: document.querySelectorAll('.f-menu li a'), + menuToggle: document.querySelector('.f-menu-toggle') +}; + + +/** + * Build color chips + */ +fabricator.buildColorChips = function () { + + var chips = document.querySelectorAll('.f-color-chip'), + color; + + for (var i = chips.length - 1; i >= 0; i--) { + color = chips[i].querySelector('.f-color-chip__color').innerHTML; + chips[i].style.borderTopColor = color; + chips[i].style.borderBottomColor = color; + } + + return this; + +}; + + +/** + * Add `f-active` class to active menu item + */ +fabricator.setActiveItem = function () { + + /** + * @return {Array} Sorted array of menu item 'ids' + */ + var parsedItems = function () { + + var items = [], + id, href; + + for (var i = fabricator.dom.menuItems.length - 1; i >= 0; i--) { + + // remove active class from items + fabricator.dom.menuItems[i].classList.remove('f-active'); + + // get item href + href = fabricator.dom.menuItems[i].getAttribute('href'); + + // get id + if (href.indexOf('#') > -1) { + id = href.split('#').pop(); + } else { + id = href.split('/').pop().replace(/\.[^/.]+$/, ''); + } + + items.push(id); + + } + + return items.reverse(); + + }; + + + /** + * Match the 'id' in the window location with the menu item, set menu item as active + */ + var setActive = function () { + + var href = window.location.href, + items = parsedItems(), + id, index; + + // get window 'id' + if (href.indexOf('#') > -1) { + id = window.location.hash.replace('#', ''); + } else { + id = window.location.pathname.split('/').pop().replace(/\.[^/.]+$/, ''); + } + + // In case the first menu item isn't the index page. + if (id === '') { + id = 'index'; + } + + // find the window id in the items array + index = (items.indexOf(id) > -1) ? items.indexOf(id) : 0; + + // set the matched item as active + fabricator.dom.menuItems[index].classList.add('f-active'); + + }; + + window.addEventListener('hashchange', setActive); + + setActive(); + + return this; + +}; + + +/** + * Click handler to primary menu toggle + * @return {Object} fabricator + */ +fabricator.primaryMenuControls = function () { + + // shortcut menu DOM + var toggle = fabricator.dom.menuToggle; + + // toggle classes on certain elements + var toggleClasses = function () { + document.querySelector('html').classList.toggle('state--menu-active'); + }; + + // toggle classes on click + toggle.addEventListener('click', function () { + toggleClasses(); + }); + + // close menu when clicking on item (for collapsed menu view) + var closeMenu = function () { + toggleClasses(); + }; + + for (var i = 0; i < fabricator.dom.menuItems.length; i++) { + fabricator.dom.menuItems[i].addEventListener('click', closeMenu); + } + + return this; + +}; + + +/** + * Handler for preview and code toggles + * @return {Object} fabricator + */ +fabricator.allItemsToggles = function () { + + var items = { + details: document.querySelectorAll('[data-f-toggle="details"]'), + notes: document.querySelectorAll('[data-f-toggle="notes"]'), + code: document.querySelectorAll('[data-f-toggle="code"]') + }; + + var toggleAllControls = document.querySelectorAll('.f-controls [data-f-toggle-control]'); + + var options = (fabricator.test.localStorage) ? JSON.parse(localStorage.fabricator) : fabricator.options; + + // toggle all + var toggleAllItems = function (type, value) { + + var button = document.querySelector('.f-controls [data-f-toggle-control=' + type + ']'), + _items = items[type]; + + for (var i = 0; i < _items.length; i++) { + if (value) { + _items[i].classList.remove('f-item-hidden'); + } else { + _items[i].classList.add('f-item-hidden'); + } + } + + // toggle styles + if (value) { + button.classList.add('f-active'); + } else { + button.classList.remove('f-active'); + } + + // update options + options.toggles[type] = value; + + if (fabricator.test.localStorage) { + localStorage.setItem('fabricator', JSON.stringify(options)); + } + + }; + + for (var i = 0; i < toggleAllControls.length; i++) { + + toggleAllControls[i].addEventListener('click', function (e) { + + // extract info from target node + var type = e.currentTarget.getAttribute('data-f-toggle-control'), + value = e.currentTarget.className.indexOf('f-active') < 0; + + // toggle the items + toggleAllItems(type, value); + + }); + + } + + // persist toggle options from page to page + for (var toggle in options.toggles) { + if (options.toggles.hasOwnProperty(toggle)) { + toggleAllItems(toggle, options.toggles[toggle]); + } + } + + return this; + +}; + + +/** + * Handler for single item code toggling + */ +fabricator.singleItemToggle = function () { + + var itemToggleSingle = document.querySelectorAll('.f-item-group [data-f-toggle-control]'); + + // toggle single + var toggleSingleItemCode = function (e) { + var group = this.parentNode.parentNode.parentNode, + type = e.currentTarget.getAttribute('data-f-toggle-control'); + + group.querySelector('[data-f-toggle=' + type + ']').classList.toggle('f-item-hidden'); + }; + + for (var i = 0; i < itemToggleSingle.length; i++) { + itemToggleSingle[i].addEventListener('click', toggleSingleItemCode); + } + + return this; + +}; + + +/** + * Automatically select code when code block is clicked + */ +fabricator.bindCodeAutoSelect = function () { + + var codeBlocks = document.querySelectorAll('.f-item-code'); + + var select = function (block) { + var selection = window.getSelection(); + var range = document.createRange(); + range.selectNodeContents(block.querySelector('code')); + selection.removeAllRanges(); + selection.addRange(range); + }; + + for (var i = codeBlocks.length - 1; i >= 0; i--) { + codeBlocks[i].addEventListener('click', select.bind(this, codeBlocks[i])); + } + +}; + + +/** + * Initialization + */ +(function () { + + // invoke + fabricator + .primaryMenuControls() + .allItemsToggles() + .singleItemToggle() + .buildColorChips() + .setActiveItem() + .bindCodeAutoSelect(); + + // syntax highlighting + Prism.highlightAll(); + +}()); diff --git a/src/assets/fabricator/scripts/prism.js b/src/assets/fabricator/scripts/prism.js new file mode 100755 index 0000000..964e423 --- /dev/null +++ b/src/assets/fabricator/scripts/prism.js @@ -0,0 +1,558 @@ + + +/* ********************************************** + Begin prism-core.js +********************************************** */ + +/** + * Prism: Lightweight, robust, elegant syntax highlighting + * MIT license http://www.opensource.org/licenses/mit-license.php/ + * @author Lea Verou http://lea.verou.me + */ + +(function(){ + +// Private helper vars +var lang = /\blang(?:uage)?-(?!\*)(\w+)\b/i; + +var _ = self.Prism = { + util: { + type: function (o) { + return Object.prototype.toString.call(o).match(/\[object (\w+)\]/)[1]; + }, + + // Deep clone a language definition (e.g. to extend it) + clone: function (o) { + var type = _.util.type(o); + + switch (type) { + case 'Object': + var clone = {}; + + for (var key in o) { + if (o.hasOwnProperty(key)) { + clone[key] = _.util.clone(o[key]); + } + } + + return clone; + + case 'Array': + return o.slice(); + } + + return o; + } + }, + + languages: { + extend: function (id, redef) { + var lang = _.util.clone(_.languages[id]); + + for (var key in redef) { + lang[key] = redef[key]; + } + + return lang; + }, + + // Insert a token before another token in a language literal + insertBefore: function (inside, before, insert, root) { + root = root || _.languages; + var grammar = root[inside]; + var ret = {}; + + for (var token in grammar) { + + if (grammar.hasOwnProperty(token)) { + + if (token == before) { + + for (var newToken in insert) { + + if (insert.hasOwnProperty(newToken)) { + ret[newToken] = insert[newToken]; + } + } + } + + ret[token] = grammar[token]; + } + } + + return root[inside] = ret; + }, + + // Traverse a language definition with Depth First Search + DFS: function(o, callback) { + for (var i in o) { + callback.call(o, i, o[i]); + + if (_.util.type(o) === 'Object') { + _.languages.DFS(o[i], callback); + } + } + } + }, + + highlightAll: function(async, callback) { + var elements = document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'); + + for (var i=0, element; element = elements[i++];) { + _.highlightElement(element, async === true, callback); + } + }, + + highlightElement: function(element, async, callback) { + // Find language + var language, grammar, parent = element; + + while (parent && !lang.test(parent.className)) { + parent = parent.parentNode; + } + + if (parent) { + language = (parent.className.match(lang) || [,''])[1]; + grammar = _.languages[language]; + } + + if (!grammar) { + return; + } + + // Set language on the element, if not present + element.className = element.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language; + + // Set language on the parent, for styling + parent = element.parentNode; + + if (/pre/i.test(parent.nodeName)) { + parent.className = parent.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language; + } + + var code = element.textContent; + + if(!code) { + return; + } + + code = code.replace(/&/g, '&').replace(/ text.length) { + // Something went terribly wrong, ABORT, ABORT! + break tokenloop; + } + + if (str instanceof Token) { + continue; + } + + pattern.lastIndex = 0; + + var match = pattern.exec(str); + + if (match) { + if(lookbehind) { + lookbehindLength = match[1].length; + } + + var from = match.index - 1 + lookbehindLength, + match = match[0].slice(lookbehindLength), + len = match.length, + to = from + len, + before = str.slice(0, from + 1), + after = str.slice(to + 1); + + var args = [i, 1]; + + if (before) { + args.push(before); + } + + var wrapped = new Token(token, inside? _.tokenize(match, inside) : match); + + args.push(wrapped); + + if (after) { + args.push(after); + } + + Array.prototype.splice.apply(strarr, args); + } + } + } + + return strarr; + }, + + hooks: { + all: {}, + + add: function (name, callback) { + var hooks = _.hooks.all; + + hooks[name] = hooks[name] || []; + + hooks[name].push(callback); + }, + + run: function (name, env) { + var callbacks = _.hooks.all[name]; + + if (!callbacks || !callbacks.length) { + return; + } + + for (var i=0, callback; callback = callbacks[i++];) { + callback(env); + } + } + } +}; + +var Token = _.Token = function(type, content) { + this.type = type; + this.content = content; +}; + +Token.stringify = function(o, language, parent) { + if (typeof o == 'string') { + return o; + } + + if (Object.prototype.toString.call(o) == '[object Array]') { + return o.map(function(element) { + return Token.stringify(element, language, o); + }).join(''); + } + + var env = { + type: o.type, + content: Token.stringify(o.content, language, parent), + tag: 'span', + classes: ['token', o.type], + attributes: {}, + language: language, + parent: parent + }; + + if (env.type == 'comment') { + env.attributes['spellcheck'] = 'true'; + } + + _.hooks.run('wrap', env); + + var attributes = ''; + + for (var name in env.attributes) { + attributes += name + '="' + (env.attributes[name] || '') + '"'; + } + + return '<' + env.tag + ' class="' + env.classes.join(' ') + '" ' + attributes + '>' + env.content + ''; + +}; + +if (!self.document) { + // In worker + self.addEventListener('message', function(evt) { + var message = JSON.parse(evt.data), + lang = message.language, + code = message.code; + + self.postMessage(JSON.stringify(_.tokenize(code, _.languages[lang]))); + self.close(); + }, false); + + return; +} + +// Get current script and highlight +var script = document.getElementsByTagName('script'); + +script = script[script.length - 1]; + +if (script) { + _.filename = script.src; + + if (document.addEventListener && !script.hasAttribute('data-manual')) { + document.addEventListener('DOMContentLoaded', _.highlightAll); + } +} + +})(); + +/* ********************************************** + Begin prism-markup.js +********************************************** */ + +Prism.languages.markup = { + 'comment': /<!--[\w\W]*?-->/g, + 'prolog': /<\?.+?\?>/, + 'doctype': /<!DOCTYPE.+?>/, + 'cdata': /<!\[CDATA\[[\w\W]*?]]>/i, + 'tag': { + pattern: /<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|\w+))?\s*)*\/?>/gi, + inside: { + 'tag': { + pattern: /^<\/?[\w:-]+/i, + inside: { + 'punctuation': /^<\/?/, + 'namespace': /^[\w-]+?:/ + } + }, + 'attr-value': { + pattern: /=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi, + inside: { + 'punctuation': /=|>|"/g + } + }, + 'punctuation': /\/?>/g, + 'attr-name': { + pattern: /[\w:-]+/g, + inside: { + 'namespace': /^[\w-]+?:/ + } + } + + } + }, + 'entity': /&#?[\da-z]{1,8};/gi +}; + +// Plugin to make entity title show the real entity, idea by Roman Komarov +Prism.hooks.add('wrap', function(env) { + + if (env.type === 'entity') { + env.attributes['title'] = env.content.replace(/&/, '&'); + } +}); + +/* ********************************************** + Begin prism-css.js +********************************************** */ + +Prism.languages.css = { + 'comment': /\/\*[\w\W]*?\*\//g, + 'atrule': { + pattern: /@[\w-]+?.*?(;|(?=\s*{))/gi, + inside: { + 'punctuation': /[;:]/g + } + }, + 'url': /url\((["']?).*?\1\)/gi, + 'selector': /[^\{\}\s][^\{\};]*(?=\s*\{)/g, + 'property': /(\b|\B)[\w-]+(?=\s*:)/ig, + 'string': /("|')(\\?.)*?\1/g, + 'important': /\B!important\b/gi, + 'ignore': /&(lt|gt|amp);/gi, + 'punctuation': /[\{\};:]/g +}; + +if (Prism.languages.markup) { + Prism.languages.insertBefore('markup', 'tag', { + 'style': { + pattern: /(<|<)style[\w\W]*?(>|>)[\w\W]*?(<|<)\/style(>|>)/ig, + inside: { + 'tag': { + pattern: /(<|<)style[\w\W]*?(>|>)|(<|<)\/style(>|>)/ig, + inside: Prism.languages.markup.tag.inside + }, + rest: Prism.languages.css + } + } + }); +} + +/* ********************************************** + Begin prism-clike.js +********************************************** */ + +Prism.languages.clike = { + 'comment': { + pattern: /(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g, + lookbehind: true + }, + 'string': /("|')(\\?.)*?\1/g, + 'class-name': { + pattern: /((?:class|interface|extends|implements|trait|instanceof|new)\s+)[a-z0-9_\.\\]+/ig, + lookbehind: true, + inside: { + punctuation: /(\.|\\)/ + } + }, + 'keyword': /\b(if|else|while|do|for|return|in|instanceof|function|new|try|catch|finally|null|break|continue)\b/g, + 'boolean': /\b(true|false)\b/g, + 'function': { + pattern: /[a-z0-9_]+\(/ig, + inside: { + punctuation: /\(/ + } + }, + 'number': /\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g, + 'operator': /[-+]{1,2}|!|=?<|=?>|={1,2}|(&){1,2}|\|?\||\?|\*|\/|\~|\^|\%/g, + 'ignore': /&(lt|gt|amp);/gi, + 'punctuation': /[{}[\];(),.:]/g +}; + +/* ********************************************** + Begin prism-javascript.js +********************************************** */ + +Prism.languages.javascript = Prism.languages.extend('clike', { + 'keyword': /\b(var|let|if|else|while|do|for|return|in|instanceof|function|new|with|typeof|try|catch|finally|null|break|continue)\b/g, + 'number': /\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g +}); + +Prism.languages.insertBefore('javascript', 'keyword', { + 'regex': { + pattern: /(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g, + lookbehind: true + } +}); + +if (Prism.languages.markup) { + Prism.languages.insertBefore('markup', 'tag', { + 'script': { + pattern: /(<|<)script[\w\W]*?(>|>)[\w\W]*?(<|<)\/script(>|>)/ig, + inside: { + 'tag': { + pattern: /(<|<)script[\w\W]*?(>|>)|(<|<)\/script(>|>)/ig, + inside: Prism.languages.markup.tag.inside + }, + rest: Prism.languages.javascript + } + } + }); +} + +/* ********************************************** + Begin prism-file-highlight.js +********************************************** */ + +(function(){ + +if (!self.Prism || !self.document || !document.querySelector) { + return; +} + +var Extensions = { + 'js': 'javascript', + 'html': 'markup', + 'svg': 'markup' +}; + +Array.prototype.slice.call(document.querySelectorAll('pre[data-src]')).forEach(function(pre) { + var src = pre.getAttribute('data-src'); + var extension = (src.match(/\.(\w+)$/) || [,''])[1]; + var language = Extensions[extension] || extension; + + var code = document.createElement('code'); + code.className = 'language-' + language; + + pre.textContent = ''; + + code.textContent = 'Loading…'; + + pre.appendChild(code); + + var xhr = new XMLHttpRequest(); + + xhr.open('GET', src, true); + + xhr.onreadystatechange = function() { + if (xhr.readyState == 4) { + + if (xhr.status < 400 && xhr.responseText) { + code.textContent = xhr.responseText; + + Prism.highlightElement(code); + } + else if (xhr.status >= 400) { + code.textContent = '✖ Error ' + xhr.status + ' while fetching file: ' + xhr.statusText; + } + else { + code.textContent = '✖ Error: File does not exist or is empty'; + } + } + }; + + xhr.send(null); +}); + +})(); \ No newline at end of file diff --git a/src/assets/fabricator/styles/fabricator.scss b/src/assets/fabricator/styles/fabricator.scss new file mode 100755 index 0000000..7462636 --- /dev/null +++ b/src/assets/fabricator/styles/fabricator.scss @@ -0,0 +1,13 @@ +/** + * Fabricator styles + * @author Luke Askew + * Class selectors are namespaced with "f-" + */ + +@import 'partials/variables'; +@import 'partials/code'; +@import 'partials/color-chips'; +@import 'partials/menu'; +@import 'partials/main'; +@import 'partials/controls'; +@import 'partials/item'; diff --git a/src/assets/fabricator/styles/partials/_code.scss b/src/assets/fabricator/styles/partials/_code.scss new file mode 100755 index 0000000..99a180b --- /dev/null +++ b/src/assets/fabricator/styles/partials/_code.scss @@ -0,0 +1,124 @@ +/** + * Github-like theme for Prism.js + * @author Luke Askew http://github.com/lukeaskew + */ + +// color vars +$code-colors: ( + blue: #183691, + teal: #0086b3, + black: #333, + purple: #a71d5d, + maroon: #a71d5d, + green: #63a35c, + light-gray: #f7f7f7, + dark-gray: #969896 +); + + +// base +code, +code[class*='language-'], +pre[class*='language-'] { + color: map-get($code-colors, black); + text-align: left; + white-space: pre; + word-spacing: normal; + tab-size: 4; + hyphens: none; + font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; + line-height: 1.4; + direction: ltr; + cursor: text; +} + +// code blocks +pre[class*='language-'] { + overflow: auto; + margin: 1em 0; + padding: 1.2em; + border-radius: 3px; + font-size: 85%; +} + +p code, +li code, +table code { + margin: 0; + border-radius: 3px; + padding: 0.2em 0; + font-size: 85%; + + &:before, + &:after { + letter-spacing: -0.2em; + content: '\00a0'; + } +} + +code, +:not(pre) > code[class*='language-'], +pre[class*='language-'] { + background: map-get($code-colors, light-gray); +} + +// inline code +:not(pre) > code[class*='language-'] { + padding: 0.1em; + border-radius: 0.3em; +} + + +// token colors +.token { + + &.comment, + &.prolog, + &.doctype, + &.cdata { + color: map-get($code-colors, dark-gray); + } + + &.punctuation, + &.string, + &.atrule, + &.attr-value { + color: map-get($code-colors, blue); + } + + &.property, + &.tag { + color: map-get($code-colors, green); + } + + &.boolean, + &.number { + color: map-get($code-colors, teal); + } + + &.selector, + &.attr-name, + &.attr-value .punctuation:first-child, + &.keyword, + &.regex, + &.important { + color: map-get($code-colors, maroon); + } + + + &.operator, + &.entity, + &.url, + .language-css &.string { + color: map-get($code-colors, purple); + } + + &.entity { + cursor: help; + } + +} + +.namespace { + opacity: 0.7; +} diff --git a/src/assets/fabricator/styles/partials/_color-chips.scss b/src/assets/fabricator/styles/partials/_color-chips.scss new file mode 100755 index 0000000..eb38298 --- /dev/null +++ b/src/assets/fabricator/styles/partials/_color-chips.scss @@ -0,0 +1,25 @@ +.f-color-chip { + padding: 1em; + min-width: 9em; + border-top-width: 9em; + border-top-style: solid; + border-bottom-width: 0.5em; + border-bottom-style: solid; + background-color: #fff; + font-weight: 700; + font-size: 0.75em; + display: inline-block; + margin-right: 1em; + margin-bottom: 2em; + + .f-color-chip__color { + background-color: #fff; + content: attr(data-color); + font-weight: 400; + } +} + +.f-color-chip--primary { + width: 12em; + border-top-width: 13em; +} diff --git a/src/assets/fabricator/styles/partials/_controls.scss b/src/assets/fabricator/styles/partials/_controls.scss new file mode 100755 index 0000000..ab9afb0 --- /dev/null +++ b/src/assets/fabricator/styles/partials/_controls.scss @@ -0,0 +1,60 @@ +.f-controls { + @include clearfix; + + .f-icon { + box-sizing: border-box; + width: 33.333333333%; + padding: 0.75em 0; + text-align: center; + float: left; + cursor: pointer; + + &:hover:not(.f-active) { + use { + fill: map-get($colors, normal); + } + } + + &:last-child { + border-right: 0; + } + + svg { + width: 14px; + height: 14px; + display: inline-block; + vertical-align: middle; + } + + use { + fill: map-get($colors, normal); + } + } + + .f-active { + box-shadow: inset 0 3px 0 map-get($colors, emphasis); + + use { + fill: map-get($colors, emphasis); + } + } +} + +.f-control { + cursor: pointer; + vertical-align: middle; + margin-left: 0.75rem; + + &:first-child { + margin-left: 0; + } + + svg { + width: 14px; + height: 14px; + + use { + fill: map-get($colors, normal); + } + } +} diff --git a/src/assets/fabricator/styles/partials/_item.scss b/src/assets/fabricator/styles/partials/_item.scss new file mode 100755 index 0000000..1d52b63 --- /dev/null +++ b/src/assets/fabricator/styles/partials/_item.scss @@ -0,0 +1,89 @@ +.f-item-group { + @include clearfix; + margin-top: 3rem; + margin-bottom: 3rem; + padding-bottom: 3rem; + border-bottom: 1px solid map-get($colors, light); + + &:last-child { + border-bottom: 0; + margin-bottom: 0; + } + + & ~ & { + margin-top: 0; + } + + & > & { + padding-bottom: 1.5rem; + margin-bottom: 1.5rem; + border-bottom: 0; + + &:first-of-type { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + padding-bottom: 0; + } + } +} + +.f-item-code { + margin-top: 2rem; +} + +.f-item-preview { + @include clearfix; +} + +.f-item-border-bottom { + border-bottom: 1px solid map-get($colors, light); +} + +.f-item-heading-group { + @include clearfix; + margin-bottom: 2rem; + vertical-align: middle; +} + +.f-item-heading { + margin-top: 0; + margin-bottom: 0; + display: inline-block; + vertical-align: middle; + line-height: 1; +} + + +.f-item-controls { + display: inline-block; + vertical-align: middle; + margin-left: 0.5rem; + + .f-control { + width: 14px; + height: 14px; + display: block; + float: left; + + &:hover { + use { + fill: map-get($colors, normal); + } + } + + use { + fill: map-get($colors, light); + } + } +} + +.f-item-hidden { + display: none; +} + +.f-item-notes { + font-size: 0.875rem; +} diff --git a/src/assets/fabricator/styles/partials/_main.scss b/src/assets/fabricator/styles/partials/_main.scss new file mode 100755 index 0000000..d95823f --- /dev/null +++ b/src/assets/fabricator/styles/partials/_main.scss @@ -0,0 +1,50 @@ +/* main */ +html { + height: 100%; + + @media (max-width: 60em) { + &.state--menu-active { + overflow: hidden; + } + } +} + +body { + margin: 0; + min-height: 100%; + + @media (max-width: 60em) { + .state--menu-active & { + width: 100%; + height: 100%; + } + } +} + +.f-container { + @include clearfix; + @include transition; + position: relative; + z-index: 1; + margin-left: 0; + background-color: #fff; + transform: translateZ(0); + + @media (max-width: 60em) { + min-height: 100vh; + + .state--menu-active & { + transform: translate(-$menu-width, 0); + } + } + + @media (min-width: 60em) { + margin-left: $menu-width; + } +} + +.f-main { + @include borderBox; + padding: 1em; + min-height: 100%; +} diff --git a/src/assets/fabricator/styles/partials/_menu.scss b/src/assets/fabricator/styles/partials/_menu.scss new file mode 100755 index 0000000..aff5e96 --- /dev/null +++ b/src/assets/fabricator/styles/partials/_menu.scss @@ -0,0 +1,101 @@ +// menu +.f-menu { + position: fixed; + top: 0; + right: 0; + z-index: 0; + overflow-x: hidden; + overflow-y: auto; + width: $menu-width; + height: 100%; + background-color: map-get($colors, menu-background); + font-size: 16px !important; + font-family: sans-serif !important; + + @media (min-width: 60em) { + right: auto; + left: 0; + } + + .state--menu-active & { + visibility: visible; + -webkit-overflow-scrolling: touch; + } + + ul { + margin-top: 0; + margin-bottom: 0; + padding-left: 0; + } + + > ul { + margin-bottom: 1em; + + > li { + > a { + margin-top: 1em; + } + } + } + + li { + list-style-type: none; + margin-top: 0; + margin-bottom: 0; + } + + a { + display: block; + padding: 0.75em 3em; + color: map-get($colors, normal) !important; + text-decoration: none; + font-size: 0.75em; + line-height: 1; + transition: background-color 200ms; + + &:hover { + color: map-get($colors, normal) !important; + text-decoration: none; + font-weight: 400; + } + + &.f-active { + font-weight: 700; + color: map-get($colors, emphasis) !important; + } + } + + .f-menu__heading { + padding-left: 2em; + color: map-get($colors, normal) !important; + font-weight: 700; + + &:hover { + color: map-get($colors, normal); + font-weight: 700; + } + } +} + +.f-controls-menu { + border-top: 1px solid map-get($colors, normal); +} + +.f-menu-bar { + @include clearfix; +} + +.f-menu-toggle { + float: right; + border: 0; + cursor: pointer; + + svg { + width: 2em; + height: 2em; + } + + @media (min-width: 60em) { + display: none; + } +} diff --git a/src/assets/fabricator/styles/partials/_variables.scss b/src/assets/fabricator/styles/partials/_variables.scss new file mode 100755 index 0000000..fe0c884 --- /dev/null +++ b/src/assets/fabricator/styles/partials/_variables.scss @@ -0,0 +1,45 @@ +$base-colors: ( + dark: hsl(0, 0%, 12%), + medium: hsl(0, 0%, 46%), + light: hsl(0, 0%, 80%) +); + +$theme-dark: ( + menu-background: lighten(map-get($base-colors, dark), 4%), + emphasis: map-get($base-colors, light), + normal: map-get($base-colors, medium) +); + +$theme-light: ( + menu-background: rgb(255, 255, 255), + emphasis: map-get($base-colors, dark), + normal: darken(map-get($base-colors, medium), 10%) +); + +$theme: $theme-light; + +$colors: map-merge($base-colors, $theme); + +// menu +$menu-width: 14rem; + +// mixins +@mixin clearfix { + &:after { + clear: both; + } + + &:before, + &:after { + display: table; + content: ' '; + } +} + +@mixin transition { + transition: all 350ms cubic-bezier(0.86, 0, 0.07, 1) 0s; +} + +@mixin borderBox { + box-sizing: border-box; +} diff --git a/src/assets/toolkit/scripts/toolkit.js b/src/assets/toolkit/scripts/toolkit.js new file mode 100755 index 0000000..d097f06 --- /dev/null +++ b/src/assets/toolkit/scripts/toolkit.js @@ -0,0 +1,5 @@ +/** + * Toolkit JavaScript + */ + +'use strict'; diff --git a/src/assets/toolkit/styles/toolkit.scss b/src/assets/toolkit/styles/toolkit.scss new file mode 100755 index 0000000..f230362 --- /dev/null +++ b/src/assets/toolkit/styles/toolkit.scss @@ -0,0 +1,7 @@ +/** + * Toolkit styles + */ + +body { + font-family: sans-serif; +} diff --git a/src/data/home.json b/src/data/home.json new file mode 100755 index 0000000..f750bd1 --- /dev/null +++ b/src/data/home.json @@ -0,0 +1,3 @@ +{ + "greeting": "Hello" +} diff --git a/src/docs/javascript.md b/src/docs/javascript.md new file mode 100755 index 0000000..697518f --- /dev/null +++ b/src/docs/javascript.md @@ -0,0 +1,5 @@ +This is a markdown document. + +```javascript +var foo = "bar" +``` diff --git a/src/favicon.ico b/src/favicon.ico new file mode 100755 index 0000000000000000000000000000000000000000..925cf15424f6d339dc97be906aa4bbc8fe094fe4 GIT binary patch literal 17542 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 literal 0 HcmV?d00001 diff --git a/src/materials/components/button.html b/src/materials/components/button.html new file mode 100755 index 0000000..0317659 --- /dev/null +++ b/src/materials/components/button.html @@ -0,0 +1,5 @@ +--- +notes: | + These are notes associated with this `button` component. +--- + diff --git a/src/materials/components/checkbox.html b/src/materials/components/checkbox.html new file mode 100755 index 0000000..102fc6f --- /dev/null +++ b/src/materials/components/checkbox.html @@ -0,0 +1,3 @@ + diff --git a/src/materials/components/lists/ordered.html b/src/materials/components/lists/ordered.html new file mode 100755 index 0000000..6f0c8e9 --- /dev/null +++ b/src/materials/components/lists/ordered.html @@ -0,0 +1,5 @@ +
    +
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    2. +
  2. Aliquam tincidunt mauris eu risus.
    3. +
  3. Vestibulum auctor dapibus neque.
    4. +
\ No newline at end of file diff --git a/src/materials/components/lists/unordered.html b/src/materials/components/lists/unordered.html new file mode 100755 index 0000000..115af04 --- /dev/null +++ b/src/materials/components/lists/unordered.html @@ -0,0 +1,5 @@ +
    +
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • +
  • Aliquam tincidunt mauris eu risus.
    • +
  • Vestibulum auctor dapibus neque.
    • +
\ No newline at end of file diff --git a/src/materials/components/paragraph.html b/src/materials/components/paragraph.html new file mode 100755 index 0000000..504e87b --- /dev/null +++ b/src/materials/components/paragraph.html @@ -0,0 +1 @@ +

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus.

\ No newline at end of file diff --git a/src/materials/components/radio.html b/src/materials/components/radio.html new file mode 100755 index 0000000..378e3eb --- /dev/null +++ b/src/materials/components/radio.html @@ -0,0 +1,11 @@ + + + + + diff --git a/src/materials/components/select.html b/src/materials/components/select.html new file mode 100755 index 0000000..1dacf7f --- /dev/null +++ b/src/materials/components/select.html @@ -0,0 +1,7 @@ + \ No newline at end of file diff --git a/src/materials/components/table.html b/src/materials/components/table.html new file mode 100755 index 0000000..889f8c0 --- /dev/null +++ b/src/materials/components/table.html @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table Heading 1Table Heading 2Table Heading 3
Table Footer 1Table Footer 2Table Footer 3
Table Cell 1Table Cell 2Table Cell 3
Table Cell 1Table Cell 2Table Cell 3
Table Cell 1Table Cell 2Table Cell 3
Table Cell 1Table Cell 2Table Cell 3
\ No newline at end of file diff --git a/src/materials/components/text-input.html b/src/materials/components/text-input.html new file mode 100755 index 0000000..e821870 --- /dev/null +++ b/src/materials/components/text-input.html @@ -0,0 +1,2 @@ + + diff --git a/src/materials/components/textarea.html b/src/materials/components/textarea.html new file mode 100755 index 0000000..2f8a0c6 --- /dev/null +++ b/src/materials/components/textarea.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/materials/structures/form.html b/src/materials/structures/form.html new file mode 100755 index 0000000..c83690a --- /dev/null +++ b/src/materials/structures/form.html @@ -0,0 +1,6 @@ +
+
+ {{> text-input}} +
+ {{> button}} +
diff --git a/src/views/components.html b/src/views/components.html new file mode 100755 index 0000000..c638547 --- /dev/null +++ b/src/views/components.html @@ -0,0 +1,11 @@ +--- +fabricator: true +--- + +

Components

+ +{{#each materials.components.items}} + +{{> f-item this}} + +{{/each}} diff --git a/src/views/docs.html b/src/views/docs.html new file mode 100755 index 0000000..aead8dc --- /dev/null +++ b/src/views/docs.html @@ -0,0 +1,14 @@ +--- +fabricator: true +--- + +

Docs

+ +{{#each docs}} + +
+

{{name}}

+ {{{content}}} +
+ +{{/each}} diff --git a/src/views/index.html b/src/views/index.html new file mode 100755 index 0000000..09c226c --- /dev/null +++ b/src/views/index.html @@ -0,0 +1,61 @@ +--- +title: Overview | Fabricator +fabricator: true +--- + +

Overview

+ +

The front-end toolkit is a highly-modular design system for building web pages. It contains a collection of components and structures that can be assembled into more complex page layouts.

+ +

This guide contains real working examples, code snippets, documentation, and style guidelines.

+ +

Start by adding the following files to your page:

+ +

+ toolkit.css + toolkit.js +

+ +
+ +

Color

+ +
+
Dark
+
rgb(30,30,30)
+
+ +
+
Light
+
rgb(242,242,242)
+
+ +
+ +
+
Red
+
rgb(201,55,6)
+
+ +
+
Yellow
+
rgb(252,207,80)
+
+ +
+
Blue
+
rgb(39,102,143)
+
+ +
+ +

Typography

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam enim sunt sapiente molestias, sed dicta inventore consectetur beatae asperiores, aliquid laboriosam animi, praesentium repudiandae et, quam saepe sint cupiditate reiciendis.

+ +

Heading Level 1

+

Heading Level 2

+

Heading Level 3

+

Heading Level 4

+
Heading Level 5
+
Heading Level 6
diff --git a/src/views/layouts/default.html b/src/views/layouts/default.html new file mode 100755 index 0000000..a6937f5 --- /dev/null +++ b/src/views/layouts/default.html @@ -0,0 +1,49 @@ + + + + + + + + {{title}} + + {{#if fabricator}}{{/if}} + + + + + + + + + {{#if fabricator}} + {{> f-icons}} + {{> f-menu}} +
+
+ +
+
+ + + +
+
+ {{/if}} + + + {% body %} + + + {{#if fabricator}} +
+
+ + {{/if}} + + + + + + + diff --git a/src/views/layouts/includes/f-icons.html b/src/views/layouts/includes/f-icons.html new file mode 100755 index 0000000..8a507c5 --- /dev/null +++ b/src/views/layouts/includes/f-icons.html @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/views/layouts/includes/f-item-content.html b/src/views/layouts/includes/f-item-content.html new file mode 100755 index 0000000..e241c24 --- /dev/null +++ b/src/views/layouts/includes/f-item-content.html @@ -0,0 +1,9 @@ +{{#if notes}}
+ {{{notes}}} +
{{/if}} +
+ {{{material @key @root}}} +
+
+ 
{{material @key @root}}
+
diff --git a/src/views/layouts/includes/f-item-controls.html b/src/views/layouts/includes/f-item-controls.html new file mode 100755 index 0000000..1e0b171 --- /dev/null +++ b/src/views/layouts/includes/f-item-controls.html @@ -0,0 +1,12 @@ +
+ {{#if notes}} + + + + {{/if}} + + + + + +
diff --git a/src/views/layouts/includes/f-item.html b/src/views/layouts/includes/f-item.html new file mode 100755 index 0000000..e600c0a --- /dev/null +++ b/src/views/layouts/includes/f-item.html @@ -0,0 +1,22 @@ +
+ +{{#if items}} +
+

{{name}}

+
+ {{#each items}} +
+
+

{{name}}

+ {{> f-item-controls}} +
{{> f-item-content this}} +
+ {{/each}} +{{else}} +
+

{{name}}

+ {{> f-item-controls}} +
{{> f-item-content this}} +{{/if}} + +
diff --git a/src/views/layouts/includes/f-menu.html b/src/views/layouts/includes/f-menu.html new file mode 100755 index 0000000..03f4afd --- /dev/null +++ b/src/views/layouts/includes/f-menu.html @@ -0,0 +1,70 @@ + +
+ +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + +
    + +
  • + Overview +
    • + + {{#each materials}} +
  • + {{name}} +
      + {{#each items}} +
    • + {{name}} +
      • + {{/each}} +
    +
    • + {{/each}} + + {{#each views}} +
  • + {{name}} +
      + {{#each items}} +
    • + {{name}} +
      • + {{/each}} +
    +
    • + {{/each}} + +
  • + Docs +
      + {{#each docs}} +
    • + {{name}} +
      • + {{/each}} +
    +
    • + +
+ + +
+ diff --git a/src/views/pages.html b/src/views/pages.html new file mode 100755 index 0000000..a7b3444 --- /dev/null +++ b/src/views/pages.html @@ -0,0 +1,15 @@ +--- +fabricator: true +--- + +

Pages

+ +
    +{{#each views.pages.items}} + +
  • + {{name}} +
    • + +{{/each}} +
diff --git a/src/views/pages/home.html b/src/views/pages/home.html new file mode 100755 index 0000000..2fe7b44 --- /dev/null +++ b/src/views/pages/home.html @@ -0,0 +1,7 @@ +

{{home.greeting}}, World!

+ +{{> paragraph}} + +
+ {{> form}} +
diff --git a/src/views/structures.html b/src/views/structures.html new file mode 100755 index 0000000..369ea65 --- /dev/null +++ b/src/views/structures.html @@ -0,0 +1,11 @@ +--- +fabricator: true +--- + +

Structures

+ +{{#each materials.structures.items}} + +{{> f-item this}} + +{{/each}} From cced14cc2e9c8ca9ffa1ff92240b8c4263c48d03 Mon Sep 17 00:00:00 2001 From: Luke Askew Date: Fri, 3 Apr 2015 16:50:54 -0400 Subject: [PATCH 02/51] mvp --- .gitignore | 1 + bower.json | 21 + dist/assets/fabricator/scripts/f.js | 879 ++++++++++- dist/assets/fabricator/styles/f.css | 322 +++- dist/assets/toolkit/images/bolt.svg | 1 + dist/assets/toolkit/images/head.svg | 1 + dist/assets/toolkit/images/logo.svg | 1 + dist/assets/toolkit/scripts/toolkit.js | 9 +- dist/assets/toolkit/styles/toolkit.css | 1351 ++++++++++++++++- dist/components.html | 320 ++-- dist/docs.html | 50 +- dist/docs/index.html | 53 + dist/index.html | 203 +-- dist/pages.html | 46 +- dist/pages/home.html | 39 - dist/structures.html | 75 +- package.json | 2 + .../fabricator/styles/partials/_menu.scss | 2 +- src/assets/toolkit/images/bolt.svg | 10 + src/assets/toolkit/images/head.svg | 588 +++++++ src/assets/toolkit/images/logo.svg | 1 + src/assets/toolkit/styles/base/_grid.scss | 68 + .../toolkit/styles/base/_normalize.scss | 424 ++++++ .../toolkit/styles/base/_typography.scss | 22 + .../toolkit/styles/components/_button.scss | 15 + .../toolkit/styles/components/_footer.scss | 6 + .../styles/components/_header-bar.scss | 29 + .../toolkit/styles/components/_hero.scss | 31 + .../styles/components/_page-header.scss | 14 + .../toolkit/styles/components/_symbols.scss | 5 + .../toolkit/styles/mixins/_breakpoint.scss | 9 + src/assets/toolkit/styles/mixins/_type.scss | 3 + src/assets/toolkit/styles/toolkit.scss | 25 +- .../styles/variables/_breakpoints.scss | 9 + .../toolkit/styles/variables/_colors.scss | 33 + src/docs/javascript.md | 5 - src/materials/components/checkbox.html | 3 - src/materials/components/footer.html | 4 + src/materials/components/header-bar.html | 9 + src/materials/components/hero.html | 7 + src/materials/components/page-header.html | 5 + src/materials/components/radio.html | 11 - src/materials/components/select.html | 7 - src/materials/components/symbols.html | 19 + src/materials/components/table.html | 38 - src/materials/structures/form.html | 6 - src/views/docs.html | 14 - src/views/docs/index.html | 8 + src/views/index.html | 60 +- src/views/layouts/2-column.html | 39 + src/views/layouts/default.html | 2 + src/views/layouts/includes/f-menu.html | 4 - src/views/pages.html | 15 - src/views/pages/home.html | 7 - src/views/structures.html | 11 - 55 files changed, 4242 insertions(+), 700 deletions(-) create mode 100644 bower.json create mode 100644 dist/assets/toolkit/images/bolt.svg create mode 100644 dist/assets/toolkit/images/head.svg create mode 100644 dist/assets/toolkit/images/logo.svg create mode 100644 dist/docs/index.html delete mode 100644 dist/pages/home.html create mode 100644 src/assets/toolkit/images/bolt.svg create mode 100644 src/assets/toolkit/images/head.svg create mode 100644 src/assets/toolkit/images/logo.svg create mode 100644 src/assets/toolkit/styles/base/_grid.scss create mode 100644 src/assets/toolkit/styles/base/_normalize.scss create mode 100644 src/assets/toolkit/styles/base/_typography.scss create mode 100644 src/assets/toolkit/styles/components/_button.scss create mode 100644 src/assets/toolkit/styles/components/_footer.scss create mode 100644 src/assets/toolkit/styles/components/_header-bar.scss create mode 100644 src/assets/toolkit/styles/components/_hero.scss create mode 100644 src/assets/toolkit/styles/components/_page-header.scss create mode 100644 src/assets/toolkit/styles/components/_symbols.scss create mode 100644 src/assets/toolkit/styles/mixins/_breakpoint.scss create mode 100644 src/assets/toolkit/styles/mixins/_type.scss create mode 100644 src/assets/toolkit/styles/variables/_breakpoints.scss create mode 100644 src/assets/toolkit/styles/variables/_colors.scss delete mode 100755 src/docs/javascript.md delete mode 100755 src/materials/components/checkbox.html create mode 100644 src/materials/components/footer.html create mode 100644 src/materials/components/header-bar.html create mode 100644 src/materials/components/hero.html create mode 100644 src/materials/components/page-header.html delete mode 100755 src/materials/components/radio.html delete mode 100755 src/materials/components/select.html create mode 100644 src/materials/components/symbols.html delete mode 100755 src/materials/components/table.html delete mode 100755 src/materials/structures/form.html delete mode 100755 src/views/docs.html create mode 100644 src/views/docs/index.html create mode 100755 src/views/layouts/2-column.html delete mode 100755 src/views/pages.html delete mode 100755 src/views/pages/home.html delete mode 100755 src/views/structures.html diff --git a/.gitignore b/.gitignore index 5455e0c..c353790 100755 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ node_modules .sass-cache +bower_components diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..fa4a22b --- /dev/null +++ b/bower.json @@ -0,0 +1,21 @@ +{ + "name": "fbrctr.github.io", + "version": "0.0.0", + "homepage": "https://github.com/fbrctr/fbrctr.github.io", + "authors": [ + "Luke Askew " + ], + "license": "MIT", + "private": true, + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ], + "devDependencies": { + "neat": "~1.7.2", + "css-utils": "~0.1.4" + } +} diff --git a/dist/assets/fabricator/scripts/f.js b/dist/assets/fabricator/scripts/f.js index 417cf46..170935b 100755 --- a/dist/assets/fabricator/scripts/f.js +++ b/dist/assets/fabricator/scripts/f.js @@ -1 +1,878 @@ -!function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var r=t.util.type(e);switch(r){case"Object":var a={};for(var n in e)e.hasOwnProperty(n)&&(a[n]=t.util.clone(e[n]));return a;case"Array":return e.slice()}return e}},languages:{extend:function(e,r){var a=t.util.clone(t.languages[e]);for(var n in r)a[n]=r[n];return a},insertBefore:function(e,r,a,n){n=n||t.languages;var o=n[e],i={};for(var l in o)if(o.hasOwnProperty(l)){if(l==r)for(var s in a)a.hasOwnProperty(s)&&(i[s]=a[s]);i[l]=o[l]}return n[e]=i},DFS:function(e,r){for(var a in e)r.call(e,a,e[a]),"Object"===t.util.type(e)&&t.languages.DFS(e[a],r)}},highlightAll:function(e,r){for(var a,n=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'),o=0;a=n[o++];)t.highlightElement(a,e===!0,r)},highlightElement:function(a,n,o){for(var i,l,s=a;s&&!e.test(s.className);)s=s.parentNode;if(s&&(i=(s.className.match(e)||[,""])[1],l=t.languages[i]),l){a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+i,s=a.parentNode,/pre/i.test(s.nodeName)&&(s.className=s.className.replace(e,"").replace(/\s+/g," ")+" language-"+i);var c=a.textContent;if(c){c=c.replace(/&/g,"&").replace(/e.length)break e;if(!(f instanceof a)){l.lastIndex=0;var d=l.exec(f);if(d){c&&(g=d[1].length);var m=d.index-1+g,d=d[0].slice(g),p=d.length,h=m+p,v=f.slice(0,m+1),b=f.slice(h+1),y=[u,1];v&&y.push(v);var w=new a(i,s?t.tokenize(d,s):d);y.push(w),b&&y.push(b),Array.prototype.splice.apply(n,y)}}}}return n},hooks:{all:{},add:function(e,r){var a=t.hooks.all;a[e]=a[e]||[],a[e].push(r)},run:function(e,r){var a=t.hooks.all[e];if(a&&a.length)for(var n,o=0;n=a[o++];)n(r)}}},r=t.Token=function(e,t){this.type=e,this.content=t};if(r.stringify=function(e,a,n){if("string"==typeof e)return e;if("[object Array]"==Object.prototype.toString.call(e))return e.map(function(t){return r.stringify(t,a,e)}).join("");var o={type:e.type,content:r.stringify(e.content,a,n),tag:"span",classes:["token",e.type],attributes:{},language:a,parent:n};"comment"==o.type&&(o.attributes.spellcheck="true"),t.hooks.run("wrap",o);var i="";for(var l in o.attributes)i+=l+'="'+(o.attributes[l]||"")+'"';return"<"+o.tag+' class="'+o.classes.join(" ")+'" '+i+">"+o.content+""},!self.document)return void self.addEventListener("message",function(e){var r=JSON.parse(e.data),a=r.language,n=r.code;self.postMessage(JSON.stringify(t.tokenize(n,t.languages[a]))),self.close()},!1);var a=document.getElementsByTagName("script");a=a[a.length-1],a&&(t.filename=a.src,document.addEventListener&&!a.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll))}(),Prism.languages.markup={comment:/<!--[\w\W]*?-->/g,prolog:/<\?.+?\?>/,doctype:/<!DOCTYPE.+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|\w+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/&#?[\da-z]{1,8};/gi},Prism.hooks.add("wrap",function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))}),Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/gi,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,ignore:/&(lt|gt|amp);/gi,punctuation:/[\{\};:]/g},Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/(<|<)style[\w\W]*?(>|>)[\w\W]*?(<|<)\/style(>|>)/gi,inside:{tag:{pattern:/(<|<)style[\w\W]*?(>|>)|(<|<)\/style(>|>)/gi,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}}),Prism.languages.clike={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:class|interface|extends|implements|trait|instanceof|new)\s+)[a-z0-9_\.\\]+/gi,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/gi,inside:{punctuation:/\(/}},number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|=?<|=?>|={1,2}|(&){1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g},Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(var|let|if|else|while|do|for|return|in|instanceof|function|new|with|typeof|try|catch|finally|null|break|continue)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(<|<)script[\w\W]*?(>|>)[\w\W]*?(<|<)\/script(>|>)/gi,inside:{tag:{pattern:/(<|<)script[\w\W]*?(>|>)|(<|<)\/script(>|>)/gi,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}}),function(){if(self.Prism&&self.document&&document.querySelector){var e={js:"javascript",html:"markup",svg:"markup"};Array.prototype.slice.call(document.querySelectorAll("pre[data-src]")).forEach(function(t){var r=t.getAttribute("data-src"),a=(r.match(/\.(\w+)$/)||[,""])[1],n=e[a]||a,o=document.createElement("code");o.className="language-"+n,t.textContent="",o.textContent="Loading…",t.appendChild(o);var i=new XMLHttpRequest;i.open("GET",r,!0),i.onreadystatechange=function(){4==i.readyState&&(i.status<400&&i.responseText?(o.textContent=i.responseText,Prism.highlightElement(o)):o.textContent=i.status>=400?"✖ Error "+i.status+" while fetching file: "+i.statusText:"✖ Error: File does not exist or is empty")},i.send(null)})}}();var fabricator=window.fabricator={};fabricator.options={toggles:{details:!0,notes:!0,code:!1}},fabricator.test={},fabricator.test.localStorage=function(){var e="_f";try{return localStorage.setItem(e,e),localStorage.removeItem(e),!0}catch(t){return!1}}(),fabricator.test.localStorage&&(localStorage.fabricator=localStorage.fabricator||JSON.stringify(fabricator.options)),fabricator.dom={primaryMenu:document.querySelector(".f-menu"),menuItems:document.querySelectorAll(".f-menu li a"),menuToggle:document.querySelector(".f-menu-toggle")},fabricator.buildColorChips=function(){for(var e,t=document.querySelectorAll(".f-color-chip"),r=t.length-1;r>=0;r--)e=t[r].querySelector(".f-color-chip__color").innerHTML,t[r].style.borderTopColor=e,t[r].style.borderBottomColor=e;return this},fabricator.setActiveItem=function(){var e=function(){for(var e,t,r=[],a=fabricator.dom.menuItems.length-1;a>=0;a--)fabricator.dom.menuItems[a].classList.remove("f-active"),t=fabricator.dom.menuItems[a].getAttribute("href"),e=t.indexOf("#")>-1?t.split("#").pop():t.split("/").pop().replace(/\.[^/.]+$/,""),r.push(e);return r.reverse()},t=function(){var t,r,a=window.location.href,n=e();t=a.indexOf("#")>-1?window.location.hash.replace("#",""):window.location.pathname.split("/").pop().replace(/\.[^/.]+$/,""),""===t&&(t="index"),r=n.indexOf(t)>-1?n.indexOf(t):0,fabricator.dom.menuItems[r].classList.add("f-active")};return window.addEventListener("hashchange",t),t(),this},fabricator.primaryMenuControls=function(){var e=fabricator.dom.menuToggle,t=function(){document.querySelector("html").classList.toggle("state--menu-active")};e.addEventListener("click",function(){t()});for(var r=function(){t()},a=0;a=0;r--)e[r].addEventListener("click",t.bind(this,e[r]))},function(){fabricator.primaryMenuControls().allItemsToggles().singleItemToggle().buildColorChips().setActiveItem().bindCodeAutoSelect(),Prism.highlightAll()}(); \ No newline at end of file + + +/* ********************************************** + Begin prism-core.js +********************************************** */ + +/** + * Prism: Lightweight, robust, elegant syntax highlighting + * MIT license http://www.opensource.org/licenses/mit-license.php/ + * @author Lea Verou http://lea.verou.me + */ + +(function(){ + +// Private helper vars +var lang = /\blang(?:uage)?-(?!\*)(\w+)\b/i; + +var _ = self.Prism = { + util: { + type: function (o) { + return Object.prototype.toString.call(o).match(/\[object (\w+)\]/)[1]; + }, + + // Deep clone a language definition (e.g. to extend it) + clone: function (o) { + var type = _.util.type(o); + + switch (type) { + case 'Object': + var clone = {}; + + for (var key in o) { + if (o.hasOwnProperty(key)) { + clone[key] = _.util.clone(o[key]); + } + } + + return clone; + + case 'Array': + return o.slice(); + } + + return o; + } + }, + + languages: { + extend: function (id, redef) { + var lang = _.util.clone(_.languages[id]); + + for (var key in redef) { + lang[key] = redef[key]; + } + + return lang; + }, + + // Insert a token before another token in a language literal + insertBefore: function (inside, before, insert, root) { + root = root || _.languages; + var grammar = root[inside]; + var ret = {}; + + for (var token in grammar) { + + if (grammar.hasOwnProperty(token)) { + + if (token == before) { + + for (var newToken in insert) { + + if (insert.hasOwnProperty(newToken)) { + ret[newToken] = insert[newToken]; + } + } + } + + ret[token] = grammar[token]; + } + } + + return root[inside] = ret; + }, + + // Traverse a language definition with Depth First Search + DFS: function(o, callback) { + for (var i in o) { + callback.call(o, i, o[i]); + + if (_.util.type(o) === 'Object') { + _.languages.DFS(o[i], callback); + } + } + } + }, + + highlightAll: function(async, callback) { + var elements = document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'); + + for (var i=0, element; element = elements[i++];) { + _.highlightElement(element, async === true, callback); + } + }, + + highlightElement: function(element, async, callback) { + // Find language + var language, grammar, parent = element; + + while (parent && !lang.test(parent.className)) { + parent = parent.parentNode; + } + + if (parent) { + language = (parent.className.match(lang) || [,''])[1]; + grammar = _.languages[language]; + } + + if (!grammar) { + return; + } + + // Set language on the element, if not present + element.className = element.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language; + + // Set language on the parent, for styling + parent = element.parentNode; + + if (/pre/i.test(parent.nodeName)) { + parent.className = parent.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language; + } + + var code = element.textContent; + + if(!code) { + return; + } + + code = code.replace(/&/g, '&').replace(/ text.length) { + // Something went terribly wrong, ABORT, ABORT! + break tokenloop; + } + + if (str instanceof Token) { + continue; + } + + pattern.lastIndex = 0; + + var match = pattern.exec(str); + + if (match) { + if(lookbehind) { + lookbehindLength = match[1].length; + } + + var from = match.index - 1 + lookbehindLength, + match = match[0].slice(lookbehindLength), + len = match.length, + to = from + len, + before = str.slice(0, from + 1), + after = str.slice(to + 1); + + var args = [i, 1]; + + if (before) { + args.push(before); + } + + var wrapped = new Token(token, inside? _.tokenize(match, inside) : match); + + args.push(wrapped); + + if (after) { + args.push(after); + } + + Array.prototype.splice.apply(strarr, args); + } + } + } + + return strarr; + }, + + hooks: { + all: {}, + + add: function (name, callback) { + var hooks = _.hooks.all; + + hooks[name] = hooks[name] || []; + + hooks[name].push(callback); + }, + + run: function (name, env) { + var callbacks = _.hooks.all[name]; + + if (!callbacks || !callbacks.length) { + return; + } + + for (var i=0, callback; callback = callbacks[i++];) { + callback(env); + } + } + } +}; + +var Token = _.Token = function(type, content) { + this.type = type; + this.content = content; +}; + +Token.stringify = function(o, language, parent) { + if (typeof o == 'string') { + return o; + } + + if (Object.prototype.toString.call(o) == '[object Array]') { + return o.map(function(element) { + return Token.stringify(element, language, o); + }).join(''); + } + + var env = { + type: o.type, + content: Token.stringify(o.content, language, parent), + tag: 'span', + classes: ['token', o.type], + attributes: {}, + language: language, + parent: parent + }; + + if (env.type == 'comment') { + env.attributes['spellcheck'] = 'true'; + } + + _.hooks.run('wrap', env); + + var attributes = ''; + + for (var name in env.attributes) { + attributes += name + '="' + (env.attributes[name] || '') + '"'; + } + + return '<' + env.tag + ' class="' + env.classes.join(' ') + '" ' + attributes + '>' + env.content + ''; + +}; + +if (!self.document) { + // In worker + self.addEventListener('message', function(evt) { + var message = JSON.parse(evt.data), + lang = message.language, + code = message.code; + + self.postMessage(JSON.stringify(_.tokenize(code, _.languages[lang]))); + self.close(); + }, false); + + return; +} + +// Get current script and highlight +var script = document.getElementsByTagName('script'); + +script = script[script.length - 1]; + +if (script) { + _.filename = script.src; + + if (document.addEventListener && !script.hasAttribute('data-manual')) { + document.addEventListener('DOMContentLoaded', _.highlightAll); + } +} + +})(); + +/* ********************************************** + Begin prism-markup.js +********************************************** */ + +Prism.languages.markup = { + 'comment': /<!--[\w\W]*?-->/g, + 'prolog': /<\?.+?\?>/, + 'doctype': /<!DOCTYPE.+?>/, + 'cdata': /<!\[CDATA\[[\w\W]*?]]>/i, + 'tag': { + pattern: /<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|\w+))?\s*)*\/?>/gi, + inside: { + 'tag': { + pattern: /^<\/?[\w:-]+/i, + inside: { + 'punctuation': /^<\/?/, + 'namespace': /^[\w-]+?:/ + } + }, + 'attr-value': { + pattern: /=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi, + inside: { + 'punctuation': /=|>|"/g + } + }, + 'punctuation': /\/?>/g, + 'attr-name': { + pattern: /[\w:-]+/g, + inside: { + 'namespace': /^[\w-]+?:/ + } + } + + } + }, + 'entity': /&#?[\da-z]{1,8};/gi +}; + +// Plugin to make entity title show the real entity, idea by Roman Komarov +Prism.hooks.add('wrap', function(env) { + + if (env.type === 'entity') { + env.attributes['title'] = env.content.replace(/&/, '&'); + } +}); + +/* ********************************************** + Begin prism-css.js +********************************************** */ + +Prism.languages.css = { + 'comment': /\/\*[\w\W]*?\*\//g, + 'atrule': { + pattern: /@[\w-]+?.*?(;|(?=\s*{))/gi, + inside: { + 'punctuation': /[;:]/g + } + }, + 'url': /url\((["']?).*?\1\)/gi, + 'selector': /[^\{\}\s][^\{\};]*(?=\s*\{)/g, + 'property': /(\b|\B)[\w-]+(?=\s*:)/ig, + 'string': /("|')(\\?.)*?\1/g, + 'important': /\B!important\b/gi, + 'ignore': /&(lt|gt|amp);/gi, + 'punctuation': /[\{\};:]/g +}; + +if (Prism.languages.markup) { + Prism.languages.insertBefore('markup', 'tag', { + 'style': { + pattern: /(<|<)style[\w\W]*?(>|>)[\w\W]*?(<|<)\/style(>|>)/ig, + inside: { + 'tag': { + pattern: /(<|<)style[\w\W]*?(>|>)|(<|<)\/style(>|>)/ig, + inside: Prism.languages.markup.tag.inside + }, + rest: Prism.languages.css + } + } + }); +} + +/* ********************************************** + Begin prism-clike.js +********************************************** */ + +Prism.languages.clike = { + 'comment': { + pattern: /(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g, + lookbehind: true + }, + 'string': /("|')(\\?.)*?\1/g, + 'class-name': { + pattern: /((?:class|interface|extends|implements|trait|instanceof|new)\s+)[a-z0-9_\.\\]+/ig, + lookbehind: true, + inside: { + punctuation: /(\.|\\)/ + } + }, + 'keyword': /\b(if|else|while|do|for|return|in|instanceof|function|new|try|catch|finally|null|break|continue)\b/g, + 'boolean': /\b(true|false)\b/g, + 'function': { + pattern: /[a-z0-9_]+\(/ig, + inside: { + punctuation: /\(/ + } + }, + 'number': /\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g, + 'operator': /[-+]{1,2}|!|=?<|=?>|={1,2}|(&){1,2}|\|?\||\?|\*|\/|\~|\^|\%/g, + 'ignore': /&(lt|gt|amp);/gi, + 'punctuation': /[{}[\];(),.:]/g +}; + +/* ********************************************** + Begin prism-javascript.js +********************************************** */ + +Prism.languages.javascript = Prism.languages.extend('clike', { + 'keyword': /\b(var|let|if|else|while|do|for|return|in|instanceof|function|new|with|typeof|try|catch|finally|null|break|continue)\b/g, + 'number': /\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g +}); + +Prism.languages.insertBefore('javascript', 'keyword', { + 'regex': { + pattern: /(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g, + lookbehind: true + } +}); + +if (Prism.languages.markup) { + Prism.languages.insertBefore('markup', 'tag', { + 'script': { + pattern: /(<|<)script[\w\W]*?(>|>)[\w\W]*?(<|<)\/script(>|>)/ig, + inside: { + 'tag': { + pattern: /(<|<)script[\w\W]*?(>|>)|(<|<)\/script(>|>)/ig, + inside: Prism.languages.markup.tag.inside + }, + rest: Prism.languages.javascript + } + } + }); +} + +/* ********************************************** + Begin prism-file-highlight.js +********************************************** */ + +(function(){ + +if (!self.Prism || !self.document || !document.querySelector) { + return; +} + +var Extensions = { + 'js': 'javascript', + 'html': 'markup', + 'svg': 'markup' +}; + +Array.prototype.slice.call(document.querySelectorAll('pre[data-src]')).forEach(function(pre) { + var src = pre.getAttribute('data-src'); + var extension = (src.match(/\.(\w+)$/) || [,''])[1]; + var language = Extensions[extension] || extension; + + var code = document.createElement('code'); + code.className = 'language-' + language; + + pre.textContent = ''; + + code.textContent = 'Loading…'; + + pre.appendChild(code); + + var xhr = new XMLHttpRequest(); + + xhr.open('GET', src, true); + + xhr.onreadystatechange = function() { + if (xhr.readyState == 4) { + + if (xhr.status < 400 && xhr.responseText) { + code.textContent = xhr.responseText; + + Prism.highlightElement(code); + } + else if (xhr.status >= 400) { + code.textContent = '✖ Error ' + xhr.status + ' while fetching file: ' + xhr.statusText; + } + else { + code.textContent = '✖ Error: File does not exist or is empty'; + } + } + }; + + xhr.send(null); +}); + +})(); +'use strict'; + +/** + * Global `fabricator` object + * @namespace + */ +var fabricator = window.fabricator = {}; + + +/** + * Default options + * @type {Object} + */ +fabricator.options = { + toggles: { + details: true, + notes: true, + code: false + } +}; + +/** + * Feature detection + * @type {Object} + */ +fabricator.test = {}; + +// test for localstorage +fabricator.test.localStorage = (function () { + var test = '_f'; + try { + localStorage.setItem(test, test); + localStorage.removeItem(test); + return true; + } catch(e) { + return false; + } +}()); + +// create storage object if it doesn't exist; store options +if (fabricator.test.localStorage) { + localStorage.fabricator = localStorage.fabricator || JSON.stringify(fabricator.options); +} + + +/** + * Cache DOM + * @type {Object} + */ +fabricator.dom = { + primaryMenu: document.querySelector('.f-menu'), + menuItems: document.querySelectorAll('.f-menu li a'), + menuToggle: document.querySelector('.f-menu-toggle') +}; + + +/** + * Build color chips + */ +fabricator.buildColorChips = function () { + + var chips = document.querySelectorAll('.f-color-chip'), + color; + + for (var i = chips.length - 1; i >= 0; i--) { + color = chips[i].querySelector('.f-color-chip__color').innerHTML; + chips[i].style.borderTopColor = color; + chips[i].style.borderBottomColor = color; + } + + return this; + +}; + + +/** + * Add `f-active` class to active menu item + */ +fabricator.setActiveItem = function () { + + /** + * @return {Array} Sorted array of menu item 'ids' + */ + var parsedItems = function () { + + var items = [], + id, href; + + for (var i = fabricator.dom.menuItems.length - 1; i >= 0; i--) { + + // remove active class from items + fabricator.dom.menuItems[i].classList.remove('f-active'); + + // get item href + href = fabricator.dom.menuItems[i].getAttribute('href'); + + // get id + if (href.indexOf('#') > -1) { + id = href.split('#').pop(); + } else { + id = href.split('/').pop().replace(/\.[^/.]+$/, ''); + } + + items.push(id); + + } + + return items.reverse(); + + }; + + + /** + * Match the 'id' in the window location with the menu item, set menu item as active + */ + var setActive = function () { + + var href = window.location.href, + items = parsedItems(), + id, index; + + // get window 'id' + if (href.indexOf('#') > -1) { + id = window.location.hash.replace('#', ''); + } else { + id = window.location.pathname.split('/').pop().replace(/\.[^/.]+$/, ''); + } + + // In case the first menu item isn't the index page. + if (id === '') { + id = 'index'; + } + + // find the window id in the items array + index = (items.indexOf(id) > -1) ? items.indexOf(id) : 0; + + // set the matched item as active + fabricator.dom.menuItems[index].classList.add('f-active'); + + }; + + window.addEventListener('hashchange', setActive); + + setActive(); + + return this; + +}; + + +/** + * Click handler to primary menu toggle + * @return {Object} fabricator + */ +fabricator.primaryMenuControls = function () { + + // shortcut menu DOM + var toggle = fabricator.dom.menuToggle; + + // toggle classes on certain elements + var toggleClasses = function () { + document.querySelector('html').classList.toggle('state--menu-active'); + }; + + // toggle classes on click + toggle.addEventListener('click', function () { + toggleClasses(); + }); + + // close menu when clicking on item (for collapsed menu view) + var closeMenu = function () { + toggleClasses(); + }; + + for (var i = 0; i < fabricator.dom.menuItems.length; i++) { + fabricator.dom.menuItems[i].addEventListener('click', closeMenu); + } + + return this; + +}; + + +/** + * Handler for preview and code toggles + * @return {Object} fabricator + */ +fabricator.allItemsToggles = function () { + + var items = { + details: document.querySelectorAll('[data-f-toggle="details"]'), + notes: document.querySelectorAll('[data-f-toggle="notes"]'), + code: document.querySelectorAll('[data-f-toggle="code"]') + }; + + var toggleAllControls = document.querySelectorAll('.f-controls [data-f-toggle-control]'); + + var options = (fabricator.test.localStorage) ? JSON.parse(localStorage.fabricator) : fabricator.options; + + // toggle all + var toggleAllItems = function (type, value) { + + var button = document.querySelector('.f-controls [data-f-toggle-control=' + type + ']'), + _items = items[type]; + + for (var i = 0; i < _items.length; i++) { + if (value) { + _items[i].classList.remove('f-item-hidden'); + } else { + _items[i].classList.add('f-item-hidden'); + } + } + + // toggle styles + if (value) { + button.classList.add('f-active'); + } else { + button.classList.remove('f-active'); + } + + // update options + options.toggles[type] = value; + + if (fabricator.test.localStorage) { + localStorage.setItem('fabricator', JSON.stringify(options)); + } + + }; + + for (var i = 0; i < toggleAllControls.length; i++) { + + toggleAllControls[i].addEventListener('click', function (e) { + + // extract info from target node + var type = e.currentTarget.getAttribute('data-f-toggle-control'), + value = e.currentTarget.className.indexOf('f-active') < 0; + + // toggle the items + toggleAllItems(type, value); + + }); + + } + + // persist toggle options from page to page + for (var toggle in options.toggles) { + if (options.toggles.hasOwnProperty(toggle)) { + toggleAllItems(toggle, options.toggles[toggle]); + } + } + + return this; + +}; + + +/** + * Handler for single item code toggling + */ +fabricator.singleItemToggle = function () { + + var itemToggleSingle = document.querySelectorAll('.f-item-group [data-f-toggle-control]'); + + // toggle single + var toggleSingleItemCode = function (e) { + var group = this.parentNode.parentNode.parentNode, + type = e.currentTarget.getAttribute('data-f-toggle-control'); + + group.querySelector('[data-f-toggle=' + type + ']').classList.toggle('f-item-hidden'); + }; + + for (var i = 0; i < itemToggleSingle.length; i++) { + itemToggleSingle[i].addEventListener('click', toggleSingleItemCode); + } + + return this; + +}; + + +/** + * Automatically select code when code block is clicked + */ +fabricator.bindCodeAutoSelect = function () { + + var codeBlocks = document.querySelectorAll('.f-item-code'); + + var select = function (block) { + var selection = window.getSelection(); + var range = document.createRange(); + range.selectNodeContents(block.querySelector('code')); + selection.removeAllRanges(); + selection.addRange(range); + }; + + for (var i = codeBlocks.length - 1; i >= 0; i--) { + codeBlocks[i].addEventListener('click', select.bind(this, codeBlocks[i])); + } + +}; + + +/** + * Initialization + */ +(function () { + + // invoke + fabricator + .primaryMenuControls() + .allItemsToggles() + .singleItemToggle() + .buildColorChips() + .setActiveItem() + .bindCodeAutoSelect(); + + // syntax highlighting + Prism.highlightAll(); + +}()); diff --git a/dist/assets/fabricator/styles/f.css b/dist/assets/fabricator/styles/f.css index 1c9ebed..0c3cc5c 100755 --- a/dist/assets/fabricator/styles/f.css +++ b/dist/assets/fabricator/styles/f.css @@ -1 +1,321 @@ -code,code[class*='language-'],pre[class*='language-']{color:#333;text-align:left;white-space:pre;word-spacing:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;font-family:Consolas,'Liberation Mono',Menlo,Courier,monospace;line-height:1.4;direction:ltr;cursor:text}pre[class*='language-']{overflow:auto;margin:1em 0;padding:1.2em;border-radius:3px;font-size:85%}p code,li code,table code{margin:0;border-radius:3px;padding:.2em 0;font-size:85%}p code:before,p code:after,li code:before,li code:after,table code:before,table code:after{letter-spacing:-.2em;content:'\00a0'}code,:not(pre)>code[class*='language-'],pre[class*='language-']{background:#f7f7f7}:not(pre)>code[class*='language-']{padding:.1em;border-radius:.3em}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#969896}.token.punctuation,.token.string,.token.atrule,.token.attr-value{color:#183691}.token.property,.token.tag{color:#63a35c}.token.boolean,.token.number{color:#0086b3}.token.selector,.token.attr-name,.token.attr-value .punctuation:first-child,.token.keyword,.token.regex,.token.important{color:#a71d5d}.token.operator,.token.entity,.token.url,.language-css .token.string{color:#a71d5d}.token.entity{cursor:help}.namespace{opacity:.7}.f-color-chip{padding:1em;min-width:9em;border-top-width:9em;border-top-style:solid;border-bottom-width:.5em;border-bottom-style:solid;background-color:#fff;font-weight:700;font-size:.75em;display:inline-block;margin-right:1em;margin-bottom:2em}.f-color-chip .f-color-chip__color{background-color:#fff;content:attr(data-color);font-weight:400}.f-color-chip--primary{width:12em;border-top-width:13em}.f-menu{position:fixed;top:0;right:0;z-index:0;overflow-x:hidden;overflow-y:auto;width:14rem;height:100%;background-color:#fff;font-size:16px!important;font-family:sans-serif!important}@media (min-width:60em){.f-menu{right:auto;left:0}}.state--menu-active .f-menu{visibility:visible;-webkit-overflow-scrolling:touch}.f-menu ul{margin-top:0;margin-bottom:0;padding-left:0}.f-menu>ul{margin-bottom:1em}.f-menu>ul>li>a{margin-top:1em}.f-menu li{list-style-type:none;margin-top:0;margin-bottom:0}.f-menu a{display:block;padding:.75em 3em;color:#5c5c5c!important;text-decoration:none;font-size:.75em;line-height:1;-webkit-transition:background-color 200ms;transition:background-color 200ms}.f-menu a:hover{color:#5c5c5c!important;text-decoration:none;font-weight:400}.f-menu a.f-active{font-weight:700;color:#1f1f1f!important}.f-menu .f-menu__heading{padding-left:2em;color:#5c5c5c!important;font-weight:700}.f-menu .f-menu__heading:hover{color:#5c5c5c;font-weight:700}.f-controls-menu{border-top:1px solid #5c5c5c}.f-menu-bar:after{clear:both}.f-menu-bar:before,.f-menu-bar:after{display:table;content:' '}.f-menu-toggle{float:right;border:0;cursor:pointer}.f-menu-toggle svg{width:2em;height:2em}@media (min-width:60em){.f-menu-toggle{display:none}}html{height:100%}@media (max-width:60em){html.state--menu-active{overflow:hidden}}body{margin:0;min-height:100%}@media (max-width:60em){.state--menu-active body{width:100%;height:100%}}.f-container{-webkit-transition:all 350ms cubic-bezier(.86,0,.07,1)0;transition:all 350ms cubic-bezier(.86,0,.07,1)0s;position:relative;z-index:1;margin-left:0;background-color:#fff;-webkit-transform:translateZ(0);transform:translateZ(0)}.f-container:after{clear:both}.f-container:before,.f-container:after{display:table;content:' '}@media (max-width:60em){.f-container{min-height:100vh}.state--menu-active .f-container{-webkit-transform:translate(-14rem,0);-ms-transform:translate(-14rem,0);transform:translate(-14rem,0)}}@media (min-width:60em){.f-container{margin-left:14rem}}.f-main{box-sizing:border-box;padding:1em;min-height:100%}.f-controls:after{clear:both}.f-controls:before,.f-controls:after{display:table;content:' '}.f-controls .f-icon{box-sizing:border-box;width:33.33333%;padding:.75em 0;text-align:center;float:left;cursor:pointer}.f-controls .f-icon:hover:not(.f-active) use{fill:#5c5c5c}.f-controls .f-icon:last-child{border-right:0}.f-controls .f-icon svg{width:14px;height:14px;display:inline-block;vertical-align:middle}.f-controls .f-icon use{fill:#5c5c5c}.f-controls .f-active{box-shadow:inset 0 3px 0 #1f1f1f}.f-controls .f-active use{fill:#1f1f1f}.f-control{cursor:pointer;vertical-align:middle;margin-left:.75rem}.f-control:first-child{margin-left:0}.f-control svg{width:14px;height:14px}.f-control svg use{fill:#5c5c5c}.f-item-group{margin-top:3rem;margin-bottom:3rem;padding-bottom:3rem;border-bottom:1px solid #ccc}.f-item-group:after{clear:both}.f-item-group:before,.f-item-group:after{display:table;content:' '}.f-item-group:last-child{border-bottom:0;margin-bottom:0}.f-item-group~.f-item-group{margin-top:0}.f-item-group>.f-item-group{padding-bottom:1.5rem;margin-bottom:1.5rem;border-bottom:0}.f-item-group>.f-item-group:first-of-type{margin-top:0}.f-item-group>.f-item-group:last-child{margin-bottom:0;padding-bottom:0}.f-item-code{margin-top:2rem}.f-item-preview:after{clear:both}.f-item-preview:before,.f-item-preview:after{display:table;content:' '}.f-item-border-bottom{border-bottom:1px solid #ccc}.f-item-heading-group{margin-bottom:2rem;vertical-align:middle}.f-item-heading-group:after{clear:both}.f-item-heading-group:before,.f-item-heading-group:after{display:table;content:' '}.f-item-heading{margin-top:0;margin-bottom:0;line-height:1}.f-item-heading,.f-item-controls{display:inline-block;vertical-align:middle}.f-item-controls{margin-left:.5rem}.f-item-controls .f-control{width:14px;height:14px;display:block;float:left}.f-item-controls .f-control:hover use{fill:#5c5c5c}.f-item-controls .f-control use{fill:#ccc}.f-item-hidden{display:none}.f-item-notes{font-size:.875rem} \ No newline at end of file +/** + * Fabricator styles + * @author Luke Askew + * Class selectors are namespaced with "f-" + */ +/** + * Github-like theme for Prism.js + * @author Luke Askew http://github.com/lukeaskew + */ +code, code[class*='language-'], pre[class*='language-'] { + color: #333; + text-align: left; + white-space: pre; + word-spacing: normal; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; + font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; + line-height: 1.4; + direction: ltr; + cursor: text; } + +pre[class*='language-'] { + overflow: auto; + margin: 1em 0; + padding: 1.2em; + border-radius: 3px; + font-size: 85%; } + +p code, li code, table code { + margin: 0; + border-radius: 3px; + padding: 0.2em 0; + font-size: 85%; } + p code:before, p code:after, li code:before, li code:after, table code:before, table code:after { + letter-spacing: -0.2em; + content: '\00a0'; } + +code, :not(pre) > code[class*='language-'], pre[class*='language-'] { + background: #f7f7f7; } + +:not(pre) > code[class*='language-'] { + padding: 0.1em; + border-radius: 0.3em; } + +.token.comment, .token.prolog, .token.doctype, .token.cdata { + color: #969896; } +.token.punctuation, .token.string, .token.atrule, .token.attr-value { + color: #183691; } +.token.property, .token.tag { + color: #63a35c; } +.token.boolean, .token.number { + color: #0086b3; } +.token.selector, .token.attr-name, .token.attr-value .punctuation:first-child, .token.keyword, .token.regex, .token.important { + color: #a71d5d; } +.token.operator, .token.entity, .token.url, .language-css .token.string { + color: #a71d5d; } +.token.entity { + cursor: help; } + +.namespace { + opacity: 0.7; } + +.f-color-chip { + padding: 1em; + min-width: 9em; + border-top-width: 9em; + border-top-style: solid; + border-bottom-width: 0.5em; + border-bottom-style: solid; + background-color: #fff; + font-weight: 700; + font-size: 0.75em; + display: inline-block; + margin-right: 1em; + margin-bottom: 2em; } + .f-color-chip .f-color-chip__color { + background-color: #fff; + content: attr(data-color); + font-weight: 400; } + +.f-color-chip--primary { + width: 12em; + border-top-width: 13em; } + +.f-menu { + position: fixed; + top: 0; + right: 0; + z-index: 0; + overflow-x: hidden; + overflow-y: auto; + width: 14rem; + height: 100%; + background-color: white; + font-size: 16px !important; + font-family: sans-serif; } + @media (min-width: 60em) { + .f-menu { + right: auto; + left: 0; } } + .state--menu-active .f-menu { + visibility: visible; + -webkit-overflow-scrolling: touch; } + .f-menu ul { + margin-top: 0; + margin-bottom: 0; + padding-left: 0; } + .f-menu > ul { + margin-bottom: 1em; } + .f-menu > ul > li > a { + margin-top: 1em; } + .f-menu li { + list-style-type: none; + margin-top: 0; + margin-bottom: 0; } + .f-menu a { + display: block; + padding: 0.75em 3em; + color: #5c5c5c !important; + text-decoration: none; + font-size: 0.75em; + line-height: 1; + -webkit-transition: background-color 200ms; + transition: background-color 200ms; } + .f-menu a:hover { + color: #5c5c5c !important; + text-decoration: none; + font-weight: 400; } + .f-menu a.f-active { + font-weight: 700; + color: #1f1f1f !important; } + .f-menu .f-menu__heading { + padding-left: 2em; + color: #5c5c5c !important; + font-weight: 700; } + .f-menu .f-menu__heading:hover { + color: #5c5c5c; + font-weight: 700; } + +.f-controls-menu { + border-top: 1px solid #5c5c5c; } + +.f-menu-bar:after { + clear: both; } +.f-menu-bar:before, .f-menu-bar:after { + display: table; + content: ' '; } + +.f-menu-toggle { + float: right; + border: 0; + cursor: pointer; } + .f-menu-toggle svg { + width: 2em; + height: 2em; } + @media (min-width: 60em) { + .f-menu-toggle { + display: none; } } + +/* main */ +html { + height: 100%; } + @media (max-width: 60em) { + html.state--menu-active { + overflow: hidden; } } + +body { + margin: 0; + min-height: 100%; } + @media (max-width: 60em) { + .state--menu-active body { + width: 100%; + height: 100%; } } + +.f-container { + -webkit-transition: all 350ms cubic-bezier(0.86, 0, 0.07, 1) 0s; + transition: all 350ms cubic-bezier(0.86, 0, 0.07, 1) 0s; + position: relative; + z-index: 1; + margin-left: 0; + background-color: #fff; + -webkit-transform: translateZ(0); + transform: translateZ(0); } + .f-container:after { + clear: both; } + .f-container:before, .f-container:after { + display: table; + content: ' '; } + @media (max-width: 60em) { + .f-container { + min-height: 100vh; } + .state--menu-active .f-container { + -webkit-transform: translate(-14rem, 0); + -ms-transform: translate(-14rem, 0); + transform: translate(-14rem, 0); } } + @media (min-width: 60em) { + .f-container { + margin-left: 14rem; } } + +.f-main { + box-sizing: border-box; + padding: 1em; + min-height: 100%; } + +.f-controls:after { + clear: both; } +.f-controls:before, .f-controls:after { + display: table; + content: ' '; } +.f-controls .f-icon { + box-sizing: border-box; + width: 33.33333%; + padding: 0.75em 0; + text-align: center; + float: left; + cursor: pointer; } + .f-controls .f-icon:hover:not(.f-active) use { + fill: #5c5c5c; } + .f-controls .f-icon:last-child { + border-right: 0; } + .f-controls .f-icon svg { + width: 14px; + height: 14px; + display: inline-block; + vertical-align: middle; } + .f-controls .f-icon use { + fill: #5c5c5c; } +.f-controls .f-active { + box-shadow: inset 0 3px 0 #1f1f1f; } + .f-controls .f-active use { + fill: #1f1f1f; } + +.f-control { + cursor: pointer; + vertical-align: middle; + margin-left: 0.75rem; } + .f-control:first-child { + margin-left: 0; } + .f-control svg { + width: 14px; + height: 14px; } + .f-control svg use { + fill: #5c5c5c; } + +.f-item-group { + margin-top: 3rem; + margin-bottom: 3rem; + padding-bottom: 3rem; + border-bottom: 1px solid #cccccc; } + .f-item-group:after { + clear: both; } + .f-item-group:before, .f-item-group:after { + display: table; + content: ' '; } + .f-item-group:last-child { + border-bottom: 0; + margin-bottom: 0; } + .f-item-group ~ .f-item-group { + margin-top: 0; } + .f-item-group > .f-item-group { + padding-bottom: 1.5rem; + margin-bottom: 1.5rem; + border-bottom: 0; } + .f-item-group > .f-item-group:first-of-type { + margin-top: 0; } + .f-item-group > .f-item-group:last-child { + margin-bottom: 0; + padding-bottom: 0; } + +.f-item-code { + margin-top: 2rem; } + +.f-item-preview:after { + clear: both; } +.f-item-preview:before, .f-item-preview:after { + display: table; + content: ' '; } + +.f-item-border-bottom { + border-bottom: 1px solid #cccccc; } + +.f-item-heading-group { + margin-bottom: 2rem; + vertical-align: middle; } + .f-item-heading-group:after { + clear: both; } + .f-item-heading-group:before, .f-item-heading-group:after { + display: table; + content: ' '; } + +.f-item-heading { + margin-top: 0; + margin-bottom: 0; + display: inline-block; + vertical-align: middle; + line-height: 1; } + +.f-item-controls { + display: inline-block; + vertical-align: middle; + margin-left: 0.5rem; } + .f-item-controls .f-control { + width: 14px; + height: 14px; + display: block; + float: left; } + .f-item-controls .f-control:hover use { + fill: #5c5c5c; } + .f-item-controls .f-control use { + fill: #cccccc; } + +.f-item-hidden { + display: none; } + +.f-item-notes { + font-size: 0.875rem; } diff --git a/dist/assets/toolkit/images/bolt.svg b/dist/assets/toolkit/images/bolt.svg new file mode 100644 index 0000000..03915cc --- /dev/null +++ b/dist/assets/toolkit/images/bolt.svg @@ -0,0 +1 @@ +Shape \ No newline at end of file diff --git a/dist/assets/toolkit/images/head.svg b/dist/assets/toolkit/images/head.svg new file mode 100644 index 0000000..bb458e2 --- /dev/null +++ b/dist/assets/toolkit/images/head.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/dist/assets/toolkit/images/logo.svg b/dist/assets/toolkit/images/logo.svg new file mode 100644 index 0000000..629a8e1 --- /dev/null +++ b/dist/assets/toolkit/images/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/dist/assets/toolkit/scripts/toolkit.js b/dist/assets/toolkit/scripts/toolkit.js index c9a93af..49400af 100644 --- a/dist/assets/toolkit/scripts/toolkit.js +++ b/dist/assets/toolkit/scripts/toolkit.js @@ -1 +1,8 @@ -!function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n?n:r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i