forked from franciscop/picnic
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
69 lines (65 loc) · 20.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html><html><head><title>Picnic CSS</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="keywords" content="css, library, css library, picnic, picnicss, html, html5, light, plugin"><meta name="description" content="A lighweight CSS library with nice defaults and many plugins to kickstart your projects"><meta property="og:image" content="http://picnicss.com/web/preview.png?1"><meta property="og:url" content="http://picnicss.com/"><meta property="og:title" content="Picnic CSS - A beautiful CSS library to kickstart your projects"><meta property="og:description" content="Includes buttons, cards, flexbox-based grid, responsive builder with a lot of options"><link rel="stylesheet" href="web/style/style.min.css"><link rel="icon" href="web/img/picnic_test.png" type="image/png"></head><body><nav class="loading"><a href="/" class="brand"><span>Picnic CSS</span></a><!-- responsiveness--><input id="bmenu" type="checkbox" class="show"><label for="bmenu" class="burger toggle pseudo button">menu</label><div class="menu"><a href="/tests" class="pseudo button icon-help-circled">Test</a><a href="https://github.com/picnicss/picnic" target="_blank" class="pseudo button icon-g">Github</a><a href="/documentation" class="button icon-file-code">Documentation</a></div></nav><main><header class="hero"><div class="content"><h1>Picnic CSS</h1><p class="slogan">Lightweight and beautiful library</p><pre class="bower">bower install picnic</pre><p class="links"><a href="http://www.jsdelivr.com/#!picnicss" target="_blank" class="cdn">CDN</a><span> | </span><a href="https://raw.githubusercontent.com/picnicss/picnic/master/picnic.min.css" target="_blank" class="github">Download</a><span> | </span><a href="https://github.com/picnicss/picnic" target="_blank" class="github">Github</a></p></div><a href="#content" class="keepgoing">▼</a></header><div id="content" class="visual flex one two-800"><div class="content"><h2>Default html beauty</h2><p>The native html elements get a boost so you don't need to write presentation classes mixed with your html.</p><p>Picnic is completely modular so you can easily modify and test each part:</p><a href="/documentation" class="button icon-file-code">Documentation</a></div><div class="card"><section><button>Normal</button> <button class="success">Success</button> <button class="warning">Warning</button> <button class="error">Error</button></section><section><input type="email" placeholder="Email"></section><section><div class="flex three gallery"><div><article data-tooltip="Click me to upload a new image" class="tooltip-bottom"><label class="dropimage"><input type="file"></label></article></div><div><article data-tooltip="Click me to upload a new image" class="tooltip-bottom"><label style="background-image: url(web/img/demo.min.svg)" class="dropimage"><input type="file"></label></article></div><div><article data-tooltip="Click me to upload a new image" class="tooltip-bottom"><label style="background-image: url(web/img/demo.min.svg)" class="dropimage"><input type="file"></label></article></div></div></section></div></div><div class="visual flex one two-800"><div class="content"><h2>Made for the hackers</h2><p>Install it with bower and you will be able to integrate Picnic in any project and make it work for you.</p><p>Picnic is written in SCSS with <a href="/documentation#variables">many variables</a> and <a href="/documentation#placeholders"><em>classes</em> (placeholders)</a> to make it easy to extend.</p><a href="https://github.com/picnicss/picnic" target="_blank" class="button icon-g">Github</a></div><pre><code class="lang-css">$picnic-primary: #faa;
@import 'bower/picnic/src/picnic';
.call-to-action {
@extends %button;
}
</code></pre>
</div><div class="visual flex one two-800"><div class="content"><h2>It's alive!</h2><p>Get the best experience for your users with many subtle and carefully crafted css transitions.</p><p>Fun fact: there's not a single line of javascript for controlling the multi step form on the right ⇒</p><a href="/tests" class="button icon-help-circled">Tests</a></div><div><div style="text-align: center;" class="tabs three"><input id="tabC-1" type="radio" name="tabgroupC" checked><label for="tabC-1" class="pseudo button toggle">1</label><span> / </span><input id="tabC-2" type="radio" name="tabgroupC"><label for="tabC-2" class="pseudo button toggle">2</label><span> / </span><input id="tabC-3" type="radio" name="tabgroupC"><label for="tabC-3" class="pseudo button toggle">3</label><div class="row"><div class="card"><header><h3>Registration form example</h3></header><section>Obviously agree with the <a><strong><label for="modal_demo" data-tooltip="Tooltip says: Please click me?" class="tooltip-top link">terms and condition</label></strong></a></section><section><label><input type="checkbox" name="check"><span class="checkable">I agree with them!</span></label></section><footer><label for="tabC-2" class="button">Agree</label></footer></div><div class="card"><header><h3>Our relationship</h3></header><section><select><option>How did you find us?</option><option value="hackernews">Hacker News</option><option value="friends">Friends</option><option value="google">Google</option><option value="keysmash">Keyboard smashing</option></select></section><section><label><input type="radio" name="like" value="a lot"><span class="checkable">I love Picnic!</span></label><label><input type="radio" name="like" value="nothing"><span class="checkable">I've seen better...</span></label></section><footer><label for="tabC-3" class="button">Next</label><label for="tabC-1" class="button dangerous">Back</label></footer></div><div class="card"><header><h3>Subscribe?</h3></header><section><input type="text" placeholder="Full Name"></section><section><input type="email" placeholder="Email"></section><footer><button class="success">Finish!</button><label for="tabC-2" class="button dangerous">Back</label></footer></div></div></div></div></div><div class="visual flex one two-800"><div class="content"><h2>For your mobile</h2><p>Picnic mission is to be <strong>under 10kb</strong> of responsive, compressed css for a <a href="https://www.youtube.com/watch?v=GDpmVUEjagg" target="_blank">better and faster</a> mobile load.</p><p>Check the network usage of this page (F12), this page is under 20kb including images (but <a href="https://github.com/picnicss/picnic/issues/89">excluding the showcase</a>).</p></div><div><div class="flex demo"><div><div></div></div></div><div class="flex demo"><div><div></div></div><div><div></div></div></div><div class="flex demo"><div><div></div></div><div><div></div></div><div><div></div></div></div><div class="flex demo"><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div><div class="flex demo"><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div></div></div><div class="visual"><div class="content"><h2>Showcase</h2><div class="flex one two-800"><div><article data-title="Makers UPV" class="browser"><iframe data-src="http://www.makersupv.com/"></iframe></article><a href="http://makersupv.com/" target="_blank" class="button">Makers UPV</a></div><div><article data-title="Umbrella JS" class="browser"><iframe data-src="http://umbrellajs.com/"></iframe></article><a href="http://umbrellajs.com" target="_blank" class="button">Umbrella JS</a></div></div></div></div><div class="visual flex one two-800"><div class="content"><h2>Open Source</h2><p>If you love something set it free. This license allows you to use Picnic in a broad variety of projects.</p><label for="modal_mit" class="button">MIT License</label></div><div class="content"><h2>Special thanks</h2><ul><li><strong><a href="https://github.com/picnicss/picnic/graphs/contributors">Contributors</a></strong><span>: for helping Picnic improve</span></li><li><strong><a href="http://news.ycombinator.com/" title="No target='_blank' since I know that you guys know how to use Ctrl (;">Hacker News</a></strong><span>: To the community</span></li><li><strong><a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a></strong><span>: A modern alternative to resets</span></li><li><strong><a href="http://clrs.cc/" target="_blank">Clrs.cc</a></strong><span>: A nicer color palette for the web.</span></li><li><strong><a href="http://fontello.com/" target="_blank">Fontello</a></strong><span>: Icon font generator</span></li></ul></div></div><div class="visual"><div class="love">With love,</div><a href="http://francisco.io/" class="name">Francisco Presencia</a></div><div class="visual"><div class="love">Hey Hacker News, interested on working with me?</div><a class="email name">Let's talk :)</a></div></main><div class="modal"><input id="modal_demo" type="checkbox"><label for="modal_demo" class="overlay"></label><article><header><h3>I am a pure CSS modal</h3><label for="modal_demo" class="close">×</label></header><section class="content"><p>Just showing what I am capable of doing. Do you like it?</p></section><footer><label for="modal_demo" class="button success">Yes!</label><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" class="button dangerous tooltip-top">It sucks</a></footer></article></div><div class="modal"><input id="modal_mit" type="checkbox"><label for="modal_mit" class="overlay"></label><article><header><h3>The MIT License (MIT)</h3><label for="modal_mit" class="close">×</label></header><section class="content"><p>Copyright (c) 2014 Francisco Presencia Fandos</p><p>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:
</p><p>The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
</p><p>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.
</p></section></article></div><script>// Transparent nav handler
var nav = document.querySelector('nav');
function navScroll(){
var className = 'transparent';
var top = window.scrollY ? window.scrollY : document.documentElement.scrollTop;
if (top > 0) {
nav.classList.remove(className);
[].forEach.call(document.querySelectorAll('[data-src]'), function(iframe){
iframe.setAttribute('src', iframe.getAttribute('data-src'));
iframe.removeAttribute('data-src');
});
} else {
nav.classList.add('transparent');
nav.classList.add(className);
}
};
window.onscroll = navScroll;
navScroll();
setTimeout(function(){ nav.classList.remove('loading'); }, 10);
var domain = 'francisco.io';
document.querySelector('.email').setAttribute('href', 'mailto:' + 'contact@' + domain);</script><script>window.onload = function(){
// Dropimage handler
[].forEach.call(document.querySelectorAll('.dropimage'), function(img){
img.onchange = function(e){
var inputfile = this, reader = new FileReader();
reader.onloadend = function(){
inputfile.style['background-image'] = 'url('+reader.result+')';
}
reader.readAsDataURL(e.target.files[0]);
}
});
};
</script><script>/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */
var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(\w+)\b/i,t=_self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content),e.alias):"Array"===t.util.type(e)?e.map(t.util.encode):e.replace(/&/g,"&").replace(/</g,"<").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var a={};for(var r in e)e.hasOwnProperty(r)&&(a[r]=t.util.clone(e[r]));return a;case"Array":return e.map&&e.map(function(e){return t.util.clone(e)})}return e}},languages:{extend:function(e,n){var a=t.util.clone(t.languages[e]);for(var r in n)a[r]=n[r];return a},insertBefore:function(e,n,a,r){r=r||t.languages;var l=r[e];if(2==arguments.length){a=arguments[1];for(var i in a)a.hasOwnProperty(i)&&(l[i]=a[i]);return l}var o={};for(var s in l)if(l.hasOwnProperty(s)){if(s==n)for(var i in a)a.hasOwnProperty(i)&&(o[i]=a[i]);o[s]=l[s]}return t.languages.DFS(t.languages,function(t,n){n===r[e]&&t!=e&&(this[t]=o)}),r[e]=o},DFS:function(e,n,a,r){r=r||{};for(var l in e)e.hasOwnProperty(l)&&(n.call(e,l,e[l],a||l),"Object"!==t.util.type(e[l])||r[e[l]]?"Array"!==t.util.type(e[l])||r[e[l]]||(r[e[l]]=!0,t.languages.DFS(e[l],n,l,r)):(r[e[l]]=!0,t.languages.DFS(e[l],n,null,r)))}},plugins:{},highlightAll:function(e,n){for(var a,r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'),l=0;a=r[l++];)t.highlightElement(a,e===!0,n)},highlightElement:function(n,a,r){for(var l,i,o=n;o&&!e.test(o.className);)o=o.parentNode;o&&(l=(o.className.match(e)||[,""])[1],i=t.languages[l]),n.className=n.className.replace(e,"").replace(/\s+/g," ")+" language-"+l,o=n.parentNode,/pre/i.test(o.nodeName)&&(o.className=o.className.replace(e,"").replace(/\s+/g," ")+" language-"+l);var s=n.textContent,u={element:n,language:l,grammar:i,code:s};if(!s||!i)return t.hooks.run("complete",u),void 0;if(t.hooks.run("before-highlight",u),a&&_self.Worker){var g=new Worker(t.filename);g.onmessage=function(e){u.highlightedCode=e.data,t.hooks.run("before-insert",u),u.element.innerHTML=u.highlightedCode,r&&r.call(u.element),t.hooks.run("after-highlight",u),t.hooks.run("complete",u)},g.postMessage(JSON.stringify({language:u.language,code:u.code,immediateClose:!0}))}else u.highlightedCode=t.highlight(u.code,u.grammar,u.language),t.hooks.run("before-insert",u),u.element.innerHTML=u.highlightedCode,r&&r.call(n),t.hooks.run("after-highlight",u),t.hooks.run("complete",u)},highlight:function(e,a,r){var l=t.tokenize(e,a);return n.stringify(t.util.encode(l),r)},tokenize:function(e,n){var a=t.Token,r=[e],l=n.rest;if(l){for(var i in l)n[i]=l[i];delete n.rest}e:for(var i in n)if(n.hasOwnProperty(i)&&n[i]){var o=n[i];o="Array"===t.util.type(o)?o:[o];for(var s=0;s<o.length;++s){var u=o[s],g=u.inside,c=!!u.lookbehind,f=0,h=u.alias;u=u.pattern||u;for(var p=0;p<r.length;p++){var d=r[p];if(r.length>e.length)break e;if(!(d instanceof a)){u.lastIndex=0;var m=u.exec(d);if(m){c&&(f=m[1].length);var y=m.index-1+f,m=m[0].slice(f),v=m.length,k=y+v,b=d.slice(0,y+1),w=d.slice(k+1),P=[p,1];b&&P.push(b);var A=new a(i,g?t.tokenize(m,g):m,h);P.push(A),w&&P.push(w),Array.prototype.splice.apply(r,P)}}}}}return r},hooks:{all:{},add:function(e,n){var a=t.hooks.all;a[e]=a[e]||[],a[e].push(n)},run:function(e,n){var a=t.hooks.all[e];if(a&&a.length)for(var r,l=0;r=a[l++];)r(n)}}},n=t.Token=function(e,t,n){this.type=e,this.content=t,this.alias=n};if(n.stringify=function(e,a,r){if("string"==typeof e)return e;if("Array"===t.util.type(e))return e.map(function(t){return n.stringify(t,a,e)}).join("");var l={type:e.type,content:n.stringify(e.content,a,r),tag:"span",classes:["token",e.type],attributes:{},language:a,parent:r};if("comment"==l.type&&(l.attributes.spellcheck="true"),e.alias){var i="Array"===t.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(l.classes,i)}t.hooks.run("wrap",l);var o="";for(var s in l.attributes)o+=(o?" ":"")+s+'="'+(l.attributes[s]||"")+'"';return"<"+l.tag+' class="'+l.classes.join(" ")+'" '+o+">"+l.content+"</"+l.tag+">"},!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){var n=JSON.parse(e.data),a=n.language,r=n.code,l=n.immediateClose;_self.postMessage(t.highlight(r,t.languages[a],a)),l&&_self.close()},!1),_self.Prism):_self.Prism;var a=document.getElementsByTagName("script");return a=a[a.length-1],a&&(t.filename=a.src,document.addEventListener&&!a.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
Prism.languages.markup={comment:/<!--[\w\W]*?-->/,prolog:/<\?[\w\W]+?\?>/,doctype:/<!DOCTYPE[\w\W]+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/<\/?(?!\d)[^\s>\/=.$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup;
Prism.languages.css={comment:/\/\*[\w\W]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*?(?=\s*\{)/,string:/("|')(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1/,property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/(<style[\w\W]*?>)[\w\W]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css"}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|').*?\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag));
Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:/(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/};
Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^\/])\/(?!\/)(\[.+?]|\\.|[^\/\\\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0}}),Prism.languages.insertBefore("javascript","class-name",{"template-string":{pattern:/`(?:\\`|\\?[^`])*`/,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(<script[\w\W]*?>)[\w\W]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript"}}),Prism.languages.js=Prism.languages.javascript;
</script><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-59832845-1', 'auto');
ga('send', 'pageview');</script></body></html>