picnic
Version:
A lighweight CSS library with nice defaults and many plugins to kickstart your projects
909 lines (854 loc) • 39.7 kB
HTML
<html lang="en"><head><title>Documentation - 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="icon" href="web/img/basket.png" type="image/png"><link rel="stylesheet" media="bogus"><style>aside a.top {
font-size: 0;
position: fixed;
bottom: 0;
font-weight: bold;
width: 180px;
padding: .6em 0;
margin-bottom: 0;
border-radius: .3em .3em 0 0;
transition: all .3s ease;
}
aside a.top.visible {
font-size: 1em;
}
aside .links a.button {
text-align: left;
}
@media all and (max-width: 1000px) {
aside a.pseudo.top {
background: rgba(255, 255, 255, .8);
width: 100%;
left: 0;
text-align: center;
z-index: 100;
}
}
.documentation article > h2 {
margin: -2em 0 .6em;
padding: 3em 0 0;
line-height: 1;
}
.documentation article > h3 {
margin-bottom: .6em;
}
.documentation aside h2 {
margin-top: 0;
padding: 1.25em 0;
line-height: 1;
}
.documentation aside a.pseudo {
color: #0074D9;
margin: 0;
}
.documentation > section {
background: #fff;
text-align: left;
width: 90%;
max-width: 960px;
margin: 0 auto;
padding: 80px 0 0;
}
.documentation article > h1 {
margin: 0;
padding: 0.6em 0;
font-size: 2em;
line-height: 1.5;
}
.documentation aside a.button {
display: block;
}
.documentation pre[class*="language-"] {
margin-top: 10px;
margin-bottom: 40px;
}
.documentation .index pre {
margin: 0;
font-size: .9em;
}
</style></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/franciscop/picnic" target="_blank" class="pseudo button icon-g">GitHub</a><a href="/documentation" class="button icon-file-code">Documentation</a></div></nav><main id="home" class="documentation"><section class="flex five"><aside class="full fifth-1000"><h2>Contents</h2><div class="links flex two three-500 five-800 one-1000"></div><a href="#home" tabindex="-1" class="top pseudo button">▲ Up you go ▲</a></aside><article class="full four-fifth-1000"><h1 id="picnic-css">Picnic CSS</h1>
<p>Picnic CSS is a lightweight and beautiful CSS library</p>
<h2 id="buttons">Buttons</h2>
<p>They can be of different colors and types:</p>
<pre><code class="lang-html"><button>Button</button>
<button class='success'>Success</button>
<button class='warning'>Warning</button>
<button class='error'>Error</button>
<button disabled>Disabled</button>
</code></pre>
<pre><code class="lang-html"><button>Button</button>
<a class="button">Link</a>
<input value="Submit" type="submit">
<label>
<input type="checkbox">
<span class="toggle button">Toggle</span>
</label>
</code></pre>
<h3 id="pseudo-buttons">Pseudo buttons</h3>
<p>Allows for seemingly links to behave as buttons:</p>
<pre><code class="lang-html"><button class="pseudo">Button</button>
<a class="pseudo button">Link</a>
<input class="pseudo" value="Submit" type="submit">
<label>
<input type="checkbox">
<span class="toggle pseudo button">Toggle</span>
</label>
</code></pre>
<h3 id="hack-it">Hack it</h3>
<p>You only have to define a single color base for new colors. The <code>:hover</code> and <code>:active</code> status are handled as overlays for consistency and simplicity</p>
<pre><code class="lang-html"><button class="myCoolButton">My Cool Button</button>
</code></pre>
<pre><code class="lang-css">.myCoolButton {
background: #85144b;
}
</code></pre>
<p>To create a larger button you only need to make the font inside it larger. The paddings are set in <em>em</em> so the whole button stays in great shape:</p>
<pre><code class="lang-html"><button class="mainButton">Large button</button><br>
<button>Normal button</button><br>
<button class="shyButton">Small button</button>
</code></pre>
<pre><code class="lang-css">.mainButton {
font-size: 1.5em;
}
.shyButton {
font-size: .75em;
}
</code></pre>
<p>To change the color of the pseudo-color on hover:</p>
<pre><code class="lang-html"><button class="pseudo cool">Pseudo personal</button>
</code></pre>
<pre><code class="lang-css">.cool:hover,
.cool:active,
.cool:focus {
background: #cff;
}
</code></pre>
<h2 id="card">Card</h2>
<p>A card is a self-contained, replicable type. It works great with other of its kind. It can consist of only one element or many of them:</p>
<pre><code class="lang-html"><article class="card">
<header>
<h3>A really simple h3</h3>
</header>
</article>
</code></pre>
<pre><code class="lang-html"><article class="card">
<header>
<button>Love</button>
<button class="dangerous">Hate</button>
</header>
</article>
</code></pre>
<pre><code class="lang-html"><article class="card">
<header>
<h3>Forest</h3>
</header>
<footer>
<button>Like</button>
</footer>
</article>
</code></pre>
<pre><code class="lang-html"><div class="flex two">
<div>
<article class="card">
<img src="/web/img/forest.jpg">
<footer>
<h3>Misty Forest</h3>
<button>Like</button>
</footer>
</article>
</div>
<div>
<article class="card">
<img src="/web/img/forest.jpg">
<footer>
<h3>Misty Forest</h3>
<button>Like</button>
</footer>
</article>
</div>
</div>
</code></pre>
<h2 id="checkbox">Checkbox</h2>
<p>Display an inline checkbox with a nice default style</p>
<pre><code class="lang-html"><label>
<input type="checkbox">
<span class="checkable">Check me out (;</span>
</label>
</code></pre>
<pre><code class="lang-html"><label>
<input type="checkbox" checked>
<span class="checkable">Uncheck me</span>
</label>
</code></pre>
<h3 id="usage">Usage</h3>
<p>This plugin, while experimental in the past, is mature now. Use a normal checkbox followed by any other element with the class <code>checkable</code>. The element that follows the checkbox will receive the pseudo classes so it should be able to do so. We recommend a <code><span></code> or <code><label></code>. Here we use the label around them for making the <code><input></code> change state when you click on this folowing element.</p>
<pre><code class="lang-html"><label>
<input type="checkbox">
<span class="checkable">Checkbox text</span>
</label>
</code></pre>
<p>But you can also use a label and reference the original input:</p>
<pre><code class="lang-html"><input id="checkboxdemo" type="checkbox">
<label for="checkboxdemo" class="checkable">Checkbox text</label>
</code></pre>
<h3 id="javascript">JavaScript</h3>
<p>You do not need javascript since we are using the native elements and not setting <code>display: none</code> purposefully. However, you can still use javascript as normal to retrieve the checked elements.</p>
<p><form>
<label>
<input class="tos" type="checkbox" />
<span class="checkable">Accept TOS</span>
</label>
<button>Send</button>
</form></p>
<script>
// Pure javascript
document.querySelector('form').onsubmit = function(e){
e.preventDefault();
alert(document.querySelector('.tos').checked);
}
</script>
<pre><code class="lang-js">// Pure javascript
document.querySelector('form').onsubmit = function(e){
e.preventDefault();
alert(document.querySelector('input.tos').checked);
}
// jQuery
$("form").on('submit', function(e){
e.preventDefault();
alert($('input.tos').is(':checked'));
});
</code></pre>
<h2 id="drop-image">Drop image</h2>
<p>Allows you to add a file input element that can receive an image drop and clicks with native elements. However, it needs some javascript to show the dropped image:</p>
<pre><code class="lang-html"><div style="width: 200px"> <!-- this div just for demo display -->
<label class="dropimage">
<input title="Drop image or click me" type="file">
</label>
</div>
</code></pre>
<h3 id="javascript">JavaScript</h3>
<p>This is the javascript you need for multiple elements:</p>
<pre><code class="lang-js">document.addEventListener("DOMContentLoaded", function() {
[].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]);
}
});
});
</code></pre>
<h3 id="hack-it">Hack it</h3>
<p>Do you want round pictures? No problem, just do this:</p>
<pre><code class="lang-css">.profile {
border-radius: 50%; /* Make it a circle */
padding-bottom: 100%; /* 100% height (ratio 1) */
}
</code></pre>
<p>To get this:</p>
<pre><code class="lang-html"><div style="width: 200px"> <!-- this div just for demo display -->
<label class="dropimage profile">
<input name="filea" title="Drop image or click me" type="file">
</label>
</div>
</code></pre>
<p>Make it smaller</p>
<pre><code class="lang-css">.miniprofile {
border-radius: 50%; /* Make it a circle */
margin: 0 auto; /* Center horizontally */
width: 60%; /* 60% width */
padding-bottom: 60%; /* 60% height */
}
</code></pre>
<pre><code class="lang-html"><div style="width: 200px"> <!-- this div just for demo display -->
<label class="dropimage miniprofile">
<input name="filea" title="Drop image or click me" type="file">
</label>
</div>
</code></pre>
<h2 id="grids">Grids</h2>
<blockquote>
<p>Note: the old <code>.row</code> and <code>.grid</code> have been replaced by the new <code>.flex</code>. You can still <a href="https://github.com/picnicss/picnic/blob/dcf3410125a861b3bf58ebfd06f73916ef9ae3db/src/plugins/grid/readme.md">see the old documentation in github</a>.</p>
</blockquote>
<blockquote>
<p>Note 2: the children <code><span></code> are only for display purposes; you can put anything you want instead of them</p>
</blockquote>
<p>A flexbox grid implementation with breakpoints. Choose when to change your layout depending on your content instead of the device you want to show as recommended by <a href="https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/how-to-choose-breakpoints">Google's RWD</a>, by <a href="https://www.smashingmagazine.com/2013/03/logical-breakpoints-responsive-design/">Smashing Magazine's Logical Breakpoints</a> and Picnic CSS.</p>
<p>You can create complex, flexible layouts with it. Just resize the browser to see how powerful it is:</p>
<pre><code class="lang-html"><div class="flex two four-500 six-800 demo">
<div><span>1</span></div>
<div><span>2</span></div>
<div class="full half-500 third-800"><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
<div><span>6</span></div>
<div><span>7</span></div>
<div><span>8</span></div>
<div><span>9</span></div>
<div class="off-half off-fourth-500 off-sixth-800"><span>10</span></div>
</div>
</code></pre>
<h3 id="equally-sized-columns">Equally sized columns</h3>
<p>Let's start through the basics though. Just a container with equally sized children:</p>
<pre><code class="lang-html"><div class="flex demo">
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
<div><span>6</span></div>
</div>
</code></pre>
<p>With the class <code>flex</code>, smaller children will be spaced equally to fill all of the content. However, this only works with small children. If you have children bigger than their corresponding width (1/6th in the above) they will not be restricted:</p>
<pre><code class="lang-html"><div class="flex demo">
<div><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></div>
<div><span>2</span></div>
</div>
</code></pre>
<p>To fix this, manually set the number of columns as explained in the next point.</p>
<h3 id="column-count">Column count</h3>
<p>If instead you prefer certain column count, such as in a gallery where it can span several rows, use a counter besides the class flex:</p>
<pre><code class="lang-html"><div class="flex three demo">
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
</div>
</code></pre>
<p>The columns will keep being equally spaced, but this time with the width corresponding to the column counter. You can use any number as a class from one to twelve:</p>
<div class="flex six">
<div><code>one</code></div>
<div><code>two</code></div>
<div><code>three</code></div>
<div><code>four</code></div>
<div><code>five</code></div>
<div><code>six</code></div>
<div><code>seven</code></div>
<div><code>eight</code></div>
<div><code>nine</code></div>
<div><code>ten</code></div>
<div><code>eleven</code></div>
<div><code>twelve</code></div>
</div>
<p>Most grid systems use a 12 grid system, but we wanted to use a more flexible system and allow you to choose the grid size.</p>
<h3 id="responsive-column-count">Responsive column count</h3>
<p>We follow a mobile-first design. Put the number of columns for mobile as explained in the previous point. Then, when things get too stretched, add a column counter with the number of pixels in 100 increments as follows:</p>
<pre><code class="lang-html"><div class="flex two three-600 six-1200 demo">
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
<div><span>6</span></div>
</div>
</code></pre>
<p>The number after the column count as in <code>-600</code> or <code>-1200</code> are the breakpoints. When the <strong>website width is over that number</strong>, that column count will be used instead of the previous. If we use two or more, the largest column count will be used.</p>
<p>For example, in a desktop with a screen of <code>1920x1080px</code> the previous one will display 6 columns. Any screen from 600px to 1200px will display three columns and smaller than 600px will display 2 columns.</p>
<p>The increment is 100px and starts in 500px up to 2000px both included. You can use any of those suffixes for the column count class:</p>
<div class="flex two five-800 ten-1200">
<div><code>-500</code></div>
<div><code>-600</code></div>
<div><code>-700</code></div>
<div><code>-800</code></div>
<div><code>-900</code></div>
<div><code>-1000</code></div>
<div><code>-1100</code></div>
<div><code>-1200</code></div>
<div><code>-1300</code></div>
<div><code>-1400</code></div>
<div><code>-1500</code></div>
<div><code>-1600</code></div>
<div><code>-1700</code></div>
<div><code>-1800</code></div>
<div><code>-1900</code></div>
<div><code>-2000</code></div>
</div>
<h3 id="remainders">Remainders</h3>
<p>You can also modify the remainder content as you wish with a couple of utility classes. This is the default:</p>
<pre><code class="lang-html"><div class="flex three demo">
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
</div>
</code></pre>
<p>You can grow them:</p>
<pre><code class="lang-html"><div class="flex three grow demo">
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
</div>
</code></pre>
<p>Or you can center them:</p>
<pre><code class="lang-html"><div class="flex three center demo">
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
</div>
</code></pre>
<h3 id="children-sizing">Children sizing</h3>
<p>Now that we know how the parent (or grid) can modify itself and the elements below them, the children can also go rebel and behave on their own. Say that a child wants to be half of the size of its parent element. Easy, just add the class <code>half</code>:</p>
<pre><code class="lang-html"><div class="flex four demo">
<div><span>1</span></div>
<div><span>2</span></div>
<div class="half"><span>3</span></div>
</div>
</code></pre>
<p>We have many classes like those. They are the size relative to the parent grid:</p>
<div class="flex six">
<div><code>full</code></div>
<div><code>half</code></div>
<div><code>third</code></div>
<div><code>two-third</code></div>
<div><code>fourth</code></div>
<div><code>three-fourth</code></div>
<div><code>fifth</code></div>
<div><code>two-fifth</code></div>
<div><code>three-fifth</code></div>
<div><code>four-fifth</code></div>
<div><code>sixth</code></div>
<div><code>none</code></div>
</div>
<p>The class <code>none</code> hides the element, useful for responsive layouts</p>
<h3 id="responsive-children">Responsive children</h3>
<p>They can also be fine-tuned in a way similar to the above:</p>
<pre><code class="lang-html"><div class="flex four demo">
<div class="half fourth-1000"><span>1</span></div>
<div class="half fourth-1000"><span>2</span></div>
<div class="full half-1000"><span>3</span></div>
</div>
</code></pre>
<h3 id="offsets">Offsets</h3>
<p>The children can also have one offset (empty space) before it. They are built adding the class off-SIZE, similar to the size but prefixing off-:</p>
<pre><code class="lang-html"><div class="flex four demo">
<div><span>1</span></div>
<div><span>2</span></div>
<div class="off-fourth"><span>3</span></div>
</div>
</code></pre>
<p>We have many classes like those. They are the size of the offset relative to the parent grid:</p>
<div class="flex two three-600 six-1200 demo">
<div><code>off-none</code></div>
<div><code>off-half</code></div>
<div><code>off-third</code></div>
<div><code>off-two-third</code></div>
<div><code>off-fourth</code></div>
<div><code>off-three-fourth</code></div>
<div><code>off-fifth</code></div>
<div><code>off-two-fifth</code></div>
<div><code>off-three-fifth</code></div>
<div><code>off-four-fifth</code></div>
<div><code>off-sixth</code></div>
</div>
<blockquote>
<p>Note: <code>off-none</code> is useful for making responsive layouts as explained in the next point.</p>
</blockquote>
<h3 id="responsive-offsets">Responsive offsets</h3>
<p>They can also have the minimum screen size when they start working:</p>
<pre><code class="lang-html"><div class="flex three four-1000 demo">
<div><span>1</span></div>
<div><span>2</span></div>
<div class="off-fourth-800"><span>3</span></div>
</div>
</code></pre>
<p>The main difference with the width classes is that it includes a none in case you want to hide the offset at certain sizes and that it doesn't include a full</p>
<h2 id="input">Input</h2>
<p>Simple (or not) text form elements:</p>
<pre><code class="lang-html"><fieldset class="flex two">
<label><input type="email" placeholder="Email"></label>
<label><input type="password" placeholder="Password"></label>
</fieldset>
<textarea placeholder="Textarea"></textarea>
</code></pre>
<style>
input.demo {
margin-bottom: .3em;
}
</style>
<h2 id="label">Label</h2>
<p>An element to display some short relevant information on the side of other element</p>
<pre><code class="lang-html"><h1>header 1 <span class="label">Normal</span></h1>
<h2>header 2 <span class="label success">Success</span></h2>
<h3>header 3 <span class="label warning">Warning</span></h3>
<h4>header 4 <span class="label error">Error</span></h4>
<p>paragraph <span class="label">Normal</span></p>
</code></pre>
<h2 id="modal">Modal</h2>
<p>The modal is pure CSS, which makes the HTML quite ugly actually. However it does work. To try it, press the button:</p>
<pre><code class="lang-html"><label for="modal_1" class="button">Show modal</label>
<div class="modal">
<input id="modal_1" type="checkbox" />
<label for="modal_1" class="overlay"></label>
<article>
<header>
<h3>Great offer</h3>
<label for="modal_1" class="close">&times;</label>
</header>
<section class="content">
We have a special offer for you. I am sure you will love it! However this does look spammy...
</section>
<footer>
<a class="button" href="#">See offer</a>
<label for="modal_1" class="button dangerous">
Cancel
</label>
</footer>
</article>
</div>
</code></pre>
<h3 id="javascript">JavaScript</h3>
<p>As always, there is <strong>no javascript</strong>. However, a little bit of javascript could enhance the experience allowing to close the modal by pressing <code>ESC</code>.</p>
<script>
document.onkeydown = function(e){
if (e.keyCode == 27) {
var mods = document.querySelectorAll('.modal > [type=checkbox]');
[].forEach.call(mods, function(mod){ mod.checked = false; });
}
}
</script>
<pre><code class="lang-js">document.onkeydown = function(e){
if (e.keyCode == 27) {
var mods = document.querySelectorAll('.modal > [type=checkbox]');
[].forEach.call(mods, function(mod){ mod.checked = false; });
}
}
</code></pre>
<h2 id="nav">Nav</h2>
<style>
nav.demo {
position: relative;
z-index: 9;
padding: 0 .6em;
}
</style>
<p>A responsive, pure css navigation menu:</p>
<blockquote>
<p>On these smaller versions it might have small glitches. Please see the top, page-wide nav to see the actual effect. </p>
</blockquote>
<pre><code class="lang-html"><div style="overflow: hidden;height: 250px;"> <!-- For Demo, Represents the body -->
<nav class="demo">
<a href="#" class="brand">
<img class="logo" src="/web/img/basket.png" />
<span>Picnic CSS</span>
</a>
<!-- responsive-->
<input id="bmenub" type="checkbox" class="show">
<label for="bmenub" class="burger pseudo button">menu</label>
<div class="menu">
<a href="#" class="pseudo button icon-picture">Demo</a>
<a href="#" class="button icon-puzzle">Plugins</a>
</div>
</nav>
</div>
</code></pre>
<h3 id="responsive">Responsive</h3>
<p>The nav is responsive by default. The text inside the <code><label></code> can be changed for the following characters for a different effect (<a href="https://css-tricks.com/three-line-menu-navicon/">source</a>):</p>
<ul>
<li>Identical to <code>&#8801;</code> (safe on mobile): <label class="pseudo button">≡</label></li>
<li>Trigram for heaven <code>&#9776;</code>: <label class="pseudo button">☰</label></li>
<li>Any other: <i class="pseudo button icon-cog"></i></li>
</ul>
<h3 id="different-height-and-big-logo">Different height and big logo</h3>
<p>Thanks to a <a href="http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/">vertical-align trick</a>, you can set it up to any height you want:</p>
<pre><code class="lang-css">nav.imponent {
padding: 2em 0;
}
.imponent .logo {
height: 3em;
}
</code></pre>
<pre><code class="lang-html"><nav class="demo imponent">
<a href="#" class="brand">
<img class="logo" src="/web/img/basket.png" />
<span>Picnic CSS</span>
</a>
</nav>
</code></pre>
<h3 id="form-elements">Form elements</h3>
<p>Just get anything you want inside the nav, most things should work.</p>
<pre><code class="lang-html"><div style="overflow: hidden;height: 250px;"> <!-- For Demo, Represents the body -->
<nav class="demo">
<a href="#" class="brand">Picnic CSS</a>
<!-- responsive-->
<input id="bmenug" type="checkbox" class="show">
<label for="bmenug" class="burger pseudo button">&#8801;</label>
<div class="menu">
<input placeholder="Search plugins" />
</div>
</nav>
</div>
</code></pre>
<pre><code class="lang-html"><div style="overflow: hidden;height: 250px;"> <!-- For Demo, Represents the body -->
<nav class="demo">
<a href="#" class="brand">Picnic CSS</a>
<!-- responsive-->
<input id="cmenug" type="checkbox" class="show">
<label for="cmenug" class="burger pseudo button">&#8801;</label>
<div class="menu">
<select>
<option>Choose an option</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</nav>
</div>
</code></pre>
<h3 id="fixed-position">Fixed position</h3>
<p>To set it on the top of the page instead of scrolling with the page, just do:</p>
<pre><code>nav {
position: absolute;
}
</code></pre><h3 id="open-nav-menu-from-left">Open nav menu from left</h3>
<p>Change sass variable <code>$picnic-nav-open-left: false !default;</code> to
<code>$picnic-nav-open-left: true;</code> to open it from the left:</p>
<pre><code class="lang-html"><div style="overflow: hidden;height: 250px;"> <!-- For Demo, Represents the body -->
<nav class="demo">
<a href="#" class="brand">Picnic CSS</a>
<!-- responsive-->
<input id="cmenug" type="checkbox" class="show">
<label for="cmenug" class="burger pseudo button">&#8801;</label>
<div class="menu">
<select>
<option>Choose an option</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</nav>
</div>
</code></pre>
<h2 id="radio-button">Radio button</h2>
<p>A simple way of using radiobuttons</p>
<pre><code class="lang-html"><label>
<input type='radio' name="radiodemo">
<span class="checkable">Select me</span>
</label><br><br>
<input id="radiodemo" checked type='radio' name="radiodemo">
<label for="radiodemo" class="checkable">Or me</label>
</code></pre>
<h2 id="select">Select</h2>
<pre><code class="lang-html"><select>
<option>Select an option</option>
<option>Good option</option>
<option>Nice option</option>
<option>Cheap option</option>
</select>
</code></pre>
<h2 id="stack">Stack</h2>
<p>A vertical group of different elements.</p>
<pre><code class="lang-html"><span class="button stack icon-picture">Home</span>
<span class="button stack icon-puzzle">Plugins</span>
<span class="button stack icon-file-code">Documentation</span>
<span class="button stack icon-help-circled">Test</span>
</code></pre>
<p>They can also toggle:</p>
<pre><code class="lang-html"><div>
<label class="stack">
<input name="stack" type="radio">
<span class="button toggle">
<span class="icon-picture"></span> Home
</span>
</label>
<label class="stack">
<input name="stack" type="radio">
<span class="button toggle">
<span class="icon-puzzle"></span> Plugins
</span>
</label>
<label class="stack">
<input name="stack" type="radio">
<span class="button toggle">
<span class="icon-file-code"></span> Documentation
</span>
</label>
<label class="stack">
<input name="stack" type="radio">
<span class="button toggle">
<span class="icon-help-circled"></span> Test
</span>
</label>
</div>
</code></pre>
<p>Stack different kind of elements</p>
<pre><code class="lang-html"><div class="third">
<img class="stack" src="/web/img/forest.jpg">
<a class="button stack">Full size</a>
</div>
</code></pre>
<p>A small form</p>
<pre><code class="lang-html"><div class="third">
<input class="stack" placeholder="Name" />
<input class="stack" placeholder="Email" />
<button class="stack icon-paper-plane">
Send
</button>
</div>
</code></pre>
<p>Pseudo buttons:</p>
<pre><code class="lang-html"><a class="stack pseudo button">First</a>
<a class="stack pseudo button">Second</a>
<a class="stack pseudo button">Third</a>
</code></pre>
<h3 id="forms">Forms</h3>
<p>Create nice and packed forms. <a href="http://jsfiddle.net/ddmv3dsr/4/">jsfiddle</a></p>
<pre><code class="lang-html"><div class="third">
<input class="stack" placeholder="First name" />
<input class="stack" placeholder="Last name" />
<input class="stack" placeholder="Email" />
</div><br>
<div class="third">
<input class="stack" placeholder="Password" />
<input class="stack" placeholder="Repeat password" />
<textarea class="stack" placeholder="Biography"></textarea>
<button class="stack icon-paper-plane">Send</button>
</div>
</code></pre>
<h2 id="table">Table</h2>
<pre><code class="lang-html"><table class="primary">
<thead>
<tr>
<th>Name</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Francisco</td>
<td>Valencia, Spain</td>
</tr>
<tr>
<td>Eve</td>
<td>San Francisco, USA</td>
</tr>
<tr>
<td>Martin</td>
<td>New York, USA</td>
</tr>
<tr>
<td>Sarah</td>
<td>London, UK</td>
</tr>
</tbody>
</table>
</code></pre>
<h2 id="tabs">Tabs</h2>
<blockquote>
<p>Original: <a href="http://jsfiddle.net/franciscop/wwfby2y8/">http://jsfiddle.net/franciscop/wwfby2y8/</a></p>
</blockquote>
<p>A simple tab system inspired by <a href="www.felipefialho.com/css-components/#component-tab">Components CSS Tabs</a>.</p>
<pre><code class="lang-html"><div class="tabs three">
<input id='tab-1' type='radio' name='tabgroupB' checked />
<label class="pseudo button toggle" for="tab-1">Forest</label>
<input id='tab-2' type='radio' name='tabgroupB'>
<label class="pseudo button toggle" for="tab-2">Lake</label>
<input id='tab-3' type='radio' name='tabgroupB'>
<label class="pseudo button toggle" for="tab-3">Balloon</label>
<div class="row">
<div>
<img src="web/img/forest.jpg">
</div>
<div>
<img src="web/img/lake.jpg">
</div>
<div>
<img src="web/img/balloon.jpg">
</div>
</div>
</div>
</code></pre>
<h3 id="gallery-example">Gallery example</h3>
<p>Create a gallery super-easy with thumbnails as tabs:</p>
<pre><code class="lang-html"><div class="tabs four">
<input id="tabC-1" type='radio' name='tabGroupC' checked >
<input id="tabC-2" type='radio' name='tabGroupC'>
<input id="tabC-3" type='radio' name='tabGroupC'>
<input id="tabC-4" type='radio' name='tabGroupC'>
<div class='row'>
<div>
<img src="web/img/forest.jpg">
</div>
<div>
<img src="web/img/lake.jpg">
</div>
<div>
<img src="web/img/halong.jpg">
</div>
<div>
<img src="web/img/balloon.jpg">
</div>
</div>
<label for="tabC-1"><img src="web/img/forest.jpg"></label>
<label for="tabC-2"><img src="web/img/lake.jpg"></label>
<label for="tabC-3"><img src="web/img/halong.jpg"></label>
<label for="tabC-4"><img src="web/img/balloon.jpg"></label>
</div>
</code></pre>
<h2 id="tooltip">Tooltip</h2>
<p>Hover this element to show the tooltip:</p>
<pre><code class="lang-html"><button data-tooltip="This is a great tooltip" class="tooltip-top">
Hover for tooltip
</button>
</code></pre>
<h3 id="positions">Positions</h3>
<pre><code class="lang-html"><button data-tooltip="This is a great tooltip" class="tooltip-top">
Top
</button>
<button data-tooltip="This is a great tooltip">
Bottom (default)
</button>
<button data-tooltip="This is a great tooltip" class="tooltip-left">
Left
</button>
<button data-tooltip="This is a great tooltip" class="tooltip-right">
Right
</button>
</code></pre>
</article></section></main><script src="https://cdn.jsdelivr.net/umbrella/2.6/umbrella.min.js"></script><script src="web/prism.js">/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */</script><script>u('h2[id]').each(function(node){
u(node).attr('id', u(node).attr('id').replace(/-/g, ''));
});
u('aside .links').append(function(node){
return u('<div>').append(u('<a>')
.addClass('pseudo button')
.attr('href', '#' + node.id)
.html(node.innerHTML));
}, u('article h2'));
u('pre .lang-html').each(function(node){
// The <div> is needed because otherwise, `.before()` removes whitespaces
u(node).parent().before(u('<div>').html(u(node).parent().text()));
});
u('pre .lang-css').each(function(node){
u(node).parent().before(u('<style>').html(u(node).parent().text()));
});
u('aside a').on('click', function(e){
try {
var to = u(e.currentTarget).attr('href');
u(to).first().scrollIntoView({behavior: "smooth"});
e.preventDefault();
history.replaceState(null, '', to);
} catch(err) {}
});
u([window]).on('scroll', function(){
var top = this.scrollY || document.documentElement.scrollTop;
u('.top').toggleClass('visible', top > 1000);
}).trigger('scroll');</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></body></html>