
Show HN: lit – a 549 byte responsive CSS microframework - ajusa
https://ajusa.github.io/lit/
======
ajusa
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.

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

~~~
ajusa
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.

------
ajusa
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

------
kup0
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)

~~~
ajusa
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!

~~~
kup0
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.

~~~
ajusa
Thanks!

------
notameme
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.

------
ajusa
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.

