Hacker News Reader

Comment by ocdtrekkie | Hacker News Reader

I admit I clicked this thinking it was going to be another post explaining all the reasons why hamburgers are bad/non-ideal UI patterns.

The animations are kind of cool, but I don't feel like the cost is worth it. This is 26 KB your site does NOT need. Though I suppose you can reduce that substantially by only including the specific hamburger animation you want to use in your site, and deleting the rest.

View on HN

I was initially going to disagree with you, but in many ways you are correct. You are probably only going to use one hamburger for your site, so why download all of them. Would be nice to see the css split out into the different hamburger types, and then just select the one you want to use, rather than loading all the css which does not get used. Maybe that brings it down to the 2-4kb range.

Gzipped the entire CSS file hamburgers.min.css is 3KB.

However, still no excuse. Which is why I also included the source, which is designed to be modular so you don’t have to include the whole library. The CSS is compiled via Sass and each type is its own partial that can simply be commented out. When compiled with only one of the larger types, that trims the CSS down to 1KB.

I also purposely have each type commented in the expanded CSS hamburgers.css so one can easily scan and delete the type(s) they don’t need.

I admit I clicked this thinking it was going to be about junk food.

Minimization should certainly help some of that.

The minified file in the repo is 22 KB, to the standard one's 26 KB. It's probably kinda pointless to minify, yet have all of the potential options in the file. Maybe one big file, but individual minified versions?

Is there a sass preprocessor that does tree-shaking for CSS classes? If so, that could trim away the stuff you don't need.

The source of the project is compiled via Sass and each hamburger type is its own partial. Simply comment out the ones you don’t need before you compile, and you’ll only get what you need.

I agree, it seems to me most people would only want to use one or a small selection of these, so it would be much more useful to have the ability to easily grab a hamburger's code individually.

Reply on news.ycombinator.com