4 ms·

Show HN: Picnic CSS relaunched, a lightweight Bootstrap alternative

83 points by franciscop 10y ago

deleted 10y ago
[deleted]
ecesena 10y ago
It's pretty clean. Two 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
- franciscop 10y ago
  Thanks. That's totally true, I rushed the new release but didn't test the documentation on mobile. Should be fixed now. The modal will take a bit more work to fix it, I'll open an issue.
fujipadam 10y ago
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.
- franciscop 10y ago
  Use the library that you prefer :) 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.
lukabakar 10y ago
berbagi itu indah apalagi berbagai informasi ^_^ http://obatacemaxstradisional.com/cara-menyembuhkan-luka-bakar/ http://obatacemaxstradisional.com/cara-menyembuhkan-luka-bak...
sintaxi 10y ago
I for one welcome a trend of lightweight "everything you need" libraries. Really like where this is headed.
da_n 10y ago
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. http://i.imgur.com/qmpOsnd.gifv http://i.imgur.com/qmpOsnd.gifv
- franciscop 10y ago
  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. Thanks :)
bigredhdl 10y ago
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."
kbr 10y ago
Nice job! Picnic is one of my favorite frameworks out there. It is similar to my own CSS Framework, http://github.com/KingPixil/wing http://github.com/KingPixil/wing. Although it is more minimal and has less features. Keep it up! :)
tacone 10y ago
Nice job, keep it up! Love the label + checkbox/radio trick, I'm using it as often as I can.
fibbery 10y ago
Nice checkbox animation! I wouldn't use it in a heavy form context but for something like a sign up page it is a nice touch.

83 points by franciscop 10y ago

deleted 10y ago

[deleted]

It's pretty clean. Two 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

franciscop 10y ago
Thanks. That's totally true, I rushed the new release but didn't test the documentation on mobile. Should be fixed now. The modal will take a bit more work to fix it, I'll open an issue.

fujipadam 10y ago

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.

franciscop 10y ago
Use the library that you prefer :) 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.

lukabakar 10y ago

berbagi itu indah apalagi berbagai informasi ^_^ http://obatacemaxstradisional.com/cara-menyembuhkan-luka-bakar/ http://obatacemaxstradisional.com/cara-menyembuhkan-luka-bak...

sintaxi 10y ago

I for one welcome a trend of lightweight "everything you need" libraries. Really like where this is headed.

da_n 10y ago

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. http://i.imgur.com/qmpOsnd.gifv http://i.imgur.com/qmpOsnd.gifv

franciscop 10y ago
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. Thanks :)

bigredhdl 10y ago

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."

kbr 10y ago

Nice job! Picnic is one of my favorite frameworks out there. It is similar to my own CSS Framework, http://github.com/KingPixil/wing http://github.com/KingPixil/wing. Although it is more minimal and has less features. Keep it up! :)

tacone 10y ago

Nice job, keep it up! Love the label + checkbox/radio trick, I'm using it as often as I can.

fibbery 10y ago

Nice checkbox animation! I wouldn't use it in a heavy form context but for something like a sign up page it is a nice touch.