CSS1K: A demonstration of what can be accomplished with only 1k of CSS

CSS isn’t a subject we cover too often here on The Changelog. Most often, we are talking about Sass (drink!), Compass, Stylus, Less or some other blend of “pre-processor” we, fan boys, love to cover. What we need to realize, and not forget, is that all of these solutions regardless of how awesome they are - in the end they ALL produce CSS. That’s what the browsers consume, and in the end that’s what we are writing. This will be the case for the foreseeable future.

There’s Beauty in CSS Design

Back in the day (2003), we as a design community and a community that was facinated with what could be done with CSS alone flocked to Dave Shea’s CSS Zen Garden - it showcased what was possible with CSS-based designs. That helped prove what CSS was capable of in its early days and that lead to an explosion in the use of CSS on the web.

Well, a lot has changed since 2003, and there has been massive advancement of the CSS spec, and today you can do almost anything with only CSS. As CSS use expands, so does the average CSS file size. Large websites often sport CSS files in the 15-25k range - some even bloat all the way up to a megabyte! Whoa.

So what’s CSS1K about?

CSS1K, like CSS Zen Garden, invites you to show that web developers are more inventive than ever, and that limitations can spark creativity. Fork CSS1K at GitHub, craft your own CSS style and send your submission as a pull request. If you don’t have a GitHub account, you can send in your submission via e-mail.

In your CSS file, specify the name of the style, your name and URL (such as your homepage) if you would like them to link to you. Check out the example below - by the way, Columns by Alexander Makarov is one of my favs.

/* CSS1K entry
 * "Columns" by Alexander Makarov (http://rmcreative.ru)

Rules of participation

Submissions must consist of only CSS
Submissions may be up to 1K (1024 bytes) minified
Vendor prefixes are not counted to the total number of bytes – submit your code un-prefixed and they will add necessary prefixes (sounds like a PITA)
Any external resources and images, including data URI’s, @font-face and @import’s, are forbidden
The page does not have to look the same in every browser, but graceful degradation is encouraged
The submitted code is licensed under the MIT License

If you have any questions, reach out to Jacob on Twitter at @CSS1K.

Good luck and happy styling.

[Project on GitHub] [Homepage]