12 ms·
Show HN: Littlebox, a pure CSS icon library – worth continuing?
- Gyonka 12y agoOh yes absolutely. Theses are fantastic icons, really well done man.
- cabmaddux 12y agoThanks very much, feels good to hear they hold up!
- mkeedlinger 12y agoCertainly continue! I think there's a lot more you could do, and I really like them so far.
- cabmaddux 12y agoThanks! I agree might be interesting to try to capitalize further on animating/coloring individual elements and work on scalability. Just trying to gauge how much time to invest. The feedback is a huge help!
- nwenzel 12y agoIf you liked building it, then it's worth continuing. The icons look great.
- cabmaddux 12y agoTrue, a great point. It's not a bad creative outlet. Thanks for taking a look!
- vmarsy 12y agoIt looks really great, changing color via CSS is neat! maybe you could put the license information on that page! (The github page says it is MIT License for those who wonder) btw the french flag is backwards (Blue - White - Red is the good one) EDIT: Thanks for the flag fix benjamin!
- cabmaddux 12y agoFor sure, thanks for taking a look! And good eye on the French flag! I'll get that fixed up. I'll make sure to add license info to that demo/download page. Thanks again, a huge help!
- tschuy 12y agoAditionally, with the flags, I noticed that you have Switzerland as a rectangle. I know that's not an uncommon representation of it, but its flag is actually a square. Just an fyi :)
- Someone 12y agoAnd in the "pedantic++" category: check out flag proportions, too. See for example https://flagspot.net/flags/nl-lu.html https://flagspot.net/flags/nl-lu.html, which explains the difference between the flags of Monaco and Indonesia (buried in a discussion about the flags of the Netherlands and Luxembourg): same colors, but different proportions. So, Belgium should be 13:15 (https://flagspot.net/flags/be.html https://flagspot.net/flags/be.html, for US flags 10:19 seems best for all uses (https://flagspot.net/flags/us-size.html#prop https://flagspot.net/flags/us-size.html#prop), etc. But that certainly is just a fyi :)
- k_ 12y agoI like it :) Something that could further ease the color customization would be to use currentColor [1] on the border colors, allowing the customization to be made simply by changing the "color" attribute of the element. [1] http://tympanus.net/codrops/css_reference/color_value/#section_currentColor http://tympanus.net/codrops/css_reference/color_value/#secti... which I discovered with https://twitter.com/SaraSoueidan/status/564090319117881344 https://twitter.com/SaraSoueidan/status/564090319117881344
- wereHamster 12y agoThe swiss flag should be square.
- cabmaddux 12y agoTrue, thanks for catching that! I'll fix it up.
- voidiac 12y agoThere 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.
- theklr 12y agokeep it going. They look great.
- tracker1 12y agoNice.. with gz transmission, looks like it's under 9kb, which isn't bad at all for an icon set.
- cturhan 12y agoContinue Cabell, these are very nice set of icons with a small file size.
- chrisdotcode 12y agoEDIT: To the author, the download and email icons are the same. This is fantastic. A feature you might not have realized is that it works well with NoScript users. With font-faces considered harmful[0], these icons can be delivered to the user, vulnerability free. [0] https://hackademix.net/2010/03/24/why-noscript-blocks-web-fonts/ https://hackademix.net/2010/03/24/why-noscript-blocks-web-fo...
- cabmaddux 12y agoThanks very much! I had no idea at all, I'll definitely look into it. Great to hear there's another positive for the project. I'll take a look back at the email and download icons, good eye.
- deleted 12y ago[deleted]
- turshija 12y agoReally nice icons, good job ! One suggestion for animated icons: add "animated" and "stopped" states if you didn't already.
- cabmaddux 12y agoThanks! I've tested "stopped" states and have it on my ToDo list, but need to just take a moment and get it done.
- cs- 12y agoTested your page on an i3, all 4 cores are at 60%+ that's not very good... probably affects only the animated ones still
- Retr0spectrum 12y agoThat 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.
- riquito 12y agoI 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
- cs- 12y agoImportant thing to note (and most devs forget this): One does not simply browse only one page at a time anymore
- detaro 12y agoSimilar here, current chrome on Windows 7 pulls CPU load from ~8 to 40 % and spins up the fan noticeably.
- cs- 12y agoupdate: Linux, Chrome Maybe the animated ones should be left as images so far, otherwise great work with the static icons ++
- Apofis 12y agoSo, the million dollar question: is it faster to use these, images/sprites, icon fonts? The trade-off I'm assuming is download/load speed vs. cpu load?
- coderdude 12y agoDon'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).
- gdix 12y agoSure, but font icons can only be one color. Can you give an example of a compatibility issue?
- coderdude 12y agoFont Awesome allows stacking: http://blog.fontawesome.io/2014/09/25/custom-file-types-with-stacked-icons/ 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 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/ 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 https://news.ycombinator.com/item?id=9047846
- elpool2 12y agoThese icons get warped in Chrome when you set the zoom level to 125%. For example: the roof on the house in the lb-home icon is no longer centered.
- Retr0spectrum 12y agoSome of the currencies look a bit off for me: http://i.imgur.com/GhjPBr7.png http://i.imgur.com/GhjPBr7.png I'm using Firefox on Arch. I guess it could be something to do with me not having the right fonts installed.
- cabmaddux 12y agoYeah there are three currency icons that change a lot between browsers because part of the icon is a character. Definitely doesn't really work. Having trouble finding a way to create the central shape with the 3 available elements. May need to scratch them until I can. Thanks for taking a look at it!
- illicium 12y agoNot if this is anything more than an academic exercise. Nice effort, but SVG and, to a lesser degree, icon fonts, are better for this sort of thing.
- cabmaddux 12y agoDefinitely good for working on a few weird CSS oddities and helped me get better acquainted with GitHub and Bower. I figured being able to work with individual elements within the icon might be a plus over icon fonts, but definitely not as reliable. Otherwise, I also couldn't come up with much over SVG either. Thanks for the feedback!
- teamhappy 12y agoQuick PSA: The audio player on the site is an actual audio player.
- rbosinger 12y agoIt seems really well done. However I can't help but think "is this really a use case for CSS; or more of a neat hack?". Is that why you're asking if it's worth continuing?
- cabmaddux 12y agoTrue, may just be a neat hack. The opportunity to work with individual elements of an icon independently and the challenge of the constraints was the initial draw to the project. Maybe there would be a use case for the simple icons and icons that would really benefit from coloring individual elements (hence the flags), but I think there are definitely plenty of drawbacks and it's pretty hacky in some places. I also don't have a great understanding of some of the technical drawbacks and compatibility issues that have been brought up here, so this HN conversation has been an enormous help. I think you've hit on my main question. Thanks for the feedback and for taking a look!
- notatoad 12y agonicely 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?
- twiss 12y agoAlternatively, if you leave it off it defaults to currentColor, which means you can set the color property on it or a parent.
- cabmaddux 12y agoWow, that makes a ton of sense, definitely cleaner than what I've got going now. There are plenty of places to clean it up, but that would be a big one. Thanks!
- dflock 12y agoNice - although they break up a bit if you zoom the page, sadly.
- jszymborski 12y agoI wonder if SVG is more suited to something like this...
- michaelbuddy 12y agoit'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.
- jakobegger 12y agoI was completely amazed when I recently checked browser support for inline SVG; almost all current browsers support them! [1] So I decided to use inline SVG for icons and logos. It's extremely fast (no separate network request, images embedded in gzipped html source), and as a bonus I can style the images easily using CSS (eg. change colors on hover/active state) Example see here: http://jsfiddle.net/Lszz5392/1/ http://jsfiddle.net/Lszz5392/1/ The nicest part about this is that I can use Adobe Illustrator (or any other vector editor) to create the graphics, and then paste them straight into HTML. [1]: http://caniuse.com/#feat=svg-html5 http://caniuse.com/#feat=svg-html5
- vbezhenar 12y agoIt might sound weird but I actually like to draw simple SVG images using text editor. SVG is well suited for that, it's readable and compact.
- jakobegger 12y agoYes, I've done that too. What's even nicer is that you can write scripts that generate SVG. Drawing symmetric things like a gear can be very cumbersome in a vector editor, but it's really nice if you draw it with a script. (And I was finally able to make use of all the math & geometry I learned in school)
- ravitation 12y agoThese look amazing! Keep up the awesome work! I love CSS icons.
- michaelbuddy 12y agoI'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.
- impish19 12y agoThis is very cool
- readme 12y agoLooks great but the first thing we see when we load the page is a couple lines of instruction and an icon which is not obvious/ just looks like a square and it's confusing. If you want more people to use it, take the section that has the picture of ALL the icons, and move it to the top of the landing page. Just put some text like "LittleBox something about these icons people will like" in big letters. I almost left the page. I am glad I scrolled down because I really like them, and I can use the flags in one of my projects.
- readme 12y agoLooks great but the first thing we see when we load the page is a couple lines of instruction and an icon which is not obvious/ just looks like a square and it's confusing. If you want more people to use it, take the section that has the picture of ALL the icons, and move it to the top of the landing page. Just put some text like "LittleBox something about these icons people will like" in big letters. I almost left the page. I am glad I scrolled down because I really like them, and I can use the flags in one of my projects.
- bg0 12y agoThis is awesome! If there wasn't a compatibility issue, i'd use this immediately.
- chdir 12y agoNice work. I'll add 2 more to the mix (bookmarked these while searching for pure CSS icons recently). To answer the title, yes I'd definitely use one of these http://nicolasgallagher.com/pure-css-gui-icons/demo/ http://nicolasgallagher.com/pure-css-gui-icons/demo/ http://saeedalipoor.github.io/icono/ http://saeedalipoor.github.io/icono/
- skynetv2 12y agonice. lot of work!
- namelezz 12y agoCan you make a bat signal icon with animation?
- jbverschoor 12y agoLove it. Also removed bloat bc you can easily kick out icons you're not using.
- quakenul 12y agoThe flag icons are super nice. As for the "littlebox icon set", from my standpoint (mostly designer) no. In an icon set I am looking for a) feel and b) perfect balance between each icon so everything feels connected. That in itself is super hard to get right, even when not limiting yourself to CSS to do it. While this is an impressive feat it doesn't get there for me on either front, compared to what's available out there. So unless there was a very specific reason not to resort to an actual font and/or graphics, I wouldn't consider this one.
- henpa 12y agoBrazil's flag looks really weird. I would say it's unusable...
- mathgeek 12y agoFirst off, I think this is an awesome portfolio project. As far as being worth continuing, I would say it's worth maintaining but not adding to (beyond compatibility) moving forward. It's a great example of what you're capable of, and maybe some might even use it seriously, but I know I'd start worrying about every little "wish they had/did this" comment that came my way. That leads to burnout.
- j29h 12y agoNice work. But your german and french flags have the wrong order of colors.
- akldjlafkjalfk 12y agoI like the flags, but wanted to the colour of some flags issue too.
- jbhatab 12y agoI'm going to be completely honest as a UI/UX developer. I already feel completely overwhelmed with viable and awesome options. If you aren't heavily using this, at least make sure it isn't interfering with your life. This has nothing to do with what you've done, just how I feel about more icon libraries in general.
- butifanu 12y agoGreat work! Definitely worth continuing.
- maxxxcohen 12y agoThese so called icons are not even images. What's the point if you cant save them do your hard disk ????
- wazoox 12y agoNice. A comment on the flags: I find the green of Italy indistinguishable from the blue on other flags, maybe make it lighter or something? And France is inverted: it's blue, white, red and not the other way around.
- sejje 12y agoI do not find the green of Italy indistinguishable from the blues. Maybe you should take a color-blind test (seriously, not being a jackass).
- pennyallan 12y agoIt's a neat trick to be able to do this using only css, but SVG is really the more suitable technology fort his type of graphic.