Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Picnic.css, a lightweight Bootstrap alternative

picnicss.com

Post reply on HN
Print view View original

101–110 of 149 posts

Re: Show HN: Picnic.css, a lightweight Bootstrap alternative

#101

Post by owenversteeg »

lsh wrote: post #95
owenversteeg wrote: post #87

First of all, I want to say that I like the vibrant colors, small size, and checkable buttons. Smaller (and JS-less) CSS frameworks is something that I've been crusading for for years now. Secondly, I'm the creator of Min ( http://minfwk.com ), a fellow small CSS framework. Min is only 995 bytes - 5 times smaller. It also is more widely used, has feature parity with Bootstrap through the Min Bootstrap plugin, support…

Nuts to those calling bad taste: if I had a competing framework I'd be making it part of the conversation, too. Besides being tiny, how does Min stack up against Picnic, owenversteeg? I expect a bias opinion, don't worry ;)

Thank you! At least one person doesn't think I'm a "complete tool" :)

Personally I think Min's largest advantages over Picnic are:

* more features (button sizing, messages, input addons, 12-column grid instead of 6-column grid) * vastly better browser support (not only does Min work on IE5.5+ but also it is tested across hundreds of browser and device configurations before each release) * Unprescriptive - it's incredibly easy to override Min's styles and turn it into something else while still making use of Min's extensive testing and features. With Bootstrap you have to use !importants and strange selectors; with Min overriding things is easy as pie. * LESS/Sass versions * An icon-set that works out of the box

Re: Show HN: Picnic.css, a lightweight Bootstrap alternative

#102

Post by hhandoko »

egoodberry wrote: post #40

An even lighter-weight alternative: forgetting about CSS "frameworks" altogether. Aside from propping up prototypes really quickly (an exercise made trivial with these help of these little style collections) I just don't understand why anyone would want them in a real app. I've spent hours upon hours fighting the likes of Bootstrap and its copycats. And to what end?

It's fine when you are targeting one browser with a specific version (e.g. developing an internal web application with IE8 baseline). However, when you are building a web application targeting various browsers and versions, there will be subtle differences that may 'break' your UI.

CSS frameworks like Bootstrap provides you with a tested baseline, so you can be confident that the front-end you created will look the same across a wide range of browsers.

Certainly Bootstrap won't be suitable for all scenarios, but starting from a framework is generally a good idea.

Re: Show HN: Picnic.css, a lightweight Bootstrap alternative

#103

Post by owenversteeg »

jbail wrote: post #99
owenversteeg wrote: post #86

Earlier quoted context omitted.

Thanks! I'm the creator of Min. Are there any suggestions or improvements you have?

My first impression of min is that it looks nice. Really, for it's goals, it's pretty tight. As a branding thing, I'd change that URL. I get that it's short but minfwk.com doesn't really look like "Min Framework" to me. It just looks like a bunch of letters. A domain like mincss.com, getmin.com, minframework.com or something more legible would be better.

> My first impression of min is that it looks nice. Really, for it's goals, it's pretty tight.

Thanks! You have no idea how good that feels.

> As a branding thing, I'd change that URL. I have had minframework.com for a while and still do, but it seems too long (Right now it redirects to minfwk.com) but I just got mincss.com and I prefer it quite a bit. I'll update Github accordingly. Thanks for the suggestion!

Re: Show HN: Picnic.css, a lightweight Bootstrap alternative

#104

Post by manojlds »

owenversteeg wrote: post #101
lsh wrote: post #95

Earlier quoted context omitted.

Nuts to those calling bad taste: if I had a competing framework I'd be making it part of the conversation, too. Besides being tiny, how does Min stack up against Picnic, owenversteeg? I expect a bias opinion, don't worry ;)

Thank you! At least one person doesn't think I'm a "complete tool" :) Personally I think Min's largest advantages over Picnic are: * more features (button sizing, messages, input addons, 12-column grid instead of 6-column grid) * vastly better browser support (not only does Min work on IE5.5+ but also it is tested across hundreds of browser and device configurations before each release) * Unprescriptive - it's incred…

Your points on Bootstrap customization - are those for v2 or v3? I have used v3 and customized I a lot by just overriding the variables and using the mixins.

Re: Show HN: Picnic.css, a lightweight Bootstrap alternative

#105

Post by yellowapple »

owenversteeg wrote: post #94
heyadayo wrote: post #93

Earlier quoted context omitted.

One answer might be that they sell it a bit better through site design and example. I've got no horse in this race though

Thanks for the first actual answer! What don't you like about Min's site design?

On the docs page, everything looks really big. It's a bit of a nitpick, but I think - in comparison to Picnic at least - it doesn't bode well for the default attractiveness of a site using Min.

Re: Show HN: Picnic.css, a lightweight Bootstrap alternative

#106

Post by arsenerei »

owenversteeg wrote: post #94
heyadayo wrote: post #93

Earlier quoted context omitted.

One answer might be that they sell it a bit better through site design and example. I've got no horse in this race though

Thanks for the first actual answer! What don't you like about Min's site design?

I also really like what min aims to accomplish. These are my observations and recommendations to improve the site.

* h1 font-size should be around 2.2em. It's far too large at the moment.

* .contain width seems best around 1020px. You want a thinner width to improve readability.

* All buttons and clickables should not shift the page in any unexpected ways. Clicking on the buttons, for instance, go to the top of the page. One solution would be to onclick="return false;" on relevant elements.

* The "Min Basics" sections is a bit wordy. I think there's some superfluous information and I think the word count can be cut in half.

* The Download page doesn't cleanly separate the calls to actions enough for my tastes. I would prefer having a "CDN Delivery" section and a "Download" section. I believe most people who want a minimal framework will know the difference.

* The layout of the "GET CSS" button and the textarea seems...off. The button is too large and the textarea dimensions are, again, somehow off.

Other than that, I think you've done a great job explaining the benefits of your framework, have given a solid overview of is features and I appreciate the humor of the sea monster.

Keep up the great work!

Re: Show HN: Picnic.css, a lightweight Bootstrap alternative

#107

Post by illicium »

DigitalSea wrote: post #83

In my opinion, the only great thing about Bootstrap is the grid system and form styling, the rest is just useless cruft. As a front-end developer, I see the value in Bootstrap and I have used it before, but when installing it as a Bower component, it makes it harder to filter out the crap you don't need like button styling, header styling and other stuff Bootstrap includes that just bloats your CSS. To me, I find Boo…

The best thing about Bootstrap is that it's ubiquitous -- every frontender has heard of it and can easily jump on a project that uses it -- and that there are a lot of integrations with frameworks, like angular-bootstrap or react-bootstrap, that don't tie you to using the stock jQuery plugins.

This framework doesn't have anything that relies on JS magic, like button dropdowns, collapsing panes, etc, which are useful in real-world apps. I certainly wouldn't want to reimplement my own versions for every project.

Bootstrap's cruft is a non-issue if you use the customizer [0], or, better yet, selectively import the components using LESS or SCSS [1].

[0] http://getbootstrap.com/customize/

[1] https://github.com/twbs/bootstrap/blob/master/less/bootstrap...

Re: Show HN: Picnic.css, a lightweight Bootstrap alternative

#108

Post by danielnixon »

Lots of accessibility issues here.

* Keyboard accessibility is completely busted (other comments have pointed this out).

* Color contrast doesn't meet WCAG 2.0 AA (Bootstrap is bad here too).

* The should have aria-role="button", tabindex="0" and a bit of JavaScript to trigger a click event when the space or enter keys are pressed while it has focus. This is for keyboard _and_ screen reader accessibility.

* The checkboxes and radio buttons need similar ARIA, tabindex and keydown tricks (because the inputs themselves are hidden [stupidly, in my opinion]). Again, this is for both keyboard and screen reader users.

Bootstrap commits a lot of the same mistakes with their button.js component (although it looks like it's improving). See this post [0] for details (disclaimer: I wrote it).

I wouldn't use this if I were you.

[0] https://danielnixon.org/improving-bootstraps-woeful-accessib...

Re: Show HN: Picnic.css, a lightweight Bootstrap alternative

#109

Post by yellowapple »

I really like this, and am considering incorporating it in quite a few sites at this particular moment; so far so good implementation-wise.

A huge plus that makes up for the lack of pre-IE9 Internet Explorer support is the fact that this seems to fail gracefully; since it's "invasive", it leaves behind a relatively-normal-looking site should it not load (tested on lynx and Firefox). This makes me less nervous about deploying it on sites where the target demographic is more likely to use old IE versions (like my own hometown, unfortunately...).

A couple oddities:

* It would be really nice if the hamburger-mode menu pulled its background colors from the non-hamburger-mode menu and/or navbar; that was a bit of a hiccup when trying to change the navigation colors.

* I still can't figure out how to change the color of the hamburger icon. Where is that defined so I can override it and match the rest of a page's text? With a dark navbar background, it's kind of hard to see.

* The thresholds for hamburger v. non-hamburger seem too low; while my testing in Firefox resulted in proper responsiveness to the window width, the page loads as if it's a desktop site on my phone (HTC One M8, any browser), probably because of the high (1080x1920) screen resolution. I ended up manually editing picnic.css in order to adjust the thresholds accordingly (to 1100px for phones and 1200px for whatever's supposed to be the next one; the narrowest desktop monitor width in somewhat-common use nowadays is 1280, so I don't expect there to be very many issues caused by this...).

* Weirdness with font sizes on actual phones (as opposed to resized desktop windows) when font-size is set to 1em (probably a mobile browser quirk, not necessarily something wrong with Picnic); I added a max-width conditional to set these bigger on phone widths (while leaving them at 1em for desktops/laptops, where the screens are bigger and can handle the smaller text).

All in all, not bad. It's already likely going to see use in a couple of my own sites. For someone like me who cringes at the thought of trying to wrangle Bootstrap into doing something useful, this is a breath of fresh air.

Re: Show HN: Picnic.css, a lightweight Bootstrap alternative

#110

Post by progx »

franciscop wrote: post #13
progx wrote: post #11

Earlier quoted context omitted.

Yes and why should i use it and not purecss (which i currently use)

Besides of the comment above, please use the one you prefer and fits better your needs. Clean html and out of the box options are Picnic strengths, flexibility and browser support are PureCSS strengths.

Thanks for the short explanation.
Post reply on HN