Picnic CSS

A beautiful CSS library to kickstart your projects

CSS Toolkit
franciscop/picnicpicnicss.com/picnic

README

Picnic CSS


Unpack your meal and get coding. An invasive CSS library to get your style started.


Getting started


There are many ways of using Picnic CSS in your projects. Here a brief introduction of the recommended two methods:


CDN - just give me the file


Use Picnic CSS in the CDN jsDelivr for linking to the static file.


Bower - to personalize Picnic


To install Picnic with bower just write this in your terminal (you'll need bower installed):

  1. ```
  2. bower install picnic
  3. ```

Then, to use it within your scss development cycle, just do:

  1. ```scss
  2. // Here go any variables you want to overwrite
  3. $picnic-primary: #faa;

  5. // Now import picnic and a couple of plugins
  6. @import 'BOWER_PATH/picnic/src/picnic';
  7. @import 'BOWER_PATH/picnic/plugins/nav/plugin';
  8. @import 'BOWER_PATH/picnic/plugins/modal/plugin';
  9. ```


NPM


Just do

  1. ``` sh
  2. npm install picnic --save
  3. ```

To add it to your repository. Then you can include it straight from your css like:

  1. ```css
  2. @import "../node_modules/picnic/picnic.min.css";
  3. ```

Thanks to chadoh for helping me in publishing it in NPM and for the instructions.



Other ways


You can always download the latest minimized version from github, clone the repository or download it. Or clone it: git clone https://github.com/franciscop/picnic.git



Wait, invasive?


Many libraries rely upon adding classes to your already existing HTML elements, resulting in bloated code like ``. It would be easier if the buttons knew they are, well, *buttons*. Crazy eh?

This setup works neatly for newly created projects or for pages that you have to build quick from scratch. It also allows for a much more intuitive extension of base elements.



Browser support IE11+


Bug reports and fixes only for IE11+. With IE8- usage [dropping fast](https://ux.stackexchange.com/questions/64250/do-websites-still-have-to-support-internet-explorer-8-and-below/#64361) and with IE9 and IE10 usage even below their older mate, it is time to start thinking about not supporting them anymore. For others, up to 2 previous versions are expected to be working, and everything that is not is definitely a bug.



Example usage


After including the stylesheet as indicated in the Getting started:

  1. ``` html
  2. <form>
  3.   What's your favourite Picnic CSS feature?
  5.   <label>
  6.     <select name="feature">
  7.       <option value="semantic">    Semantic HTML5 </option>
  8.       <option value="lightweight"> Lightweight    </option>
  9.       <option value="css3">        Only CSS3      </option>
  10.       <option value="responsive">  Responsive     </option>
  11.     </select>
  12.   </label>
  13. <input type="email" placeholder="Email to receive updates">
  14. <button class="primary"> Subscribe! </button>
  15. </form>
  16. ```

If you don't see anything that seems picnic.css exclusive, that's because there's nothing, that's the main purpose of Picnic CSS. However, try it out and you'll see a decent example in your browser.



Advantages


- Only CSS3 is needed and your HTML5 stays highly semantic*.

- Under 10kb when minimized and gzipped with all plugins.

- Normalize.css is used as a base, achieving a solid foundation.

- Support: IE 9+ and others. No fancy CSS3 on IE 8.

- Responsive: The nav and the grids are responsive.


\* Except for the grids :(



Disadvantages


- Difficult to drop in an already created project. This is what I meant by invasive. This is not within the new scope of the project.



Alternatives and why I still created Picnic CSS


Milligram: A minimalist CSS framework

[PureCSS](http://purecss.io/): Lightweight, nice package. The thing I would be using if I didn't build Picnic CSS and where I took the inspiration. However, no nice `` right out of the box.

[Min](http://mincss.com/): a tiny, basic css framework. It has great browser support. No `