Permalink
Browse files

Updated

  • Loading branch information...
1 parent dad2e71 commit cecce216621fefabc7bd39a47f74f1521913223a Francisco Presencia Fandos committed Dec 29, 2016
Showing with 3 additions and 3 deletions.
  1. +3 −3 index.html
View
@@ -1,13 +1,13 @@
-<!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 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;
+<!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 condition</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 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</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
+</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';

0 comments on commit cecce21

Please sign in to comment.