16 ms·

CSS Zen Garden

462 points by eniz 7y ago

greggturkington 7y ago
Why is this the top post of the front page? Is there a front-end dev that didn't see this when they were 15? Sure it's a nice demonstration of CSS but...
- kodt 7y ago
  People who were older than 15 when it launched?
- jonfw 7y ago
  Many of us are either young, not front end devs, or both!
- dsego 7y ago
  This gets posted every few months and the HN crowd loves it. Somehow all the technical geniuses here are still mesmerized by CSS from 20 years ago. Learning all the nuances of the Rust borrow checker doesn't leave any room for much else, except for HTML tables, that stuff got embedded too deep. Set a reminder, it's an easy way to reap the sweet karma.
  - greggturkington 7y ago
    Well said. I just wish the Zen Garden would put a big banner at the top that says "the cascade turned out to be a terrible idea, now all CSS is JS, and it's scoped to the component using exclusively single-class-selectors with non-deterministic names." I see quaint selectors like `#main aside .wrapper .design-selection` and just hope jr devs aren't trying to emulate them.
- saagarjha 7y ago
  According to Wikipedia, when this launched I was about four years old. It’s new to me!
- suprfsat 7y ago
  Ugh I can't believe not everybody was born in 1988 and learning CSS at age 15
- Tade0 7y ago
  At the age of fifteen I didn't yet even have an internet connection.
- carapace 7y ago
  https://www.xkcd.com/1053/ https://www.xkcd.com/1053/ > I try not to make fun of people for admitting they don't know things. Because for each thing "everyone knows" by the time they're adults, every day there are, on average, 10,000 people in the US hearing about it for the first time. Fraction who have heard of it at birth = 0% Fraction who have heard of it by 30 ~= 100% US birth rate ~= 4,000,000 year Number hearing about it for the first time ~= 10,000 day If I make fun of people, I train them not to tell me when they have those moments. And I miss out on the fun. Person #1, about to have a messy fun time: "Diet coke and mentos thing"? What's that? Person #2, in a delightfully pro-knowledge mood: Oh man! come on, we're going to the grocery store. Person #1: Why? Person #2: You're one of today's lucky 10,000. {{Title text: Saying 'what kind of an idiot doesn't know about the Yellowstone supervolcano' is so much more boring than telling someone about the Yellowstone supervolcano for the first time.}}
  - greggturkington 7y ago
    I'd have known what xkcd it is, no pasting necessary. It doesn't apply every time someone calls something old. I'm not making fun of anyone. The other leading HN headlines are: * GitHub shuts off access to Aurelia repository * NASA to launch 247 petabytes of data into AWS * Covid-19 Interactive Model plus we get the old CSS site from 2003...
crad 7y ago
I recently brought this up with my team. As an "old-school" web developer, I buy in to the whole CSS as design thing, while the front-end engineers @ work switched to using styled react components. As we look to make substantive design changes, now we have multiple places to make the CSS changes, only now it's the SASS project and all of the React components / projects. I must be missing something about how hip and cool styled components are, but they'll never be as cool as the CSS Zen Garden :)
- earthboundkid 7y ago
  I think different parts of the page need to be treated differently. In a typical webpage, you'll have lots of "chrome" (menubars, sidebars, footers, logos, etc.) and "content well" of some sort. For the content well, the content is probably going to come in through some sort of CMS with Rich Text Editor that can handle bold, italics, links, headers, blockquotes, etc. by outputting plain HTML. The content well should be designed to work without classes on the items. It should be able to take the <a href> and <em> tags and make it look correct. The tags themselves have a semantic meaning, and you can imagine this same content surviving through multiple redesigns of the site. But for the chrome HTML, the tags are only there as part of the current design. When you redesign the site, there's no reason to expect the same tags to be used. It may or may not be possible depending on the goals of the redesign, but either way, it's not a goal, the way that reusing the content well HTML is. I think this is what leads to the disconnect. If you're new school web dev making CSS-in-JS components or whatever, you're expecting your components to be thrown out when a new design comes along in five years. If you're designing the content well, you expect the HTML to live essentially forever or at least as long as the business.
  - pacifika 7y ago
    Well said
- exclipy 7y ago
  I also started coding when CSS Zen Garden was the best thing ever but sorry, CSS in JS is better. With classes and a separate stylesheets, there are no statically analyzable connections between them. You typo a class name? Too bad. You're no longer using that class anywhere? No compiler will tell you it's dead code. You want to increase the padding in this one place? There's no way to be confident what else it will affect. And all the "benefits" that stylesheets tout are also offered by components. No one is adding <font> tags on all on all of their headings. With components, you just set the font once on the heading component.
piinbinary 7y ago
Seeing this page brings back memories: http://www.csszengarden.com/001/ http://www.csszengarden.com/001/ I'm happy that this is still online.
ralusek 7y ago
I always thought this was funny. This was the embodiment of the original CSS philosophy, which was to "label your html elements semantically with what they ARE, and then worry about styling those in the CSS." The whole point was to get anything style related out of the HTML altogether, the HTML would just be semantic/content related. But then Bootstrap and other CSS libraries came out, and completely inverted the philosophy back to what HTML originally looked like pre-CSS, which is that you had all of these rules you could place directly in the HTML that would directly control how the element was styled. In CSS Zen era you could look at my HTML and have no idea how I intended it to LOOK, whereas in the Bootstrap era you would look at my HTML and see "row" and "col-sm-3" and know exactly what I was going for visually. Now people just make components and will maybe use style variables/tokens. Just funny how things change.
- arkh 7y ago
  And now we're back to table-based design and flash-like but less powerful javascript based application.
- jakearmitage 7y ago
  http://smacss.com http://smacss.com tried to push this, but failed
  - hinkley 7y ago
    Can’t remember which, but there was someone who made a CSS library that patterned like a fluent interface. They had lots of selectors that were adjectives, and most of them composed. So you could have a class=“tiny button” or whatnot.
    - mpranjic 7y ago
      Perhaps Semantic UI?
      - hinkley 7y ago
        YES. That's the one. Thanks.
purmac 7y ago
I enjoyed browsing CSS Zen Garden and read Eric Meyer's CSS articles when I was still in school 15 years ago. Time flies and so as Front-end stack.
andre-lima 7y ago
I truly believe this is still the way to go if you want to have any hopes of keeping your HTML/CSS maintainable and easily customizable.
austincheney 7y ago
http://mailmarkup.org/zen/ http://mailmarkup.org/zen/ This is my Zen Garden attempt. According to the HTTP headers it is from 20 October 2008. You can see how font rendering has changed over the years. When I wrote this all columns were the same height and alignment cross browser.
- bendotero 7y ago
  It looks great. Nice job. I miss the web from this era. Sites looked so much more unique. People posted to their own sites and syndicated content. Feed readers were useful. Sigh.
hackbinary 7y ago
From Dave's current site: http://daveshea.com/projects/zen/ http://daveshea.com/projects/zen/
mythz 7y ago
CSS Zen Garden was a treasure back in the day, one of the most inspirational CSS sites showing the power and flexibility that can be achieved with CSS over semantic HTML. I still remember the original design from Dave Shea fondly: http://www.csszengarden.com/001/ http://www.csszengarden.com/001/
- sbergot 7y ago
  I used to love it but know I can't help to notice that there is no max width and the font is way too small.
- klenwell 7y ago
  One of my quixotic personal projects was reproducing this design for my Myspace profile. Ha, I found the blog I was keeping: http://myspacecivilized.blogspot.com/2006/09/css-moshi-garden.html http://myspacecivilized.blogspot.com/2006/09/css-moshi-garde... It includes a small screenshot.
- jklinger410 7y ago
  Yes! This brings back memories! This site inspired me to learn CSS. I was doing free Xanga themes in high school, lol.
dullroar 7y ago
Still love the retro theater design - so fun: http://www.csszengarden.com/202/ http://www.csszengarden.com/202/
m23khan 7y ago
Hehe, I remember impressing my Web Development Professor 11-12 years ago by using CSS designs based off this website. I am still impressed by the beauty of some of the designs.
TekMol 7y ago
Would be nice if the designs would display the date when they were created. Digging around in the source code and on the sites of the designers, it seems they have stopped adding entries around 2013. I wonder why.
adamwathan 7y ago
This approach is extremely seductive because on the surface it sounds so "pure" and "clean" but the reality is that on large projects it leads to some of the most horrific, hard to maintain CSS you'll ever see, no matter how hard you try to keep things in good shape. CSS is just inherently more difficult to maintain than HTML, and choosing a workflow that encourages editing CSS instead of HTML just makes things harder and harder over time. Choosing an approach where CSS is treated like a third-party dependency that is _consumed_ by your HTML ends up being much more practical, maintainable, and scalable because editing and maintaining HTML is _easy_ — every time you change a class on an HTML element your changes are local and predictable. Always thought this article by Nicolas Gallagher did the best job arguing this point: http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ http://nicolasgallagher.com/about-html-semantics-front-end-a...
- wtetzner 7y ago
  I think the approach can work really well for web pages that are meant to be documents, but no so well for web applications.
- embit 7y ago
  Agreed. I was a big proponent of the csszengarden way of developing sites. Then during the development of my latest site [0], I decided to use bootstrap for styling. And now I am really liking it. Makes things much easier, at least for me. [0] https://embit.ca https://embit.ca
- andre-lima 7y ago
  But can you do what CSS Zen Garden does only by changing HTML? If you can't, it means you failed at separating concerns. Additionally, applications that you need to customize/theme usually makes it hard for us to edit the HTML. The only option is to edit the CSS. In this case, you whole argument breaks down. p.s.: In your case, I believe Tailwind should be pushing more for the use of @apply, instead of making those god-awful markups :(
  - adamwathan 7y ago
wiremine 7y ago
Wow, what a blast from the past!! This was a great source of inspiration back in the day. If you're not familiar with the project, I suggest checking out the Wikipedia article: https://en.wikipedia.org/wiki/CSS_Zen_Garden https://en.wikipedia.org/wiki/CSS_Zen_Garden
theandrewbailey 7y ago
I wrote my blog's HTML[0] semantically, and I'm glad I did. I have a different style when someone fires up a new instance. I was already going for a retro "vaporwave" aesthetic there, and that recent Windows 93 post[2] pushed me over the edge. I apply those styles to my main site as an Easter egg when you view it in the Japanese locale.[1] [0] https://theandrewbailey.com/ https://theandrewbailey.com/ [1] https://theandrewbailey.com/?lang=ja https://theandrewbailey.com/?lang=ja [2] https://news.ycombinator.com/item?id=22463415 https://news.ycombinator.com/item?id=22463415
- saagarjha 7y ago
  Semantic HTML also happens to work quite well on even the most anemic browsers! I am somewhat proud that a non-HTTPS version of my website (which is designed for modern browsers) is navigable and fairly usable on the original WorldWideWeb, aside from some of the <head> content poking through.
GavinAnderegg 7y ago
I remember this blowing my <table>-addled brain in 2003. This site was what convinced me to really dig into CSS, and not just use a few inline styles as hacks. This also opened my mind to JavaScript at the same time (as I looked into "DHTML"). It was a pretty different web back then!
- martin-adams 7y ago
  This is the same for me. When you came from a table based design approach, it was hard to know how powerful CSS was. This was to prove that an help developers overcome their fear. I loved this site!
- schoen 7y ago
  I'm amused at how I glanced at your comment and my mind sort of yelled "hey, that opening tag never gets closed! that's going to invalidate everyone else's comments below by making them part of that element!". Maybe I'll say </table> here just in case. :-)
djsumdog 7y ago
I use to own this physical book!!! .. years and years ago (I think around 2008 or 2009). I cite it as my inspiration for a lot of my early designs: https://battlepenguin.com/tech/a-history-of-personal-and-professional-websites/ https://battlepenguin.com/tech/a-history-of-personal-and-pro... It might seem dated, but the ideas of using images and flowing layout shaped that era, and the simplicity can still be applied today (although we can make it look a lot better and cleaner thanks to CSS grid, flexboxes and other new tech that's now available in most browsers). There's a lot of good nostalgia here if you go through their older designs.
maverick74 7y ago
aaaahhh good old and amazing CSS Zen Garden!!!
resters 7y ago
A story like this being at the top of HN is how we know covid-19 is serious.
omegote 7y ago
I cannot believe it's been 15 years, literally half my life, since I got my design accepted at CSSZenGarden: http://www.csszengarden.com/185/ http://www.csszengarden.com/185/ Incredible, I had never thought of how long it's been...
- mikeg8 7y ago
  I remember seeing your design back around 2009 when I was taking my first web “publishing” courses! What a trip down memory lane
- greencore 7y ago
  It funny that colored scrollbars work again and in Firefox :)
RyanOD 7y ago
Dave Shea (CSS Zen Garden), Eric Meyer, Jeffrey Zeldman (A List Apart), Jeremy Keith (DOM Scripting), and others who escape me provided the foundation for the CS classes I taught 15 years ago. Thanks guys!
TiredGuy 7y ago
Separation of html and css can still be a useful paradigm and does not have to be incompatible with separating your code into components. For medium-sized projects, I have found it useful to have general (or "base" and "cosmetic" a la MCSS) styling in a central place with all my variables. For my components, I strive to balance the "structure-" and "container-" -like (similar to OOCS) styling they need while not trying to make them so general that they are over-engineered. To that end, I am comfortable enough using the central variables within my components and even some central classes, recognizing that when I do want to re-use my components across projects there is occasionally ad-hoc refactoring/customization. Also, Css in JS is only one way of building components. You can keep your component-specific css separate from the rest without using JS.
talkingtab 7y ago
My immediate response, as someone who does not know css that well and is trying to learn, is to open developer tools, choose responsive design mode and then iPhone 6. Only looking at the top four, none of these are that great. Where is a way to navigate? They don't seem to be using vw which I expected. Are there good examples that work well with responsive, provide navigation and don't use horizontal scrolling.
- randomdude402 7y ago
  The site predates smartphones by maybe five years. Mobile friendly wasn't a thing yet.
Tade0 7y ago
All those who repainted their pages in dark mode should take lessons from "Steel". Not all fonts are readable when displayed white-on-black, and some seem to forget about that. Also this is something that's being slowly undone by ideas like Styled Components and Tailwind. My take is that those two are a step back.
uk_programmer 7y ago
I really like CSS Zen Garden and it had a profound impact of how I think about front-end work. I see a lot of back-end developers trying to force the markup and their styling to conform to what they want. If you understand how the document flows, separate your CSS from your markup, write clean and valid markup and keep everything as minimal as possible. There is really a "zen" like element to it which I think is kinda lost today. However when it comes to code I am a minimalist and tend to do as much as possible with Vanilla JS.
dang 7y ago
Related from 2013: https://news.ycombinator.com/item?id=6076163 https://news.ycombinator.com/item?id=6076163 https://news.ycombinator.com/item?id=5669601 https://news.ycombinator.com/item?id=5669601 A bit from 2009: https://news.ycombinator.com/item?id=811468 https://news.ycombinator.com/item?id=811468
antirez 7y ago
Good memories from 10 years ago (the site looks practically unchanged since then). Incredibly how the frontend nonsense of recent years allowed us to go backward. Same result but slower and more complex without any good reason.
cromulent 7y ago
Ah so many memories. This was my favorite: http://www.csszengarden.com/099/ http://www.csszengarden.com/099/ Dave Shea mentioned that it was no longer relevant back in 2013. https://www.awwwards.com/why-the-web-doesn-t-need-another-css-zen-garden.html https://www.awwwards.com/why-the-web-doesn-t-need-another-cs...
- teddyh 7y ago
  “This video is unavailable.”
cousin_it 7y ago
Encoding page layout in text is a bad idea, and CSS is a bad implementation of that idea. What could be better, you ask? Open up Google Slides. You can make a slide that looks the way you want it. The learning curve is nonexistent. Then you can share it online and it will look okay to anyone on any size screen. There's no reason why building websites should be a hundred times harder than that.
- bmn__ 7y ago
  This does not come close to the Web's design goals.
swyx 7y ago
oh nice to see this on the web again! i recently remade this with modern web technologies - Svelte, Monaco, and serverless functions to pull things from GitHub Gists: https://github.com/sw-yx/svelte-zen-garden https://github.com/sw-yx/svelte-zen-garden
ChrisMarshallNY 7y ago
I've always enjoyed this site. I see that they post updates here fairly regularly.
120photo 7y ago
I love this site and visit from time to time. It reminds me of a time when you thought of web design as art. Now it feels like playing with building blocks.
dbtc 7y ago
The zenist of css designs for this web page is: body { max-width: 800px; } Done. Now go do nothing.
fiatjaf 7y ago
Some time ago I made https://github.com/fiatjaf/classless https://github.com/fiatjaf/classless, a framework for making themes for simple websites (like blogs) using the same basic HTML structure. The idea is: you write HTML that conforms to the structure, then you can reuse any of the themes by just including a CSS file (and sometimes a JS file) in your <head>. Turns out I wasn't the best person indicated to push this, as my design skills weren't marvelous, but I still think it was a good idea. There are 17 themes available, mostly ported from other places. A playground where you can see the themes (and test your own, if you are feeling like building one) is available at https://classless.alhur.es/ https://classless.alhur.es/
coreyp_1 7y ago
Honestly, these designs are so refreshing. There is no place for ads. No popups asking to subscribe to their newsletter. No breaking because I have Javascript disabled. Looking through some of the designs made me happy... and a bit nostalgic. :)
olivermarks 7y ago
this era broke me as a web designer. Dom walking etc. i need to get back into current trends so this discussion is useful.
gijoeyguerra 7y ago
Cool. XML, by way of HTML was always designed to be layered. As in, a layer for a different use case. At the lowest layer, is the data. Each layer used to decorate the layer below it enables using it for different use cases. CSS is just another decoration to create another layer used for another use case (styling the data for the rendering in a browser use case). While keeping the underlying data still usable for a totally different use case. CSS Zen Garden is such a fantastic showcase of that layering architecture of HTML. Regarding Javascript applications, I consider it just another case where we're using the design of the web for something it's inventors could never foresee. Well, they did foresee "apps", but I'm just not sure React, Angular, Ember, etc. apps was what they were imagining.
subless 7y ago
I see a lot of people bickering here in the comments about what's better and why, but does it really matter? I mean I don't care if you like to wear rain boots when it's sunny or flip flops when it's raining, as long as you have some footwear on. There's many ways a webpage could be programmed/designed/developed/styled but the only thing that really matters is that it's usable and visible to the end-user. No programmer likes every other programmers code when they have to work with it and we all know there's ten different ways to solve the same problem so just let people do it the way they know how as long as you can use/view it with no major issues who cares.
edem 7y ago
I love this site. I used this site back then to learn all about HTML and CSS and the fact that it still works with those age-old designs is a testament to the original CSS philosophy.
basseq 7y ago
I was a huge fan of the CSS Zen Garden, and was so excited to have my submission accepted back in 2006 (#106!) when I was first starting out. Generally, it was a great demonstration of CSS at a time when CSS was rather novel, and the "separation of content and presentation" sticks with me today, and forms a good foundation for things like built-once responsive web design. For me personally, I met a lot of interesting people through CSSZG, including Bill Zeller (RIP[1]) and others. [1] https://news.ycombinator.com/item?id=2074109 https://news.ycombinator.com/item?id=2074109

462 points by eniz 7y ago

Why is this the top post of the front page? Is there a front-end dev that didn't see this when they were 15? Sure it's a nice demonstration of CSS but...

kodt 7y ago
People who were older than 15 when it launched?
jonfw 7y ago
Many of us are either young, not front end devs, or both!
dsego 7y ago
This gets posted every few months and the HN crowd loves it. Somehow all the technical geniuses here are still mesmerized by CSS from 20 years ago. Learning all the nuances of the Rust borrow checker doesn't leave any room for much else, except for HTML tables, that stuff got embedded too deep. Set a reminder, it's an easy way to reap the sweet karma.
- greggturkington 7y ago
  Well said. I just wish the Zen Garden would put a big banner at the top that says "the cascade turned out to be a terrible idea, now all CSS is JS, and it's scoped to the component using exclusively single-class-selectors with non-deterministic names." I see quaint selectors like `#main aside .wrapper .design-selection` and just hope jr devs aren't trying to emulate them.
saagarjha 7y ago
According to Wikipedia, when this launched I was about four years old. It’s new to me!
suprfsat 7y ago
Ugh I can't believe not everybody was born in 1988 and learning CSS at age 15
Tade0 7y ago
At the age of fifteen I didn't yet even have an internet connection.
carapace 7y ago
https://www.xkcd.com/1053/ https://www.xkcd.com/1053/ > I try not to make fun of people for admitting they don't know things. Because for each thing "everyone knows" by the time they're adults, every day there are, on average, 10,000 people in the US hearing about it for the first time. Fraction who have heard of it at birth = 0% Fraction who have heard of it by 30 ~= 100% US birth rate ~= 4,000,000 year Number hearing about it for the first time ~= 10,000 day If I make fun of people, I train them not to tell me when they have those moments. And I miss out on the fun. Person #1, about to have a messy fun time: "Diet coke and mentos thing"? What's that? Person #2, in a delightfully pro-knowledge mood: Oh man! come on, we're going to the grocery store. Person #1: Why? Person #2: You're one of today's lucky 10,000. {{Title text: Saying 'what kind of an idiot doesn't know about the Yellowstone supervolcano' is so much more boring than telling someone about the Yellowstone supervolcano for the first time.}}
- greggturkington 7y ago
  I'd have known what xkcd it is, no pasting necessary. It doesn't apply every time someone calls something old. I'm not making fun of anyone. The other leading HN headlines are: * GitHub shuts off access to Aurelia repository * NASA to launch 247 petabytes of data into AWS * Covid-19 Interactive Model plus we get the old CSS site from 2003...

crad 7y ago

I recently brought this up with my team. As an "old-school" web developer, I buy in to the whole CSS as design thing, while the front-end engineers @ work switched to using styled react components. As we look to make substantive design changes, now we have multiple places to make the CSS changes, only now it's the SASS project and all of the React components / projects. I must be missing something about how hip and cool styled components are, but they'll never be as cool as the CSS Zen Garden :)

earthboundkid 7y ago
I think different parts of the page need to be treated differently. In a typical webpage, you'll have lots of "chrome" (menubars, sidebars, footers, logos, etc.) and "content well" of some sort. For the content well, the content is probably going to come in through some sort of CMS with Rich Text Editor that can handle bold, italics, links, headers, blockquotes, etc. by outputting plain HTML. The content well should be designed to work without classes on the items. It should be able to take the <a href> and <em> tags and make it look correct. The tags themselves have a semantic meaning, and you can imagine this same content surviving through multiple redesigns of the site. But for the chrome HTML, the tags are only there as part of the current design. When you redesign the site, there's no reason to expect the same tags to be used. It may or may not be possible depending on the goals of the redesign, but either way, it's not a goal, the way that reusing the content well HTML is. I think this is what leads to the disconnect. If you're new school web dev making CSS-in-JS components or whatever, you're expecting your components to be thrown out when a new design comes along in five years. If you're designing the content well, you expect the HTML to live essentially forever or at least as long as the business.
- pacifika 7y ago
  Well said
exclipy 7y ago
I also started coding when CSS Zen Garden was the best thing ever but sorry, CSS in JS is better. With classes and a separate stylesheets, there are no statically analyzable connections between them. You typo a class name? Too bad. You're no longer using that class anywhere? No compiler will tell you it's dead code. You want to increase the padding in this one place? There's no way to be confident what else it will affect. And all the "benefits" that stylesheets tout are also offered by components. No one is adding <font> tags on all on all of their headings. With components, you just set the font once on the heading component.

piinbinary 7y ago

Seeing this page brings back memories: http://www.csszengarden.com/001/ http://www.csszengarden.com/001/ I'm happy that this is still online.

ralusek 7y ago

I always thought this was funny. This was the embodiment of the original CSS philosophy, which was to "label your html elements semantically with what they ARE, and then worry about styling those in the CSS." The whole point was to get anything style related out of the HTML altogether, the HTML would just be semantic/content related. But then Bootstrap and other CSS libraries came out, and completely inverted the philosophy back to what HTML originally looked like pre-CSS, which is that you had all of these rules you could place directly in the HTML that would directly control how the element was styled. In CSS Zen era you could look at my HTML and have no idea how I intended it to LOOK, whereas in the Bootstrap era you would look at my HTML and see "row" and "col-sm-3" and know exactly what I was going for visually. Now people just make components and will maybe use style variables/tokens. Just funny how things change.

arkh 7y ago
And now we're back to table-based design and flash-like but less powerful javascript based application.
jakearmitage 7y ago
http://smacss.com http://smacss.com tried to push this, but failed
- hinkley 7y ago
  Can’t remember which, but there was someone who made a CSS library that patterned like a fluent interface. They had lots of selectors that were adjectives, and most of them composed. So you could have a class=“tiny button” or whatnot.
  - mpranjic 7y ago
    Perhaps Semantic UI?
    - hinkley 7y ago
      YES. That's the one. Thanks.

purmac 7y ago

I enjoyed browsing CSS Zen Garden and read Eric Meyer's CSS articles when I was still in school 15 years ago. Time flies and so as Front-end stack.

andre-lima 7y ago

I truly believe this is still the way to go if you want to have any hopes of keeping your HTML/CSS maintainable and easily customizable.

austincheney 7y ago

http://mailmarkup.org/zen/ http://mailmarkup.org/zen/ This is my Zen Garden attempt. According to the HTTP headers it is from 20 October 2008. You can see how font rendering has changed over the years. When I wrote this all columns were the same height and alignment cross browser.

bendotero 7y ago
It looks great. Nice job. I miss the web from this era. Sites looked so much more unique. People posted to their own sites and syndicated content. Feed readers were useful. Sigh.

hackbinary 7y ago

From Dave's current site: http://daveshea.com/projects/zen/ http://daveshea.com/projects/zen/

mythz 7y ago

CSS Zen Garden was a treasure back in the day, one of the most inspirational CSS sites showing the power and flexibility that can be achieved with CSS over semantic HTML. I still remember the original design from Dave Shea fondly: http://www.csszengarden.com/001/ http://www.csszengarden.com/001/

sbergot 7y ago
I used to love it but know I can't help to notice that there is no max width and the font is way too small.
klenwell 7y ago
One of my quixotic personal projects was reproducing this design for my Myspace profile. Ha, I found the blog I was keeping: http://myspacecivilized.blogspot.com/2006/09/css-moshi-garden.html http://myspacecivilized.blogspot.com/2006/09/css-moshi-garde... It includes a small screenshot.
jklinger410 7y ago
Yes! This brings back memories! This site inspired me to learn CSS. I was doing free Xanga themes in high school, lol.

dullroar 7y ago

Still love the retro theater design - so fun: http://www.csszengarden.com/202/ http://www.csszengarden.com/202/

m23khan 7y ago

Hehe, I remember impressing my Web Development Professor 11-12 years ago by using CSS designs based off this website. I am still impressed by the beauty of some of the designs.

TekMol 7y ago

Would be nice if the designs would display the date when they were created. Digging around in the source code and on the sites of the designers, it seems they have stopped adding entries around 2013. I wonder why.

adamwathan 7y ago

This approach is extremely seductive because on the surface it sounds so "pure" and "clean" but the reality is that on large projects it leads to some of the most horrific, hard to maintain CSS you'll ever see, no matter how hard you try to keep things in good shape. CSS is just inherently more difficult to maintain than HTML, and choosing a workflow that encourages editing CSS instead of HTML just makes things harder and harder over time. Choosing an approach where CSS is treated like a third-party dependency that is _consumed_ by your HTML ends up being much more practical, maintainable, and scalable because editing and maintaining HTML is _easy_ — every time you change a class on an HTML element your changes are local and predictable. Always thought this article by Nicolas Gallagher did the best job arguing this point: http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ http://nicolasgallagher.com/about-html-semantics-front-end-a...

wtetzner 7y ago
I think the approach can work really well for web pages that are meant to be documents, but no so well for web applications.
embit 7y ago
Agreed. I was a big proponent of the csszengarden way of developing sites. Then during the development of my latest site [0], I decided to use bootstrap for styling. And now I am really liking it. Makes things much easier, at least for me. [0] https://embit.ca https://embit.ca
andre-lima 7y ago
But can you do what CSS Zen Garden does only by changing HTML? If you can't, it means you failed at separating concerns. Additionally, applications that you need to customize/theme usually makes it hard for us to edit the HTML. The only option is to edit the CSS. In this case, you whole argument breaks down. p.s.: In your case, I believe Tailwind should be pushing more for the use of @apply, instead of making those god-awful markups :(
- adamwathan 7y ago

wiremine 7y ago

Wow, what a blast from the past!! This was a great source of inspiration back in the day. If you're not familiar with the project, I suggest checking out the Wikipedia article: https://en.wikipedia.org/wiki/CSS_Zen_Garden https://en.wikipedia.org/wiki/CSS_Zen_Garden

theandrewbailey 7y ago

I wrote my blog's HTML[0] semantically, and I'm glad I did. I have a different style when someone fires up a new instance. I was already going for a retro "vaporwave" aesthetic there, and that recent Windows 93 post[2] pushed me over the edge. I apply those styles to my main site as an Easter egg when you view it in the Japanese locale.[1] [0] https://theandrewbailey.com/ https://theandrewbailey.com/ [1] https://theandrewbailey.com/?lang=ja https://theandrewbailey.com/?lang=ja [2] https://news.ycombinator.com/item?id=22463415 https://news.ycombinator.com/item?id=22463415

saagarjha 7y ago
Semantic HTML also happens to work quite well on even the most anemic browsers! I am somewhat proud that a non-HTTPS version of my website (which is designed for modern browsers) is navigable and fairly usable on the original WorldWideWeb, aside from some of the <head> content poking through.

GavinAnderegg 7y ago

I remember this blowing my <table>-addled brain in 2003. This site was what convinced me to really dig into CSS, and not just use a few inline styles as hacks. This also opened my mind to JavaScript at the same time (as I looked into "DHTML"). It was a pretty different web back then!

martin-adams 7y ago
This is the same for me. When you came from a table based design approach, it was hard to know how powerful CSS was. This was to prove that an help developers overcome their fear. I loved this site!
schoen 7y ago
I'm amused at how I glanced at your comment and my mind sort of yelled "hey, that opening tag never gets closed! that's going to invalidate everyone else's comments below by making them part of that element!". Maybe I'll say </table> here just in case. :-)

djsumdog 7y ago

I use to own this physical book!!! .. years and years ago (I think around 2008 or 2009). I cite it as my inspiration for a lot of my early designs: https://battlepenguin.com/tech/a-history-of-personal-and-professional-websites/ https://battlepenguin.com/tech/a-history-of-personal-and-pro... It might seem dated, but the ideas of using images and flowing layout shaped that era, and the simplicity can still be applied today (although we can make it look a lot better and cleaner thanks to CSS grid, flexboxes and other new tech that's now available in most browsers). There's a lot of good nostalgia here if you go through their older designs.

maverick74 7y ago

aaaahhh good old and amazing CSS Zen Garden!!!

resters 7y ago

A story like this being at the top of HN is how we know covid-19 is serious.

omegote 7y ago

I cannot believe it's been 15 years, literally half my life, since I got my design accepted at CSSZenGarden: http://www.csszengarden.com/185/ http://www.csszengarden.com/185/ Incredible, I had never thought of how long it's been...

mikeg8 7y ago
I remember seeing your design back around 2009 when I was taking my first web “publishing” courses! What a trip down memory lane
greencore 7y ago
It funny that colored scrollbars work again and in Firefox :)

RyanOD 7y ago

Dave Shea (CSS Zen Garden), Eric Meyer, Jeffrey Zeldman (A List Apart), Jeremy Keith (DOM Scripting), and others who escape me provided the foundation for the CS classes I taught 15 years ago. Thanks guys!

TiredGuy 7y ago

Separation of html and css can still be a useful paradigm and does not have to be incompatible with separating your code into components. For medium-sized projects, I have found it useful to have general (or "base" and "cosmetic" a la MCSS) styling in a central place with all my variables. For my components, I strive to balance the "structure-" and "container-" -like (similar to OOCS) styling they need while not trying to make them so general that they are over-engineered. To that end, I am comfortable enough using the central variables within my components and even some central classes, recognizing that when I do want to re-use my components across projects there is occasionally ad-hoc refactoring/customization. Also, Css in JS is only one way of building components. You can keep your component-specific css separate from the rest without using JS.

talkingtab 7y ago

My immediate response, as someone who does not know css that well and is trying to learn, is to open developer tools, choose responsive design mode and then iPhone 6. Only looking at the top four, none of these are that great. Where is a way to navigate? They don't seem to be using vw which I expected. Are there good examples that work well with responsive, provide navigation and don't use horizontal scrolling.

randomdude402 7y ago
The site predates smartphones by maybe five years. Mobile friendly wasn't a thing yet.

Tade0 7y ago

All those who repainted their pages in dark mode should take lessons from "Steel". Not all fonts are readable when displayed white-on-black, and some seem to forget about that. Also this is something that's being slowly undone by ideas like Styled Components and Tailwind. My take is that those two are a step back.

uk_programmer 7y ago

I really like CSS Zen Garden and it had a profound impact of how I think about front-end work. I see a lot of back-end developers trying to force the markup and their styling to conform to what they want. If you understand how the document flows, separate your CSS from your markup, write clean and valid markup and keep everything as minimal as possible. There is really a "zen" like element to it which I think is kinda lost today. However when it comes to code I am a minimalist and tend to do as much as possible with Vanilla JS.

dang 7y ago

Related from 2013: https://news.ycombinator.com/item?id=6076163 https://news.ycombinator.com/item?id=6076163 https://news.ycombinator.com/item?id=5669601 https://news.ycombinator.com/item?id=5669601 A bit from 2009: https://news.ycombinator.com/item?id=811468 https://news.ycombinator.com/item?id=811468

antirez 7y ago

Good memories from 10 years ago (the site looks practically unchanged since then). Incredibly how the frontend nonsense of recent years allowed us to go backward. Same result but slower and more complex without any good reason.

cromulent 7y ago

Ah so many memories. This was my favorite: http://www.csszengarden.com/099/ http://www.csszengarden.com/099/ Dave Shea mentioned that it was no longer relevant back in 2013. https://www.awwwards.com/why-the-web-doesn-t-need-another-css-zen-garden.html https://www.awwwards.com/why-the-web-doesn-t-need-another-cs...

teddyh 7y ago
“This video is unavailable.”

cousin_it 7y ago

Encoding page layout in text is a bad idea, and CSS is a bad implementation of that idea. What could be better, you ask? Open up Google Slides. You can make a slide that looks the way you want it. The learning curve is nonexistent. Then you can share it online and it will look okay to anyone on any size screen. There's no reason why building websites should be a hundred times harder than that.

bmn__ 7y ago
This does not come close to the Web's design goals.

swyx 7y ago

oh nice to see this on the web again! i recently remade this with modern web technologies - Svelte, Monaco, and serverless functions to pull things from GitHub Gists: https://github.com/sw-yx/svelte-zen-garden https://github.com/sw-yx/svelte-zen-garden

ChrisMarshallNY 7y ago

I've always enjoyed this site. I see that they post updates here fairly regularly.

120photo 7y ago

I love this site and visit from time to time. It reminds me of a time when you thought of web design as art. Now it feels like playing with building blocks.

dbtc 7y ago

The zenist of css designs for this web page is: body { max-width: 800px; } Done. Now go do nothing.

fiatjaf 7y ago

Some time ago I made https://github.com/fiatjaf/classless https://github.com/fiatjaf/classless, a framework for making themes for simple websites (like blogs) using the same basic HTML structure. The idea is: you write HTML that conforms to the structure, then you can reuse any of the themes by just including a CSS file (and sometimes a JS file) in your <head>. Turns out I wasn't the best person indicated to push this, as my design skills weren't marvelous, but I still think it was a good idea. There are 17 themes available, mostly ported from other places. A playground where you can see the themes (and test your own, if you are feeling like building one) is available at https://classless.alhur.es/ https://classless.alhur.es/

coreyp_1 7y ago

Honestly, these designs are so refreshing. There is no place for ads. No popups asking to subscribe to their newsletter. No breaking because I have Javascript disabled. Looking through some of the designs made me happy... and a bit nostalgic. :)

olivermarks 7y ago

this era broke me as a web designer. Dom walking etc. i need to get back into current trends so this discussion is useful.

gijoeyguerra 7y ago

Cool. XML, by way of HTML was always designed to be layered. As in, a layer for a different use case. At the lowest layer, is the data. Each layer used to decorate the layer below it enables using it for different use cases. CSS is just another decoration to create another layer used for another use case (styling the data for the rendering in a browser use case). While keeping the underlying data still usable for a totally different use case. CSS Zen Garden is such a fantastic showcase of that layering architecture of HTML. Regarding Javascript applications, I consider it just another case where we're using the design of the web for something it's inventors could never foresee. Well, they did foresee "apps", but I'm just not sure React, Angular, Ember, etc. apps was what they were imagining.

subless 7y ago

I see a lot of people bickering here in the comments about what's better and why, but does it really matter? I mean I don't care if you like to wear rain boots when it's sunny or flip flops when it's raining, as long as you have some footwear on. There's many ways a webpage could be programmed/designed/developed/styled but the only thing that really matters is that it's usable and visible to the end-user. No programmer likes every other programmers code when they have to work with it and we all know there's ten different ways to solve the same problem so just let people do it the way they know how as long as you can use/view it with no major issues who cares.

edem 7y ago

I love this site. I used this site back then to learn all about HTML and CSS and the fact that it still works with those age-old designs is a testament to the original CSS philosophy.

basseq 7y ago

I was a huge fan of the CSS Zen Garden, and was so excited to have my submission accepted back in 2006 (#106!) when I was first starting out. Generally, it was a great demonstration of CSS at a time when CSS was rather novel, and the "separation of content and presentation" sticks with me today, and forms a good foundation for things like built-once responsive web design. For me personally, I met a lot of interesting people through CSSZG, including Bill Zeller (RIP[1]) and others. [1] https://news.ycombinator.com/item?id=2074109 https://news.ycombinator.com/item?id=2074109