Permalink
cecce21 Dec 28, 2016
Francisco Presencia Fandos Updated
@franciscop @FND
41 lines (38 sloc) 8.47 KB
<!DOCTYPE html><html lang="en"><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, picnic, picnicss, light"><meta name="description" content="A lightweight CSS library"><link rel="stylesheet" href="web/style/style.min.css"><link rel="stylesheet" media="bogus"></head><body><nav><a href="/" class="brand"><span>Picnic CSS</span></a><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" aria-hidden="true" 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" aria-label="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/optimised.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/optimised.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 with bower and you will be able to integrate Picnic into 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 &#39;bower/picnic/src/picnic&#39;;
.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 aria-hidden="true"><label for="tabC-1" class="pseudo button toggle">1</label><span> /</span><input id="tabC-2" type="radio" name="tabgroupC" aria-hidden="true"><label for="tabC-2" class="pseudo button toggle">2</label><span> /</span><input id="tabC-3" type="radio" name="tabgroupC" aria-hidden="true"><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 href="#"><strong data-tooltip="Clicking me is futile">terms and conditions</strong></a></section><section><label><input type="checkbox" name="check" aria-hidden="true"><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" aria-hidden="true"><span class="checkable">I love Picnic!</span></label><label><input type="radio" name="like" value="nothing" aria-hidden="true"><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" aria-label="Full Name"></section><section><input type="email" placeholder="Email" aria-label="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's mission is to be <strong>under 10kb</strong> of compressed CSS for a <a href="https://www.youtube.com/watch?v=GDpmVUEjagg" target="_blank">better and faster</a> mobile load. Check the network usage of this page (F12).</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 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><a href="https://github.com/picnicss/picnic/blob/master/LICENSE" target="_blank" class="button">MIT License</a></div><div class="content"><h2>Special thanks to</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://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>With love, <a href="http://francisco.io/">Francisco Presencia</a></strong></li></ul></div></div><comment-box hackernews="8315616" add="hackernews" limit="50" class="visual border"></comment-box></main><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);</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 src="/web/tracking.js" defer async></script><script src="https://comments.network/comments.js" defer async></script></body></html>