
Show HN: Picnic CSS relaunched, a lightweight Bootstrap alternative - franciscop
http://picnicss.com/
======
ecesena
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
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
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
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.

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

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

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

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

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

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

