Picnic CSS
+Picnic CSS is a lightweight and beautiful CSS library
+Buttons
+They can be of different colors and types:
+<button>Button</button>
+<button class='success'>Success</button>
+<button class='warning'>Warning</button>
+<button class='error'>Error</button>
+<button disabled>Disabled</button>
+<button>Button</button>
+<a class="button">Link</a>
+<input value="Submit" type="submit">
+<label>
+ <input type="checkbox">
+ <span class="toggle button">Toggle</span>
+</label>
+Pseudo buttons
+Allows for seemingly links to behave as buttons:
+<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>
+Hack it
+You only have to define a single color base for new colors. The :hover and :active status are handled as overlays for consistency and simplicity
<button class="myCoolButton">My Cool Button</button>
+.myCoolButton {
+ background: #85144b;
+}
+To create a larger button you only need to make the font inside it larger. The paddings are set in em so the whole button stays in great shape:
+<button class="mainButton">Large button</button><br>
+<button>Normal button</button><br>
+<button class="shyButton">Small button</button>
+.mainButton {
+ font-size: 1.5em;
+}
+.shyButton {
+ font-size: .75em;
+}
+To change the color of the pseudo-color on hover:
+<button class="pseudo cool">Pseudo personal</button>
+.cool:hover,
+.cool:active,
+.cool:focus {
+ background: #cff;
+}
+Card
+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:
+<article class="card">
+ <header>
+ <h3>A really simple h3</h3>
+ </header>
+</article>
+<article class="card">
+ <header>
+ <button>Love</button>
+ <button class="dangerous">Hate</button>
+ </header>
+</article>
+<article class="card">
+ <header>
+ <h3>Forest</h3>
+ </header>
+ <footer>
+ <button>Like</button>
+ </footer>
+</article>
+<article class="card">
+ <img src="/web/img/forest.jpg">
+ <footer>
+ <h3>Misty Forest</h3>
+ <button>Like</button>
+ </footer>
+</article>
+Checkbox
+Display an inline checkbox with a nice default style
+<label>
+ <input type="checkbox">
+ <span class="checkable">Check me out (;</span>
+</label>
+<label>
+ <input type="checkbox" checked>
+ <span class="checkable">Uncheck me</span>
+</label>
+Usage
+This plugin, while experimental in the past, is mature now. Use a normal checkbox followed by any other element with the class checkable. The element that follows the checkbox will receive the pseudo classes so it should be able to do so. We recommend a <span> or <label>. Here we use the label around them for making the <input> change state when you click on this folowing element.
<label>
+ <input type="checkbox">
+ <span class="checkable">Checkbox text</span>
+</label>
+But you can also use a label and reference the original input:
+<input id="checkboxdemo" type="checkbox">
+<label for="checkboxdemo" class="checkable">Checkbox text</label>
+Javascript
+You do not need javascript since we are using the native elements and not setting display: none purposefully. However, you can still use javascript as normal to retrieve the checked elements.
-
- 
-
-