Picnic CSS 3.0 — Build system

There’s a new build system baked right into Picnic CSS to improve on its ultimate goal: to keep reducing webpages’ load time. Version 1.0 was about weight, 2.0 about functionality but version 3 is about the average 6 CSS requests per page. I had to do something to fix this, so I did my best.

Current practices

When developers want to load different CSS assets or plugins they often do something like this:

<link href="/css/picnic.css" rel="stylesheet" type="text/css">
<link href="/css/modal.css" rel="stylesheet" type="text/css">
<link href="/css/nav.css" rel="stylesheet" type="text/css">

The main drawback for this is that all the assets have to be retrieved individually, making the load time a nightmare for mobile. Some of you might put them into a build system like sass that joins them all together and minimizes them, which is great. But for simple, fast or legacy projects you might still be doing it like the example above.

Picnic CSS Build System

Introducing Picnic CSS build. Using the files required in the example above, the url would look like this:


You’ve got your base file, called “picnic_3” (version 3). Then you get two plugins, “modal” and “nav”. Lastly, you set the optionmin” to make sure all of these assets are minimized. The first time you call the url the file gets built and stored. Next requests are retrieved from cache.

You get all of the files within a single URL and you can even pass options, which is great. To add your own plugin just send a pull request to Picnic CSS’ Github with it. It should be a folder under /plugin.

Other changes in 3.0

  • Flat style. I find the style to be great for some cases, but as a general use library, it is also limiting. From 3.0 on the default style is flat. The 3d effect will be available in the short future as a plugin.
  • Default built will not contain nav, footer or modal. The reasoning is similar to the previous one since they were specific object styles. You can easily add them by just using /nut/picnic+nav+footer+modal.css
  • The Grid System. It was really buggy and not ready for prime time. Thanks to ungrid now Picnic has a great and responsive grid system. And it is really small. The only cost is to have only one breakpoint.
  • Webpage. I wasn’t happy with the webpage, so I merged it into the git repository and now the build system is also versioned. You can send pull requests about the website too! This should make everything smoother.

Thank you

Hacker News for all the great feedback that you gave me so far and for all of the great developers that helped me to make the project grow.

Tell me what you think in Hacker News

Like what you read? Give Francisco Presencia a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.