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.
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.
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.
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)
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.
11 comments
[ 7.3 ms ] story [ 30.0 ms ] threadThis 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.
Sometime in the future, when brotli has replaced DEFLATE, lit could be further optimized. In general though, the differences would likely be minimal.
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.
SUB 500 BYTES WOOO
(I would have edited my previous comment, but HN closes comment editing after a while
Tried in IE11 (not that one should expect anything to work there, haha) and it looks even more odd (no orange coloring, etc)
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.