What can YOU do with 1 Kilobyte of CSS?

Craig Buckler

I’ve been moaning about bloated web pages for some time now. Despite my protests, web page weights are rapidly approaching 1MB.

The CSS1K project illustrates what you can do with a single kilobyte of slim-lined stylesheet code. It’s been influenced by galleries such as Zen Garden and JavaScript competitions such as js1k.com but, to my knowledge, there’s never been a CSS challenge.

The rules are simple:

  1. You must style the HTML5 page at css1k.com.
  2. Submissions must be in a single CSS file up to 1,024 bytes in size (minification is permitted).
  3. Vendor prefixes do not count toward the total. You should submit non-prefixed code and css1k.com will add the browser prefixes for you.
  4. External resources such as images, fonts and @imports are forbidden. You can’t use data URIs either — shame!
  5. Cross-browser compatibility is preferable, but you can use graceful degradation if necessary.
  6. Your code must be released under the open source MIT license.

There are a few dozen entries so far. I particularly liked:

  • Skewed — clever, although not a great user experience!
  • Bbubles — great demonstration of CSS transitions
  • Bookshelf — what did you expect?
  • Desktop — Windows XP in 1K!
  • Geocities — ahh, the nostalgia!

There are relatively few impressive examples so this is your chance to show off your ninja-like CSS skills! If you decide to post an entry, please leave your link in the comments below…