A beautiful CSS library to kickstart your projects

  • By Francisco Presencia
  • Last update: Jan 9, 2023
  • Comments: 11

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

bower install picnic

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

// Here go any variables you want to overwrite
$picnic-primary: #faa;

// Now import picnic and a couple of plugins
@import 'BOWER_PATH/picnic/src/picnic';
@import 'BOWER_PATH/picnic/plugins/nav/plugin';
@import 'BOWER_PATH/picnic/plugins/modal/plugin';

NPM

Just do

npm install picnic --save

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

@import "../node_modules/picnic/picnic.min.css";

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

">
<form>
  What's your favourite Picnic CSS feature?

  <label>
    <select name="feature">
      <option value="semantic">    Semantic HTML5 option>
      <option value="lightweight"> Lightweight    option>
      <option value="css3">        Only CSS3      option>
      <option value="responsive">  Responsive     option>
    select>
  label> <input type="email" placeholder="Email to receive updates"> <button class="primary"> Subscribe! button> form>

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: 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: a tiny, basic css framework. It has great browser support. No

Github

https://github.com/franciscop/picnic

Comments(11)

  • 1

    Fix modal positioning in Safari

    Fixes https://github.com/picnicss/picnic/issues/40.

    I believe this does the trick, though I figured out this fix just by editing in Safari's inspector and don't have the time or dev setup to compile the scss myself.

  • 2

    Dark Mode

    Building off of my changes to the scss, I implemented base16-tomorrow as a dark mode. Theming can probably easily evolve from here.

    I'm not sure how best to document this for new users or make it usable for them. I'm currently making use of this with my own branch that I'm using as an npm module.

  • 3

    Gulp autoprefixer task

    re #20

    • Supporting the last 2 browser versions
    • Removed relevant vendor prefixes from sass component

    Tested in IE11, IE10, IE9, Chrome, Firefox, Opera, Safari.

    If @FranciscoP could give this a once over, that would be great :)

  • 4

    An interesting project.

    An interesting project. The only documented way to contribute is to create a plugin. There is no Help facility, no bug reporting facility, and no GitHub Issues section. I have a basic question about using this library, but no way to get it answered.

  • 5

    Fix styling for select[multiple]

    For multi-select dropdowns, we need to remove the arrow.svg and let it grow vertically to fit the list of items. Also, removing padding brings the option element text in alignment with regular select elements and inputs.

  • 6

    Use sass for development and add build system

    I've added a build system for auto transpilation / minification of the library. I decided to port the library to sass because it should help to ease future development, allow a cleaner code base and also allow additional functionality in the future ie. implementing mixins for the parts of the library that aren't semantic (grids / nav) for users who care strongly about eliminating non-semantic dom elements. It can also make it more easily customizable by simply tweaking variables (much as bootstrap does).

    I've done very little work on the actual scss source itself other than chopping it up, but as a start I've added variables to allow adjusting the responsive breakpoints

  • 7

    Removed slash division and replaced with math.div

    Hi,

    Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0. More information can be found at here.

    I have replaced all slash division with math.div() and imported loaded the math module.

    Thank you!

  • 8

    Removing arbitrary color codes in plugins

    I wanted to make a dark mode and noticed there was a lot of arbitrary hex values. I changed them to the most similar $picnic-* options in default/_theme.scss and didn't notice any perceivable difference. This fixed a lot of small bugs that would happen when you tried to play with the colors.

  • 9

    Updated CDN

    jsDelivr is using a new /npm/ endpoint to automatically support all npm projects. So I updated the links to make sure they show the latest versions. (the site will be updated soon)

    More info https://github.com/jsdelivr/jsdelivr#usage

  • 10

    Allow any node version

    Since npm is sloppy, it allows installing packages that say to only use node 4.0.0, even if you're using a different version of node.

    Yarn is not so sloppy.

    I want to switch to yarn, but picnic is causing problems.

    I don't know if the version of node actually matters for picnic. If it does, then a range of node versions can be specified. I doubt it matters, though!

  • 11

    Add textarea styling. Allow to set border for all input types

    1. Allow users to overwrite border for all inputs by overwriting border variables.
    2. Add styles for textarea

    Before

    before

    After set the $picnic-border-weight: 3px and $picnic-border-color: orange

    after