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">

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:

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.

$picnic-primary: #faa;

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

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

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 ⇒

1 /2 /3

Obviously agree with the terms and conditions

I agree with them!

I love Picnic!I've seen better...

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).

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