9 ms·

CSS Zen Garden: A demonstration of what can be achieved through CSS-based design

173 points by mroche 5y ago

whalesalad 5y ago
Reminder this is from the days where most websites where built with tables. I’m finally that guy now! Time flies.
dre85 5y ago
I hope I'm not the only one who has nostalgia for tables and frames. There was only one way to center content and it always worked. Now there's a hundred and none ever work without a bunch of Googling and troubleshooting.
- wildrhythms 5y ago
  I started learning web development back in the day of IE6 and table-based layouts. It's actually incredible how many modern designs I see today that are portraying a table, but have recreated the <table> element (and its associated <tr> and <td> elements) in a soup of flex layout divs and such. With that said, centering is not difficult. The difficulty comes in not realizing that flex layout is essentially the same rows and columns you used before, but with better controls for wrapping elements (tables can't do that easily). Edit: Some more nostalgia: Cutting out rounded corners and shadows in Photoshop with the slice tool because there was no border-radius or box-shadow at the time :)
  - blondin 5y ago
    wait. flex-based layout has not fixed centering. nothing which has been done since table-based layout has an intuitive and cross-browser way for doing vertical and horizontal centering. that's what i think GP meant. i do not want to see tables back but i do admit that they did exactly, and intuitively, what you would expect of them.
    - trs8080 5y ago
      ??? .box { display: flex; align-items: center; justify-content: center; width: 500px; height: 500px; } .box div { width: 100px; height: 100px; } <div class="box"> <div>this is centered vertically and horizontally</div> </div> also, using tables for layout isn't semantically correct. it's like using `map` as a for loop. also, consider folks with disabilities who rely on screen readers.
    - eyelidlessness 5y ago
      Centering has been an easily solved problem with both flex and grid for years. If you’re having trouble with conflicting styles, you can revert them with, well, revert. You can even revert all of them with revert: all. But I don’t recommend that. If you’re still having trouble centering things I’d recommend getting familiar with the cascade and removing styles that conflict with what you’re centering.
      - eyelidlessness 5y ago
        Can’t edit now but I’d be remiss if I didn’t correct myself. You can revert all styles with `all: revert`, but I still don’t recommend that.
  - dylan604 5y ago
    >Cutting out rounded corners and shadows in Photoshop with the slice tool because there was no border-radius or box-shadow at the time :) Dreamweaver and it's auto-slicing and table layout function was insane. So many bad web designs were created by me with it.
    - egeozcan 5y ago
      I was having so much fun also with Coffee Cup HTML Editor and its "DHTML" widgets. Slice in Dreamweaver, export, open in Coffee, add useless widgets, re-export, drag and drop the horrendously generated HTML file in random ftp program and voila, you have something that maybe works on a specific version of IE but a lot of fun.
  - Bilal_io 5y ago
    The reason I personally prefer using divs with flexbox is responsiveness, and it gives me more control overall. I've always hated tables, even for tables, let alone to structure a whole page.
    - wildrhythms 5y ago
      Tables are special. The width of a cell is determined by the widest cell in the column. The height of a cell is determined by the tallest cell in the row. I have yet to see a convincing replication of the simplicity of the native <table> element with a flex layout. Consider the colspan and rowspan attributes for additional complexity. You are right that flex offers much more... flexibility. But tables adhere to a certain set of rules that I don't think is easily implemented with flexbox.
      - Bilal_io 5y ago
        "The width of a cell is determined by the widest cell in the column. The height of a cell is determined by the tallest cell in the row" I've achieved the same with css grid. I genuinely don't think table are needed anymore, unless you're building a page to display data and don't care about responsiveness.
        wildrhythms 5y ago
        To my knowledge, there is no implementation for rowspan or colspan attributes in a flex grid. Also, to note, I am not advocating for table-based layouts for non-tabular data.
        JimDabell 5y ago
        Parent was talking about grid. You seem to be talking about flexbox but calling it “flex grid” instead – you know grid and flexbox are two separate things, right? Grid definitely has the equivalent of rowspan/colspan.
        deleted 5y ago
  - deergomoo 5y ago
    > It's actually incredible how many modern designs I see today that are portraying a table, but have recreated the <table> element (and its associated <tr> and <td> elements) in a soup of flex layout divs and such To play devil’s advocate, <table> can be frustratingly inadequate even for tabular data, if you want to add some bells and whistles. Things like resizable/reorderable columns aren’t too tricky, but if you want things like sticky rows or columns things get very messy very quickly. I’m convinced that the negative qualities of modern web development stem from the built-in controls being largely stuck in 1995.
    - egeozcan 5y ago
      Just a heads up (pun maybe subconsciously intended): "position: sticky" works surprisingly well on table-headers. Demo: https://jsfiddle.net/Lkye3cpq/ https://jsfiddle.net/Lkye3cpq/
    - paulryanrogers 5y ago
      As a counterpoint Firefox can select and copy columns or rows from traditional tables.
- thunderbong 5y ago
  Totally agree! Have you done a 'View Source' on the HN page?
- neovive 5y ago
  Definitely! For all the knocks against tables for layout, we're only beginning to approach the simplicity of that approach after many years. (It's even a stretch to call CSS Grid and Flexbox simple.) You could get so far with a few tables and spacer gifs -- if you looked past the semantics.
- gentleman11 5y ago
  Css grid is pretty flexible for zen garden like layouts
- lwhi 5y ago
  I haven't had to reply to someone who feels tables are 'the way' for a good 15 years. .. nicely triggered for a moment!
  - veltas 5y ago
    Not a web dev so I'm curious to know what the problem is.
    - laumars 5y ago
      i know I’ll get downvoted for saying this because there are a lot of front end developers on here who fail to question the sanity of their tools but the current mess with <table> (and most of front end development) is an acute suffering from not invented here syndrome. Why have a construct purposely for tabulated data when you can reinvent the wheel with a nightmarish array of divs and complex CSS. /s (honestly though, before anyone does mod this post down, pause for a moment and ask yourself this question. If you have a good answer then I’d love to hear it). The problem is web development went too far down the CSS “all the things” route and instead of using it for styling, developers use it for near enough the entirety of web layout. Which makes no sense when you have data that needs to be structured in specific ways (namely tabulated data). In those scenarios the layout is as much a part of the content as the data itself. Thus CSS there should be used to make the tables attractive rather than using CSS to construct the tables themselves. I’m not saying <table> doesn’t have its warts but really what should have happened was those warts fixed rather than creating a whole new set of warts and complexity with divs. Again, before anyone votes me down, pause and try to answer this question yourself. Obviously divs do have their benefits elsewhere in web design; I don’t miss using tables for general purpose layouts. But for tabulated data tables are absolutely the right tool… or at least that should have been the case if sensible people were left to define pragmatic web standards.
      - LocalPCGuy 5y ago
        I'm not saying there aren't some devs who fit in the box you describe, but semantic HTML is an important part of web dev and many front end devs still ascribe to it. As you said, tags have meanings and we should use the appropriate one for the appropriate thing. And there are most definitely ways to use even the table tag responsibly (and responsively, although that is harder). And that is absolutely the standard. Just because people ignore it doesn't mean the standards don't exist. Random blog posts do not change that.
- dmje 5y ago
  Bugs me when people use divs to do tabular data display when there’s a perfectly excellent <table> tag. Copy pasting div based tabular data from a web page into a spreadsheet or document is made nightmarish. For layouts, sure, use flex or whatever, but not for data!
  - innocenat 5y ago
    It's hard to make responsive table with <table> tag though (except if you only want horizontal scrolling)
- southerntofu 5y ago
  I do have this nostalgia remembering my first tr/td spaghetti codes. However, it was never really usable for visually-impaired people, and flex/grid give me proper responsiveness now that 4:3 displays aren't the only way to browse content.
- FloNeu 5y ago
  You aware that you can just define a container as display: table-cell and then center stuff in it the old way - at least i remember doing this 10years back or so to solve centering issue I just couldn't get right... (Pardon if above isn't valid css)
- playpause 5y ago
  I don’t mean to be rude, but if you can’t center content without googling and getting frustrated, you might just need to slow down and take 5 minutes to actually learn how to do it, and let it sink in once and for all. It’s been very straightforward for several years now. The idea that it’s difficult is just an old meme at this point.
blorenz 5y ago
I even had the book back in 2005! I felt so empowered to reign in IE6 https://www.amazon.com/Zen-CSS-Design-Visual-Enlightenment/dp/0321303474/ https://www.amazon.com/Zen-CSS-Design-Visual-Enlightenment/d...
- FloNeu 5y ago
  <blink>YOU MAD MAN</blink>
BitAstronaut 5y ago
I had the book back in the early 2000s. It was great.
e9 5y ago
I literally discovered this site couple of hours ago form reading article that criticizes this approach lol https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ https://adamwathan.me/css-utility-classes-and-separation-of-...
- soheilpro 5y ago
  Separation of content and presentation was one of the biggest lies that we (web developers) used to tell ourselves for years.
  - echelon 5y ago
    There was a brief time before platforms took over that data seemed as though it was first class and would break free of any presentation or shackles. We almost had a P2P semantic web. (Web 3.0)
  - nine_k 5y ago
    Not really a lie, if your browser has the "reader mode" button.
  - rudasn 5y ago
    Back then it was more about getting people to use CSS better (learn about it) and to use separate files (use classes not inline styles). Back then, pages were rendered on the server and in many cases there wasn't much templating either. People would normally have their sql query code, their business logic, and the html in the same function in a file >5k lines long. Bsck then it made perfect sense. Now, considering everything else that's going on in Web development (JS explosion), perhaps not so much.
qiller 5y ago
So different from modern utility based CSS…
hardmath123 5y ago
This reminds me of a small experiment I did with a friend, where we asked different people to independently write the HTML and CSS for a website (without communicating), and then put the HTML and CSS files together to see how well they worked. https://kach.github.io/generative-adversarial-web-development/ https://kach.github.io/generative-adversarial-web-developmen...
- Skunkleton 5y ago
  Taylor did a great job
  - kingcharles 5y ago
    He understood the assignment!
Kluny 5y ago
I spent winter break in 2011 reading Zen Garden and learning CSS! It was so useful in the next seven years of my career to be able to write CSS as easily as English.
- mroche 5y ago
  Was introduced to the site my freshman year of university ~2016. Our web professor used it as a project for getting everyone more familiar with CSS in the intro web course, and each student had to come up with a different design. I ended up making the page look like a text editor and REPL if I remember correctly. It was a lot of fun and a good learning experience! So many ::before and ::after's though...
dado3212 5y ago
Weirdly where I honed my CSS skills was as a Reddit moderator. You had no control over content, but could style anything and everything, and a lot of subreddits had very custom styles. I’ve never done so many :after and !important hacks in my life.
sufehmi 5y ago
The "View all designs" link (http://www.mezzoblue.com/zengarden/alldesigns/ http://www.mezzoblue.com/zengarden/alldesigns/) is broken - anyone knows the correct one?
- pdevr 5y ago
  The source code (for all of them) is available here: https://github.com/mezzoblue/csszengarden.com https://github.com/mezzoblue/csszengarden.com
dang 5y ago
Past threads: CSS Zen Garden - https://news.ycombinator.com/item?id=22627018 https://news.ycombinator.com/item?id=22627018 - March 2020 (217 comments) CSS Zen Garden relaunched - https://news.ycombinator.com/item?id=6076163 https://news.ycombinator.com/item?id=6076163 - July 2013 (47 comments) CSS is for design, HTML is for content - CSS Zen Garden - https://news.ycombinator.com/item?id=811468 https://news.ycombinator.com/item?id=811468 - Sept 2009 (3 comments)
swyx 5y ago
i actually made an updated version of css zen garden! url: https://svelte-zengarden.netlify.app/?path=https://gist.github.com/sw-yx/0e1d14276ef9d2608453fed3c7dfa4ec https://svelte-zengarden.netlify.app/?path=https://gist.gith... video: https://twitter.com/swyx/status/1220895891860676608 https://twitter.com/swyx/status/1220895891860676608 basically the major difference being that you have a css editor inline so you can prototype and see changes immediately, save it to gist and publish a URL so others can see your changes too. No PR process needed to some central authority!
seanwilson 5y ago
Zen Garden is a great demo that shows what you can do with the self-imposed restriction of "you're not allowed to change the HTML", all your styling fits into a single small self-contained CSS file and you only need to style an article, navbar and some side panels but this doesn't make it a good approach for styling highly custom responsive designs for single page apps that have many UI components when working in large teams. Experienced developers that understand CSS well have tried for years to make the Zen Garden approach work for complex cases but solutions like e.g. Tailwind and Bootstrap (where semantic HTML tags should always be used regardless) have been invented and risen in popularity as they scale well to complex cases. It's not because developers are lazy, don't understand CSS and aren't aware of current (and always evolving) best practices. When screen readers and search bots will still understand the semantic HTML tags no matter what styling approach you use and you don't need swappable themes as a core feature of your site, why would you impose the restriction on yourself that you can't modify the HTML as you're changing the styling if you find it comes at a cost to development efficiency? Your docs and data are usually going to be stored and marked up in JSON, XML, Markdown, a database etc. then transformed into semantic HTML so you're still keeping data and presentation separate in this sense (and styling this core content of articles and blog posts is the easiest part of styling), but why try to separate content and styling further than this?
- rglullis 5y ago
  Can we flip this for a bit? What would be of web as an application development if swappable themes was a requirement? - Wouldn't it be easier to have WebComponents as an actual useful technology? - Wouldn't it be easier for browser engine developers to have an "strict mode" of sorts that could run optimized code for actual apps? - Wouldn't it be easier to develop client-side code for other languages that would deal with nothing but business logic, instead of forcing us to come with something like WASM? - Couldn't web clients perhaps come bundles with a set of these web components and styling themes, and wouldn't perhaps the browser be efficient enough to allow us to ditch mobile-clients? - By not having to support multiple clients and platforms, wouldn't we be able to avoid re-inventing JSON as a poor version of X(HT)ML? - Wouldn't the web be a lot more programmable and mash-able and lead to a lot of these server-side functionality to not be needed in the first place?
voidfunc 5y ago
I guess the Matrix is back in theaters and we are talking about semantic HTML and CSS..., hello 2003.
buzzwords 5y ago
CSS is one of those things that every time I have to use it, I have to relearn it.
dimitar 5y ago
As a total frontend newbie, how does one create something like this? Is this all handwritten css or are there are UI tools to create the designs?
- rudasn 5y ago
  Honestly, there's a million things you can learn by reading the source for those files. Right click, view source. Good skill to have. TO answer your question, these were written by hand and you can see that from the code.

173 points by mroche 5y ago

Reminder this is from the days where most websites where built with tables. I’m finally that guy now! Time flies.

I hope I'm not the only one who has nostalgia for tables and frames. There was only one way to center content and it always worked. Now there's a hundred and none ever work without a bunch of Googling and troubleshooting.

wildrhythms 5y ago
I started learning web development back in the day of IE6 and table-based layouts. It's actually incredible how many modern designs I see today that are portraying a table, but have recreated the <table> element (and its associated <tr> and <td> elements) in a soup of flex layout divs and such. With that said, centering is not difficult. The difficulty comes in not realizing that flex layout is essentially the same rows and columns you used before, but with better controls for wrapping elements (tables can't do that easily). Edit: Some more nostalgia: Cutting out rounded corners and shadows in Photoshop with the slice tool because there was no border-radius or box-shadow at the time :)
- blondin 5y ago
  wait. flex-based layout has not fixed centering. nothing which has been done since table-based layout has an intuitive and cross-browser way for doing vertical and horizontal centering. that's what i think GP meant. i do not want to see tables back but i do admit that they did exactly, and intuitively, what you would expect of them.
  - trs8080 5y ago
    ??? .box { display: flex; align-items: center; justify-content: center; width: 500px; height: 500px; } .box div { width: 100px; height: 100px; } <div class="box"> <div>this is centered vertically and horizontally</div> </div> also, using tables for layout isn't semantically correct. it's like using `map` as a for loop. also, consider folks with disabilities who rely on screen readers.
  - eyelidlessness 5y ago
    Centering has been an easily solved problem with both flex and grid for years. If you’re having trouble with conflicting styles, you can revert them with, well, revert. You can even revert all of them with revert: all. But I don’t recommend that. If you’re still having trouble centering things I’d recommend getting familiar with the cascade and removing styles that conflict with what you’re centering.
    - eyelidlessness 5y ago
      Can’t edit now but I’d be remiss if I didn’t correct myself. You can revert all styles with `all: revert`, but I still don’t recommend that.
- dylan604 5y ago
  >Cutting out rounded corners and shadows in Photoshop with the slice tool because there was no border-radius or box-shadow at the time :) Dreamweaver and it's auto-slicing and table layout function was insane. So many bad web designs were created by me with it.
  - egeozcan 5y ago
    I was having so much fun also with Coffee Cup HTML Editor and its "DHTML" widgets. Slice in Dreamweaver, export, open in Coffee, add useless widgets, re-export, drag and drop the horrendously generated HTML file in random ftp program and voila, you have something that maybe works on a specific version of IE but a lot of fun.
- Bilal_io 5y ago
  The reason I personally prefer using divs with flexbox is responsiveness, and it gives me more control overall. I've always hated tables, even for tables, let alone to structure a whole page.
  - wildrhythms 5y ago
    Tables are special. The width of a cell is determined by the widest cell in the column. The height of a cell is determined by the tallest cell in the row. I have yet to see a convincing replication of the simplicity of the native <table> element with a flex layout. Consider the colspan and rowspan attributes for additional complexity. You are right that flex offers much more... flexibility. But tables adhere to a certain set of rules that I don't think is easily implemented with flexbox.
    - Bilal_io 5y ago
      "The width of a cell is determined by the widest cell in the column. The height of a cell is determined by the tallest cell in the row" I've achieved the same with css grid. I genuinely don't think table are needed anymore, unless you're building a page to display data and don't care about responsiveness.
      - wildrhythms 5y ago
        To my knowledge, there is no implementation for rowspan or colspan attributes in a flex grid. Also, to note, I am not advocating for table-based layouts for non-tabular data.
        JimDabell 5y ago
        Parent was talking about grid. You seem to be talking about flexbox but calling it “flex grid” instead – you know grid and flexbox are two separate things, right? Grid definitely has the equivalent of rowspan/colspan.
        deleted 5y ago
- deergomoo 5y ago
  > It's actually incredible how many modern designs I see today that are portraying a table, but have recreated the <table> element (and its associated <tr> and <td> elements) in a soup of flex layout divs and such To play devil’s advocate, <table> can be frustratingly inadequate even for tabular data, if you want to add some bells and whistles. Things like resizable/reorderable columns aren’t too tricky, but if you want things like sticky rows or columns things get very messy very quickly. I’m convinced that the negative qualities of modern web development stem from the built-in controls being largely stuck in 1995.
  - egeozcan 5y ago
    Just a heads up (pun maybe subconsciously intended): "position: sticky" works surprisingly well on table-headers. Demo: https://jsfiddle.net/Lkye3cpq/ https://jsfiddle.net/Lkye3cpq/
  - paulryanrogers 5y ago
    As a counterpoint Firefox can select and copy columns or rows from traditional tables.
thunderbong 5y ago
Totally agree! Have you done a 'View Source' on the HN page?
neovive 5y ago
Definitely! For all the knocks against tables for layout, we're only beginning to approach the simplicity of that approach after many years. (It's even a stretch to call CSS Grid and Flexbox simple.) You could get so far with a few tables and spacer gifs -- if you looked past the semantics.
gentleman11 5y ago
Css grid is pretty flexible for zen garden like layouts
lwhi 5y ago
I haven't had to reply to someone who feels tables are 'the way' for a good 15 years. .. nicely triggered for a moment!
- veltas 5y ago
  Not a web dev so I'm curious to know what the problem is.
  - laumars 5y ago
    i know I’ll get downvoted for saying this because there are a lot of front end developers on here who fail to question the sanity of their tools but the current mess with <table> (and most of front end development) is an acute suffering from not invented here syndrome. Why have a construct purposely for tabulated data when you can reinvent the wheel with a nightmarish array of divs and complex CSS. /s (honestly though, before anyone does mod this post down, pause for a moment and ask yourself this question. If you have a good answer then I’d love to hear it). The problem is web development went too far down the CSS “all the things” route and instead of using it for styling, developers use it for near enough the entirety of web layout. Which makes no sense when you have data that needs to be structured in specific ways (namely tabulated data). In those scenarios the layout is as much a part of the content as the data itself. Thus CSS there should be used to make the tables attractive rather than using CSS to construct the tables themselves. I’m not saying <table> doesn’t have its warts but really what should have happened was those warts fixed rather than creating a whole new set of warts and complexity with divs. Again, before anyone votes me down, pause and try to answer this question yourself. Obviously divs do have their benefits elsewhere in web design; I don’t miss using tables for general purpose layouts. But for tabulated data tables are absolutely the right tool… or at least that should have been the case if sensible people were left to define pragmatic web standards.
    - LocalPCGuy 5y ago
      I'm not saying there aren't some devs who fit in the box you describe, but semantic HTML is an important part of web dev and many front end devs still ascribe to it. As you said, tags have meanings and we should use the appropriate one for the appropriate thing. And there are most definitely ways to use even the table tag responsibly (and responsively, although that is harder). And that is absolutely the standard. Just because people ignore it doesn't mean the standards don't exist. Random blog posts do not change that.
dmje 5y ago
Bugs me when people use divs to do tabular data display when there’s a perfectly excellent <table> tag. Copy pasting div based tabular data from a web page into a spreadsheet or document is made nightmarish. For layouts, sure, use flex or whatever, but not for data!
- innocenat 5y ago
  It's hard to make responsive table with <table> tag though (except if you only want horizontal scrolling)
southerntofu 5y ago
I do have this nostalgia remembering my first tr/td spaghetti codes. However, it was never really usable for visually-impaired people, and flex/grid give me proper responsiveness now that 4:3 displays aren't the only way to browse content.
FloNeu 5y ago
You aware that you can just define a container as display: table-cell and then center stuff in it the old way - at least i remember doing this 10years back or so to solve centering issue I just couldn't get right... (Pardon if above isn't valid css)
playpause 5y ago
I don’t mean to be rude, but if you can’t center content without googling and getting frustrated, you might just need to slow down and take 5 minutes to actually learn how to do it, and let it sink in once and for all. It’s been very straightforward for several years now. The idea that it’s difficult is just an old meme at this point.

blorenz 5y ago

I even had the book back in 2005! I felt so empowered to reign in IE6 https://www.amazon.com/Zen-CSS-Design-Visual-Enlightenment/dp/0321303474/ https://www.amazon.com/Zen-CSS-Design-Visual-Enlightenment/d...

FloNeu 5y ago
<blink>YOU MAD MAN</blink>

BitAstronaut 5y ago

I had the book back in the early 2000s. It was great.

e9 5y ago

I literally discovered this site couple of hours ago form reading article that criticizes this approach lol https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ https://adamwathan.me/css-utility-classes-and-separation-of-...

soheilpro 5y ago
Separation of content and presentation was one of the biggest lies that we (web developers) used to tell ourselves for years.
- echelon 5y ago
  There was a brief time before platforms took over that data seemed as though it was first class and would break free of any presentation or shackles. We almost had a P2P semantic web. (Web 3.0)
- nine_k 5y ago
  Not really a lie, if your browser has the "reader mode" button.
- rudasn 5y ago
  Back then it was more about getting people to use CSS better (learn about it) and to use separate files (use classes not inline styles). Back then, pages were rendered on the server and in many cases there wasn't much templating either. People would normally have their sql query code, their business logic, and the html in the same function in a file >5k lines long. Bsck then it made perfect sense. Now, considering everything else that's going on in Web development (JS explosion), perhaps not so much.

qiller 5y ago

So different from modern utility based CSS…

hardmath123 5y ago

This reminds me of a small experiment I did with a friend, where we asked different people to independently write the HTML and CSS for a website (without communicating), and then put the HTML and CSS files together to see how well they worked. https://kach.github.io/generative-adversarial-web-development/ https://kach.github.io/generative-adversarial-web-developmen...

Skunkleton 5y ago
Taylor did a great job
- kingcharles 5y ago
  He understood the assignment!

Kluny 5y ago

I spent winter break in 2011 reading Zen Garden and learning CSS! It was so useful in the next seven years of my career to be able to write CSS as easily as English.

mroche 5y ago
Was introduced to the site my freshman year of university ~2016. Our web professor used it as a project for getting everyone more familiar with CSS in the intro web course, and each student had to come up with a different design. I ended up making the page look like a text editor and REPL if I remember correctly. It was a lot of fun and a good learning experience! So many ::before and ::after's though...

dado3212 5y ago

Weirdly where I honed my CSS skills was as a Reddit moderator. You had no control over content, but could style anything and everything, and a lot of subreddits had very custom styles. I’ve never done so many :after and !important hacks in my life.

sufehmi 5y ago

The "View all designs" link (http://www.mezzoblue.com/zengarden/alldesigns/ http://www.mezzoblue.com/zengarden/alldesigns/) is broken - anyone knows the correct one?

pdevr 5y ago
The source code (for all of them) is available here: https://github.com/mezzoblue/csszengarden.com https://github.com/mezzoblue/csszengarden.com

dang 5y ago

Past threads: CSS Zen Garden - https://news.ycombinator.com/item?id=22627018 https://news.ycombinator.com/item?id=22627018 - March 2020 (217 comments) CSS Zen Garden relaunched - https://news.ycombinator.com/item?id=6076163 https://news.ycombinator.com/item?id=6076163 - July 2013 (47 comments) CSS is for design, HTML is for content - CSS Zen Garden - https://news.ycombinator.com/item?id=811468 https://news.ycombinator.com/item?id=811468 - Sept 2009 (3 comments)

swyx 5y ago

i actually made an updated version of css zen garden! url: https://svelte-zengarden.netlify.app/?path=https://gist.github.com/sw-yx/0e1d14276ef9d2608453fed3c7dfa4ec https://svelte-zengarden.netlify.app/?path=https://gist.gith... video: https://twitter.com/swyx/status/1220895891860676608 https://twitter.com/swyx/status/1220895891860676608 basically the major difference being that you have a css editor inline so you can prototype and see changes immediately, save it to gist and publish a URL so others can see your changes too. No PR process needed to some central authority!

seanwilson 5y ago

Zen Garden is a great demo that shows what you can do with the self-imposed restriction of "you're not allowed to change the HTML", all your styling fits into a single small self-contained CSS file and you only need to style an article, navbar and some side panels but this doesn't make it a good approach for styling highly custom responsive designs for single page apps that have many UI components when working in large teams. Experienced developers that understand CSS well have tried for years to make the Zen Garden approach work for complex cases but solutions like e.g. Tailwind and Bootstrap (where semantic HTML tags should always be used regardless) have been invented and risen in popularity as they scale well to complex cases. It's not because developers are lazy, don't understand CSS and aren't aware of current (and always evolving) best practices. When screen readers and search bots will still understand the semantic HTML tags no matter what styling approach you use and you don't need swappable themes as a core feature of your site, why would you impose the restriction on yourself that you can't modify the HTML as you're changing the styling if you find it comes at a cost to development efficiency? Your docs and data are usually going to be stored and marked up in JSON, XML, Markdown, a database etc. then transformed into semantic HTML so you're still keeping data and presentation separate in this sense (and styling this core content of articles and blog posts is the easiest part of styling), but why try to separate content and styling further than this?

rglullis 5y ago
Can we flip this for a bit? What would be of web as an application development if swappable themes was a requirement? - Wouldn't it be easier to have WebComponents as an actual useful technology? - Wouldn't it be easier for browser engine developers to have an "strict mode" of sorts that could run optimized code for actual apps? - Wouldn't it be easier to develop client-side code for other languages that would deal with nothing but business logic, instead of forcing us to come with something like WASM? - Couldn't web clients perhaps come bundles with a set of these web components and styling themes, and wouldn't perhaps the browser be efficient enough to allow us to ditch mobile-clients? - By not having to support multiple clients and platforms, wouldn't we be able to avoid re-inventing JSON as a poor version of X(HT)ML? - Wouldn't the web be a lot more programmable and mash-able and lead to a lot of these server-side functionality to not be needed in the first place?

voidfunc 5y ago

I guess the Matrix is back in theaters and we are talking about semantic HTML and CSS..., hello 2003.

buzzwords 5y ago

CSS is one of those things that every time I have to use it, I have to relearn it.

dimitar 5y ago

As a total frontend newbie, how does one create something like this? Is this all handwritten css or are there are UI tools to create the designs?

rudasn 5y ago
Honestly, there's a million things you can learn by reading the source for those files. Right click, view source. Good skill to have. TO answer your question, these were written by hand and you can see that from the code.