Can you point me to the "why" i.e. why Picnic CSS as opposed to Bootstrap and the myriad lightweight CSS alternatives? To be clear, I am not saying Picnic is not valuable, but just want to read the reasoning.
I made it so working with html was more logic or semantic, being tired of having to do things like this for a simple button:
<button class="button">Click me</button>
For me it's just a no-brainer that a button should look like... a button. Also removing many of the accessory classes such as pull-right, text-center, etc. Finally it was a challenge to do some of the bits that are normally done with js in pure CSS, such as a modal, tabs, fancy checkboxes/select, etc.
Now it's much much simpler (from what I've tried at least) to write html in this way, without superfluous classes. If you are using the sass (you probably should with Picnic) you also get some nice touches to make it even simpler and to avoid one of the few problems my approach has, being overly specific in CSS:
button, .button, [type="submit"] { /* ... */ }
Instead you can extend the root element with sass:
%button { /* ... */ }
Since all of the others come from there. Quick recap: simpler css, super flexible sass.
This looks really solid, I've been looking around for a lightweight alternative to Foundation. Is there a SASS version (so can pick and choose components etc)? Also, in the docs the tabs are working well but on the test page there is a bit of an issue where the image isn't aligning to the left side. Hard to describe so have uploaded a gif of it in action.
Totally true, there were a lot of regressions since I revamped the grid system from scratch and I'm fixing them.
The main code is in sass and everything is compiled with grunt. You can do it manually, check `src/picnic.scss`. However note that I don't follow semver so strictly with that file, so make sure to lock the version.
Sometimes HN reads my mind. I was just thinking this morning "I wonder if something more lightweight than Bootstrap/foundation/MDL would be more what I'm looking for."
Nice job! Picnic is one of my favorite frameworks out there. It is similar to my own CSS Framework, http://github.com/KingPixil/wing. Although it is more minimal and has less features. Keep it up! :)
13 comments
[ 3.2 ms ] story [ 45.0 ms ] threadTwo improvements to the docs (I'm on iPhone 6s):
- the menu on the left overlaps the text, which overall is pretty narrow, see for instance the forms. It's prob better to put it in the right bar.
- modal, I'd add an example with scrolling, which is often broken on mobile devices
The modal will take a bit more work to fix it, I'll open an issue.
I made it so working with html was more logic or semantic, being tired of having to do things like this for a simple button:
For me it's just a no-brainer that a button should look like... a button. Also removing many of the accessory classes such as pull-right, text-center, etc. Finally it was a challenge to do some of the bits that are normally done with js in pure CSS, such as a modal, tabs, fancy checkboxes/select, etc.Now it's much much simpler (from what I've tried at least) to write html in this way, without superfluous classes. If you are using the sass (you probably should with Picnic) you also get some nice touches to make it even simpler and to avoid one of the few problems my approach has, being overly specific in CSS:
Instead you can extend the root element with sass: Since all of the others come from there. Quick recap: simpler css, super flexible sass.http://i.imgur.com/qmpOsnd.gifv
The main code is in sass and everything is compiled with grunt. You can do it manually, check `src/picnic.scss`. However note that I don't follow semver so strictly with that file, so make sure to lock the version.
Thanks :)