Picnic CSS

Lightweight and beautiful library

bower install 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:


Made for the hackers

Install it with bower and you will be able to integrate Picnic in 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.

// Define your own main color
$picnic-primary: #faa;

// Add picnic to your codebase
@import 'bower/picnic/src/picnic';

// Create a new element
.call-to-action {
  @extends %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 ⇒

/ /

Registration form example

Obviously agree with the

Our relationship


For your mobile

Picnic mission is to be under 5kb of responsive, compressed css for a better and faster mobile load.

Check the network usage of this page (F12), this page is under 50kb including images.

Open Source

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

Special thanks

With love,
Francisco Presencia