Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

CSS Zen Garden relaunched

csszengarden.com

Post reply on HN
Print view View original

41–50 of 50 posts

Re: CSS Zen Garden relaunched

#41

Post by onli »

mwd_ wrote: post #13
zevyoura wrote: post #6

Earlier quoted context omitted.

It's amazing the level of nostalgia produced by looking at some of the old designs, like Orchid Beauty[0] and Under the Sea[1]. [0] http://www.csszengarden.com/?cssfile=/211/211.css [1] http://www.csszengarden.com/?cssfile=/213/213.css

I'm not nostalgic about the old, low-resolution monitors though. The content in those design fits into 630/700 pixel wide columns and the 11 pixel text in Orchid Beauty looks tiny on my screen!

It is not only the text size. It is also the low contrast. Add to that the fixed size layout, the orchids in the titles, the images replacing the titles (albeit with a proper fallback), the unmotivated plus-icon in the list…

Those old designs were great in the past to show what is possible, but now they are a reminder of the long way web design has behind.

Re: CSS Zen Garden relaunched

#42

Post by onli »

jimktrains2 wrote: post #40
mwd_ wrote: post #13

Earlier quoted context omitted.

I'm not nostalgic about the old, low-resolution monitors though. The content in those design fits into 630/700 pixel wide columns and the 11 pixel text in Orchid Beauty looks tiny on my screen!

Aside: Why do people use px for text and not pt? pt seems like it'd be much more portable.

Why would it be? 1/72 of an inch has no corresponding value on a monitor.

http://stackoverflow.com/a/3557279/2508518 says it in a good way.

Re: CSS Zen Garden relaunched

#43

Post by blauwbilgorgel »

jimktrains2 wrote: post #40
mwd_ wrote: post #13

Earlier quoted context omitted.

I'm not nostalgic about the old, low-resolution monitors though. The content in those design fits into 630/700 pixel wide columns and the 11 pixel text in Orchid Beauty looks tiny on my screen!

Aside: Why do people use px for text and not pt? pt seems like it'd be much more portable.

I think relative font-sizing with "em" and "rem" [1] is a popular and good choice these days. "em" has been popular since 2004 after an article by Rutter [2].

IE9- (and Android 1.6-) didn't scale/zoom well when the font was set in px. But using px was widespread despite these (and other) cons because it was easy, reliable and consistent to implement across browsers. [3]

Pt (point type) are only for printer style sheets [4], not screen style sheets. Using them for screen styles is not-done and doesn't make much sense. [5]

[1] http://snook.ca/archives/html_and_css/font-size-with-rem

[2] http://clagnut.com/blog/348/

[3] http://alistapart.com/article/howtosizetextincss

[4] http://css-tricks.com/css-font-size/

[5] http://style.cleverchimp.com/font_size/points/font_wars.GIF

Re: CSS Zen Garden relaunched

#44

Post by jimktrains2 »

onli wrote: post #42
jimktrains2 wrote: post #40

Earlier quoted context omitted.

Aside: Why do people use px for text and not pt? pt seems like it'd be much more portable.

Why would it be? 1/72 of an inch has no corresponding value on a monitor. http://stackoverflow.com/a/3557279/2508518 says it in a good way.

The OS and application would know the dpi and hence could convert pixels to pts I thought.

Re: CSS Zen Garden relaunched

#45

Post by jimktrains2 »

blauwbilgorgel wrote: post #43
jimktrains2 wrote: post #40

Earlier quoted context omitted.

Aside: Why do people use px for text and not pt? pt seems like it'd be much more portable.

I think relative font-sizing with "em" and "rem" [1] is a popular and good choice these days. "em" has been popular since 2004 after an article by Rutter [2]. IE9- (and Android 1.6-) didn't scale/zoom well when the font was set in px. But using px was widespread despite these (and other) cons because it was easy, reliable and consistent to implement across browsers. [3] Pt (point type) are only for printer style shee…

Thanks! for all the information.

Re: CSS Zen Garden relaunched

#46

Post by onli »

jimktrains2 wrote: post #44
onli wrote: post #42

Earlier quoted context omitted.

Why would it be? 1/72 of an inch has no corresponding value on a monitor. http://stackoverflow.com/a/3557279/2508518 says it in a good way.

The OS and application would know the dpi and hence could convert pixels to pts I thought.

That wouldn't help. Without wanting to go too deep into OT-territory:

Even if the DPI could be known (and afaik normally it isn't, it is just set to a value) and it would be possible to convert in into real inches (btw, I have no idea how big that is in real units) to be displayed on a monitor, how would a designer know how big any element, even text, should be? It depends on the available space, which depends on the size of the monitor/the size of the window.

To think about how absurd that would be, try to find a situation where someone would say "this heading should be 2 cm tall".

px as size lead to the same problem with the available space, but they at least correspond to the resolution.

Re: CSS Zen Garden relaunched

#47

Post by djKianoosh »

Timothee wrote: post #30
djKianoosh wrote: post #24

Earlier quoted context omitted.

not sure why you got down votes. some of the examples, i agree with you, aren't pleasing. quite a few are. it's been a great tool to show beginners, imo. it clearly demonstrates the effect/power of CSS on the aesthetics of a site. the fact that some examples are "so ugly" can be used to convey that impact...

I think the downvotes are coming from people who have known and been inspired by CSS Zen Garden "back in the day". The thing you need to remember is that CSS Zen Garden was big around 2004 and most of the designs are from that period. The site was a big inspiration at the time to show that with a single HTML file, you could completely change the appearance of a site. This was huge! So the downvotes are likely coming…

I remember. I was there :)

tangent: should downvotes be based on "how dare you?" sentiments?

Re: CSS Zen Garden relaunched

#48

Post by agumonkey »

danso wrote: post #14

Awesome...I can't remember the last time I've visited this site...but I can't remember a resource on CSS that I ever read before this one... Even though it's "just CSS"...I think CSS Zen Garden, and other sites like it, were absolutely critical to my web development career. Not because I specialized in web design, but because it demonstrated that CSS was cool ...and not just some other syntax to learn (which, when yo…

This site taught me the presentation / content separation in an easy manner. Thankful.

Re: CSS Zen Garden relaunched

#49

Post by teeja »

How to put this? Most CSS proponents seem to focus on "beauty" for individual elements and fairly simple data representation. It'd be useful to see more design aimed at representing LOTS of data in a way which retains uncluttered "good looks" without throwing away multiple navigation options.

People with large, rich databases -especially- need ideas on how to represent that data from many potential angles-of-view while maintaining clarity. 4 or 5 pretty boxes on a page with minimal text just don't suffice. Such ideas are vanishingly rare on most sites dedicated to CSS.

Post reply on HN