Hacker News Reader

Comment by franciscop | Hacker News Reader

I've tried to keep it as tiny as possible with just under 3kb when gzipped. What would you change? What would you add? Any feedback or pull request is greatly welcome! MIT Licensed

View on HN

Small nitpick, but you should conform your html to something more idiomatic; non-idiomatic code just screams isolation and lack of experience and those spaces between your equal signs jump right out and could scare the user off. Its silly I know, but :/

It's not silly, it's the first thing I noticed.

Fixed? I've always written code that way, even when working with more people. I'll try to correct it to adapt to the standard though. Thanks for the tip.

My suggestion is to make picnic work with `label` elements that are outside the `input` they related to.

In other words, the CSS should work for this HTML

    <input type="checkbox" id="checkable" />
    <label class="button" for="checkable">Checkable</label>

instead of the unidiomatic (and broken from the POW of accessibility)

    <label class="button">
      <input type="checkbox" />
      <span>Checkable</span>
    </label>

This was considered, but I decided against it in the end. However, I've found a solution that would work with both html and will upload it soon.

I wanted to hate on it but I dunno, I might give it a spin. :) I'm mainly interested in your grid naming conventions, as the become very cumbersome in bootstrap.

One thing I didn't see was the ability to add offsets to a grid item?

It was the first time I wrote a grid so they're not perfect nor complete. If you feel inclined, please submit the suggestion in ( https://github.com/picnicss/picnic/issues ) or feel free to push the edit.

nah, i'll just use bootstrap then.

Also, and mind you this is JUST my opinion but I don't think the buttons look very attractive. That might be something worth "sprucing up"? Anyway, definitely a cool project and I hope to give it a try.

The checkbox bugs me, it's not in line with the radio buttons and it's very slightly smaller. I'd make it square, but that's a personal preference.

I would make the shadow inside the input boxes lighter when the box is selected. It doesn't fit well with the green outline.

Or maybe change the outline to an outer glow?

Thank you for the suggestion! It works great with that style!

Here is the thing I would like and maybe I could fork your and just try it and see how it looks. I really like attribute based properties for grid, I think this is great idea. Check it here. I think this could make your framework different from me-too frameworks. I think you could improve on it quite a bit, add optional modules for modal for example, maybe some other elements.

http://glenmaddern.com/articles/introducing-am-css

I don't really like the style. However, I take a note about it, thank you for the suggestion.

Ok, looks interesting for an organisational stand point but I have my doubts perf-wise. Has it been benchmarked a little ?

I would make the default grey button colour a little bit darker so it's easier to read the white labels.

Changed it to #AAA now and it's more readable, thanks!

Is it on purpose that the radio button "dot" that shows when selected is not in the center?

No, it looks fine in the versions of Chrome and Firefox that I'm testing, but not in every browser since this is the #1 issue I've received. I'll fix it within the next 24 hours.

I'm running Chrome "37.0.2062.120 m" on Windows 7 64 if that helps.

Reply on news.ycombinator.com