Show HN: Picnic.css, a lightweight Bootstrap alternative

I'm a big fan of using a framework like Susy (there are others as well) that just lets you assign the number of columns an element spans.

Something like:

.logo { span (3 of 10); }

nav { span(7 of 10); }

So you can get columns without touching your HTML.

[edit] nvm, it just doesn't work over HTTPS. http://owenversteeg.com/min-bootstrap-plugin works. I'll have to look at setting up https for that.

2. Can you share a tool (preferably online) where we can see the color contrast problem, please? How did you check that they didn't meet WCAG 2.0 AA (so I can check it and fix it).

3. Not really CSS problem

4. Not a CSS problem. Anyway, I think that something can be done with CSS though.

This is a pure CSS tool, so the html and javascript problems should be addressed by the people using the tool, not by the css itself.

So please, don't use it, or help me improve it until it can be used. If you see any other problem, don't hesitate to comment, open an issue in Github ( https://github.com/picnicss/picnic ) or just send a small push request fixing a problem at a time (I'm trying to address every problem by myself, which is daunting).

The main point of creating Picnic CSS was to make a more complete and semantic version than Pure but not as large as Bootstrap. Also, adding some interaction like pushable and toggable buttons, hover states and responsive navbar which were traditionally done with Javascript.

These are the pros I think from Picnic over Min:

* actually has some light validation. This is not yet in the DOC though.

* Forms are more consistent since I've styled all elements to look alike.

* Responsive grid (mobile first).

* Built on top of Normalize, so many of the elements have actually a lot of intensive external testing

* Default that looks nice (couldn't find Min's one so I am not sure whether this is actually something better)

* The invasiveness main advantage is that, with one single line, you have Picnicss already working for you, while in most other frameworks you have to be constantly checking the documentation to see what class names to use.

* Under 1 week of development. This is not a final version, just a point where I wanted to stop and ask for feedback, so I showed it in HN and got better feedback I could ever imagine.

* [opinion] Encourage the use of Fontello instead of the old glyphs

* [opinion] The style in general looks more personalized with Picnic

* [opinion] Not supporting IE5 - IE7. Depending on your audience, this is a pro or a con. I consider it a pro since the statistics (for most America-Europe) tells us that there's almost no one using it, and it cuts a lot of code/testing and allows for using the latest improvements.

And the Cons:

* Buggy. It's a very young project so it's only normal that it has some bugs. I'm fixing them as fast as I can.

* Low browser support. While I wanted to support IE8 initially, I decided not to. This is because my audience is mostly 18 - 30 years old people. However this really depends on your audience so you must test it, but Picnic also degrades nicely in most of the cases.

* Incomplete documentation. There are some things that are not yet documented.

* Incomplete testing. Any help about how to test it on many platforms easily would be greatly welcome.

Note how some of the pro/cons are biased. However I couldn't see you mentioning any disadvantages or limits for Min. What do you think it's lacking?

Another point is variety. It's great to have many different options to choose, and I saved minfwk.com and will surely use it at some point.

PS, I have writen so many times the size of Picnic at so many stages that I've confused everyone. It's actually 2.7kb when minimized and zipped, so only 3 times bigger (;