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

Show HN: Littlebox, a pure CSS icon library – worth continuing?

littlebox.cabmaddux.com

Post reply on HN
Print view View original

31–40 of 71 posts

Re: Show HN: Littlebox, a pure CSS icon library – worth continuing?

#31

Post by coderdude »

gdix wrote: post #29
coderdude wrote: post #21

Earlier quoted context omitted.

Don't forget about compatibility. You can be reasonably sure that font icons will display the same everywhere. CSS-based icons are all over the map compatibility-wise (display issues across browsers).

Sure, but font icons can only be one color. Can you give an example of a compatibility issue?

Font Awesome allows stacking: http://blog.fontawesome.io/2014/09/25/custom-file-types-with...

Here's their demo but with some color added: http://codepen.io/anon/pen/VYQMea

But yeah, you're typically stuck with one color. Here's a demo that shows off multi-color fonts (Firefox only): http://pixelambacht.nl/2014/compyx-a-multicolor-8bit-font/

That technique could be used to make multi-color font icons if it were cross-browser compatible. Maybe one day. But I think SVG icons are where things are headed.

As for compatibility issues, there's one listed on this page: https://news.ycombinator.com/item?id=9047846

Re: Show HN: Littlebox, a pure CSS icon library – worth continuing?

#32

Post by riquito »

Retr0spectrum wrote: post #18
cs- wrote: post #16

Tested your page on an i3, all 4 cores are at 60%+ that's not very good... probably affects only the animated ones still

That doesn't sound right. My 2520M stays at about 8%, using Firefox. That's still relatively high, but in reality there would only be a few on the screen at once.

I can confirm that an i5-4200U (decent < 1000$ notebook) goes from 2-4% lowest proc frequency to 14% max proc frequency (and the fan starts). Using Firefox. It is clearly noticeable. Of course YMMV

Re: Show HN: Littlebox, a pure CSS icon library – worth continuing?

#33

Post by notatoad »

nicely done, these are pretty cool. like anything interesting in css i'm not sure if they're practical, but they're cool regardless of the practicality.

>to set your own color, simply set the icons border color in your CSS, like so: .lb-, .lb-::before .lb-*::after

could you use border-color:inherit on the :before and :after pseudo-elements, so it's just a single selector change to change the color?

Re: Show HN: Littlebox, a pure CSS icon library – worth continuing?

#36

Post by twiss »

notatoad wrote: post #33

nicely done, these are pretty cool. like anything interesting in css i'm not sure if they're practical, but they're cool regardless of the practicality. >to set your own color, simply set the icons border color in your CSS, like so: .lb- , .lb- ::before .lb-*::after could you use border-color:inherit on the :before and :after pseudo-elements, so it's just a single selector change to change the color?

Alternatively, if you leave it off it defaults to currentColor, which means you can set the color property on it or a parent.

Re: Show HN: Littlebox, a pure CSS icon library – worth continuing?

#37

Post by voidiac »

cabmaddux wrote: post #23
wereHamster wrote: post #10

The swiss flag should be square.

True, thanks for catching that! I'll fix it up.

There are some more problems with the flags. The colours of the french and german flag are in the wrong order. The icelandic and norwegian flags are missing the white line around the cross. The class for the netherlands shouldn't be lb-flag-holland.

Re: Show HN: Littlebox, a pure CSS icon library – worth continuing?

#39

Post by michaelbuddy »

I'd stay away from css to create images personally. it's just too hackish. seems like wikipedia implements some sort of svg to png conversion on the fly. that is preferable for me. css isn't even good at what it's intended for. I certainly don't see it solving more problems.

Re: Show HN: Littlebox, a pure CSS icon library – worth continuing?

#40

Post by michaelbuddy »

jszymborski wrote: post #35

I wonder if SVG is more suited to something like this...

it's exactly what svg is suited for. I cringe anytime I see css graphics. ONe guy did an entire 3D scene using CSS and I was both awestruck and sickened when I saw the explanation of how it was done. what a pain in the ass with little reward IMO. But if somebody wants to do something, whatevs go for it. hack away.
Post reply on HN