Show HN: Picnic CSS relaunched, a lightweight Bootstrap alternative
picnicss.com
picnicss.com
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
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:
<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.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 :)