By Craig Buckler

What can YOU do with 1 Kilobyte of CSS?

By 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 but, to my knowledge, there’s never been a CSS challenge.

The rules are simple:

  1. You must style the HTML5 page at
  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 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…

  • Nice selection.

    A few ignore the mobile world though, like Bbubbles does.

  • If the imposed conditions surfaces smart design ideas, overall most of them have usability issues.

    With a few notable exceptions, the visited link part is mostly ignored, which is pretty bad from where I stand.

    The hover event is overused and the unfolding of hidden lists/elements has no smooth transition to it.

    • … does it depend on which browser you are using ?? – Looks good on Windows FireFox

  • Hi Craig, Thanks for sharing this, I really enjoyed the viewing the creations on that site. With my css files usually eating up around 10-12kb, Its great to see people pushing the boundary’s on what can be achieved with such a small amount of code. Thanks again Craig,


  • AWESOME !!! – Just like Zen Garden this is inspiring and a showcase of what can be done. Well done to the contributors. I always lag behind due to time contraints as a freelancer. Although I did get 3 designs onto the Zen Garden later … taught me loads then – I hope this does the same… Brilliant and thanks.

  • amazing designs, I have never ever seen such a beautiful design using CSS. Thanks for posting these on the internet. Surely this has forced me to bookmark your site.

Get the latest in Front-end, once a week, for free.