Show HN: lit – a 549 byte responsive CSS microframework | Hacker News Reader

Show HN: lit – a 549 byte responsive CSS microframework

ajusa.github.io

30 pointsajusa10 comments

Okay, I already know that most people about to comment on this post will complain about "yet another css framework", "not again", and "isn't this just Skeleton?".

This was originally based off of Skeleton, with the intent being how small I could get the source. I looked online for CSS code golf, but I was unable to find any article, or even examples. The only thing I was able to find was CSS shorthand.

This is my code golf experiment. My goal is sub 500 bytes, anything lower probably will not be possible (then again, I said that about sub 700 bytes). My rules are pretty much full feature parity with Skeleton, and looking similar to the way lit looks right now.

The main way I was able to make lit this small was by optimizing for the gzip algorithm. I learned a ton by doing that, including some counter intuitive things when compressing files.

I would love for people to join me and help out, because I am running out of ideas to make the source smaller.

Would optimising for brotli and/or a custom gzip encoder result in improvements?

That is an interesting question. It should result in pretty significant improvement, however lit would lose practicality. Optimizing for normal DEFLATE/gzip makes lit more practical, since brotli doesn't have widespread use.

Sometime in the future, when brotli has replaced DEFLATE, lit could be further optimized. In general though, the differences would likely be minimal.

I got it to 496 bytes, through a lot of optimization for the deflate algorithm. I also lumped together a few more rules.

SUB 500 BYTES WOOO

(I would have edited my previous comment, but HN closes comment editing after a while

Some of the examples on the page don't seem to be working right (in FF 52.2.0 ESR, work machine). For instance, all of the h1, h2, etc headings appear the same size for me.

Tried in IE11 (not that one should expect anything to work there, haha) and it looks even more odd (no orange coloring, etc)

Oops, looks like I linked to the source stylesheet (in CSSNext) instead of the built, CSS3 version. I just fixed it, thanks for letting me know!

Yep! Makes sense. For the sake of completion, just tested it and all is well.

I can see myself using this framework. I've used min/skeleton/others before, so it's nice that this has parity (or close) to those frameworks while using less space.

Thanks!

This is pretty similar to what exists (yes I know you know that), but the source is pretty interesting. You used unicode to escape numbers in your class name.

One of the things that always irritated me about Skeleton was having to type out the number in English. You killed two birds with one stone: I don't have to remember how to spell, and that makes the file size much smaller.

It's actually 506 bytes right now, I was able to shave off a bit by removing default styles for inputs and making it a class. I also did a few more things, outlined in my commit history.

Reply on news.ycombinator.com