picnic

extends layout block content main header.hero div.content h1 Picnic CSS p.slogan Lightweight and beautiful library pre.npm.wide= `<link rel="stylesheet" href="https://unpkg.com/picnic">` pre.npm.slim= `<link rel="stylesheet"\nhref="https://unpkg.com/picnic">` p.links a.cdn(href="https://unpkg.com/picnic" target="_blank") CDN span | a.github(href="https://raw.githubusercontent.com/franciscop/picnic/master/picnic.min.css" target="_blank") Download span | a.github(href="https://github.com/franciscop/picnic" target="_blank") GitHub div.visual.flex.one.two-800#content div.content h2 Default HTML beauty p The native HTML elements get a boost so you don't need to write presentation classes mixed with your HTML. p Picnic is completely modular so you can easily modify and test each part: a.button.icon-file-code(href="/documentation") Documentation div.card section button Normal = ' ' button.success Success = ' ' button.warning Warning = ' ' button.error Error section input(type="email" placeholder="Email" aria-label="Email") section div.flex.three.gallery div article.tooltip-bottom(data-tooltip="Click me to upload a new image") label.dropimage input(type="file") div article.tooltip-bottom(data-tooltip="Click me to upload a new image") label.dropimage(style="background-image: url(web/img/optimised.svg)") input(type="file") div article.tooltip-bottom(data-tooltip="Click me to upload a new image") label.dropimage(style="background-image: url(web/img/optimised.svg)") input(type="file") div.visual.flex.one.two-800 div.content h2 Made for the hackers p Install with bower and you will be able to integrate Picnic into any project and make it work for you. 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. a.button.icon-g(href="https://github.com/franciscop/picnic" target="_blank") GitHub :markdown ```css $picnic-primary: #faa; @import 'bower/picnic/src/picnic'; .call-to-action { @extend %button; } ``` div.visual.flex.one.two-800 div.content h2 It's alive! p Get the best experience for your users with many subtle and carefully crafted CSS transitions. p Fun fact: there's not a single line of JavaScript for controlling the multi-step form on the right ⇒ a.button.icon-help-circled(href="/tests") Tests div div.tabs.three(style="text-align: center;") input#tabC-1(type='radio' name='tabgroupC' checked aria-hidden="true") label.pseudo.button.toggle(for="tabC-1") 1 span / input#tabC-2(type='radio' name='tabgroupC' aria-hidden="true") label.pseudo.button.toggle(for="tabC-2") 2 span / input#tabC-3(type='radio' name='tabgroupC' aria-hidden="true") label.pseudo.button.toggle(for="tabC-3") 3 div.row div.card header h3 Registration form example section Obviously agree with the a(href="#") strong(data-tooltip="Clicking me is futile") terms and conditions section label input(type="checkbox" name="check" aria-hidden="true") span.checkable I agree with them! footer label.button(for="tabC-2") Agree div.card header h3 Our relationship section select option How did you find us? option(value="hackernews") Hacker News option(value="friends") Friends option(value="google") Google option(value="keysmash") Keyboard smashing section label input(type="radio" name="like" value="a lot" aria-hidden="true") span.checkable I love Picnic! label input(type="radio" name="like" value="nothing" aria-hidden="true") span.checkable I've seen better... footer label.button(for="tabC-3") Next label.button.dangerous(for="tabC-1") Back div.card header h3 Subscribe? section input(type="text" placeholder="Full Name" aria-label="Full Name") section input(type="email" placeholder="Email" aria-label="Email") footer button.success Finish! label.button.dangerous(for="tabC-2") Back div.visual.flex.one.two-800 div.content h2 For your mobile 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). div div.flex.demo div div div.flex.demo div div div div div.flex.demo div div div div div div div.flex.demo div div div div div div div div div.flex.demo div div div div div div div div div div //- div.visual //- div.content //- h2 Showcase //- div.flex.one.two-800 //- div //- article.browser(data-title="Makers UPV") //- iframe(data-src="http://www.makersupv.com/") //- a.button(href="http://makersupv.com/" target="_blank") Makers UPV //- div //- article.browser(data-title="Umbrella JS") //- iframe(data-src="http://umbrellajs.com/") //- a.button(href="http://umbrellajs.com" target="_blank") Umbrella JS div.visual.flex.one.two-800 div.content h2 Open Source p If you love something set it free. This license allows you to use Picnic in a broad variety of projects. a.button(href="https://github.com/franciscop/picnic/blob/master/LICENSE" target="_blank") MIT License div.content h2 Special thanks to ul li strong a(href="https://github.com/franciscop/picnic/graphs/contributors") Contributors span : for helping Picnic improve li strong a(href="http://necolas.github.io/normalize.css/" target="_blank") Normalize.css span : A modern alternative to resets li strong a(href="http://clrs.cc/" target="_blank") Clrs.cc span : A nicer color palette for the web. li strong a(href="https://gyshido.com/") GyShiDo span : Cool project using Picnic CSS 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);