What is it?

Picnic is a simple, versatile, powerful little Responsive Grid System. It is meant to be simple, so it does not do a bunch of stuff, however it does pretty well what it was designed for.

Features

Responsive

Mobile first

12 columns

Light & Simple

Installation

To use this pretty cool grid system, simply download or clone the project from Github. The file you are looking for is called picnic-grid.css and is found inside the dist/ folder. I am certain you won't need a map for this.

With Bower

If you use bower, even easier:

$ bower install picnic-grid

How To

The very first thing you may want to do is letting your browser know you're building a responsive website:

<meta name="viewport" content="width=device-width, initial-scale=1">

Once you load the picnic-grid.css file simply use the following markup to make use of the grid system:

2 columns

c-6
c-6
<div class="grid">
        <div class="c-6">c-6</div>
        <div class="c-6">c-6</div>
    </div>

12 columns

c-1
c-1
c-1
c-1
c-1
c-1
c-1
c-1
c-1
c-1
c-1
c-1
<div class="grid">
        <div class="c-1">c-1</div>
        <div class="c-1">c-1</div>
        <div class="c-1">c-1</div>
        <div class="c-1">c-1</div>
        <div class="c-1">c-1</div>
        <div class="c-1">c-1</div>
        <div class="c-1">c-1</div>
        <div class="c-1">c-1</div>
        <div class="c-1">c-1</div>
        <div class="c-1">c-1</div>
        <div class="c-1">c-1</div>
        <div class="c-1">c-1</div>
    </div>

Adding responsive behavior

Making this grid responsive is fairly simple. It uses classes to indicate how to behave at certain breakpoints.

c-12
c-t-6
c-12
c-t-6
<div class="grid">
        <div class="c-12 c-t-6">c-12 c-t-6</div>
        <div class="c-12 c-t-6">c-12 c-t-6</div>
    </div>

As you may have already guessed, the above displays as two rows in mobile resolutions and changes to 2 columns in tablet and desktop.
Now lets play with the classes to create more responsive layouts.

c-12
c-d-4
c-12
c-t-6
c-d-4
c-12
c-t-6
c-d-4
<div class="grid">
        <div class="c-12 c-d-4">c-12 c-d-4</div>
        <div class="c-12 c-t-6 c-d-4">c-12 c-t-6 c-d-4</div>
        <div class="c-12 c-t-6 c-d-4">c-12 c-t-6 c-d-4</div>
    </div>

Show/Hide columns

Default Screen >= 0px
Small Devices Mobiles
Medium Devices Tablets
Large Devices Desktops
.in-m
.in-t
.in-d
.not-in-m
.not-in-t
.not-in-d
Mobile only .in-m .not-in-t
Tablet only .in-t .not-in-d

Demo

I bet you wanna see what else it can do. Well, don't wait any longer to get to the preview page.