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.

$picnic-primary: #faa;

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

.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 10kb of responsive, compressed css for a better and faster mobile load.

Check the network usage of this page (F12), this page is under 20kb including images (but excluding the showcase).

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
Hey Hacker News, interested on working with me?