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
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.
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.
Gulp autoprefixer task
re #20
Tested in IE11, IE10, IE9, Chrome, Firefox, Opera, Safari.
If @FranciscoP could give this a once over, that would be great :)
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.
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.
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
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!
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 indefault/_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.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
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!Add textarea styling. Allow to set border for all input types
Before
After set the
$picnic-border-weight: 3px
and$picnic-border-color: orange