What can YOU do with 1 Kilobyte of CSS?

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…

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.itmitica.com/en/ itmitică

    Nice selection.

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

  • http://www.itmitica.com/en/ itmitică

    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.

    • http://www.digitalidiom.co.uk Derek UK web Designer

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

  • http://www.crearedesign.co.uk/ James Willis

    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,

    James

  • http://www.digitalidiom.co.uk Derek UK web Designer

    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.

  • http://www.rsatechnologies.in rakesh kumar

    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.

  • Luke

    You do understand the fundamental difference between PHP and CSS, right?

  • Dennis

    That was a spam-bot message. They fill out any form they can find which lets them add a URL.

  • http://www.onsman.com Ricky Onsman

    You’re right, Dennis. Luke, that one got through but the comment has now been removed.