TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Show HN: lit – a 549 byte responsive CSS microframework

30 pointsby ajusaover 7 years ago

5 comments

ajusaover 7 years ago
Okay, I already know that most people about to comment on this post will complain about &quot;yet another css framework&quot;, &quot;not again&quot;, and &quot;isn&#x27;t this just Skeleton?&quot;.<p>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.<p>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.<p>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.<p>I would love for people to join me and help out, because I am running out of ideas to make the source smaller.
评论 #16062609 未加载
ajusaover 7 years ago
I got it to 496 bytes, through a lot of optimization for the deflate algorithm. I also lumped together a few more rules.<p>SUB 500 BYTES WOOO<p>(I would have edited my previous comment, but HN closes comment editing after a while
kup0over 7 years ago
Some of the examples on the page don&#x27;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.<p>Tried in IE11 (not that one should expect anything to work there, haha) and it looks even more odd (no orange coloring, etc)
评论 #16071549 未加载
评论 #16071518 未加载
notamemeover 7 years ago
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.<p>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&#x27;t have to remember how to spell, and that makes the file size much smaller.
ajusaover 7 years ago
It&#x27;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.