Picnic CSS

Lightweight and beautiful library

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/picnic">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/picnic">

CDN | Download | GitHub

Default HTML beauty

The native HTML elements get a boost so you don't need to write presentation classes mixed with your HTML.

Picnic is completely modular so you can easily modify and test each part:

Documentation

Made for the hackers

Install with bower and you will be able to integrate Picnic into any project and make it work for you.

Picnic is written in SCSS with many variables and classes (placeholders) to make it easy to extend.

GitHub
$picnic-primary: #faa;

@import 'bower/picnic/src/picnic';

.call-to-action {
  @extend %button;
}

It's alive!

Get the best experience for your users with many subtle and carefully crafted CSS transitions.

Fun fact: there's not a single line of JavaScript for controlling the multi-step form on the right ⇒

Tests
/ /

Registration form example

Obviously agree with the terms and conditions

Our relationship

Subscribe?

For your mobile

Picnic's mission is to be under 10kb of compressed CSS for a better and faster mobile load. Check the network usage of this page (F12).

Open Source

If you love something set it free. This license allows you to use Picnic in a broad variety of projects.

MIT License

Special thanks to