Old CSS Zen Garden example

I wrote this bit of CSS around 2007 when I wanted to create a sample design for CSS Zen Garden. I didn't ever publish it, and later I archived it. Recently, I transfered the code out of that archive to gitlab. It is now hosted on the gitlab pages service here: "Road Flower" CSS Zen Garden Sample. The project files are at this git repository.

This is definately not how I author my stylesheets now.

body {
	background: black url(big_v_road.png) repeat-y top right;
	color: #d4d6d6;
	margin: 0;
	font: 15px/25px sans-serif;
}

a:link, a:visited, a:hover, a:active {
	background-color: #4d4a4b;
	color: white;
	border: 1px solid;
	border-top: none;
	border-bottom: none;
	padding: 0 .7em;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: line-through;
	padding: 0;
	background-color: #2a2829;
}
a:hover, a:active {
	border-top: 1px dashed;
	border-bottom: 1px dashed;
}

p, h3 {
	text-align: right;
}

ul {
	list-style-type: none;
}
li {
	white-space: nowrap;
	margin: 0;
}
li:after {
	content: "+";
	margin-left: 10px;
	margin-right: -10px;
	font-size: larger;
	font-weight: 900;
	color: #62663e;
}

div#container {
/*	margin-top: -19px; */
	background: url(corner.png) no-repeat top left;
}

div#pageHeader {
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 0px;
	margin: 0px;
	width: 100%;
	height: 0px; /* set to 0 so it doesn't interfere with rest of page */
}
#pageHeader h1 {
	float: right; /* floating this so it sticks out of the div 
			and then won't cause issues with rest of page */
	width: 100px;
	height: 380px;
	margin: 0 10px 0 0;
	background: transparent url(css_zen_garden.png) no-repeat top right;
}

#pageHeader span {
	display: none;
	margin: 0px;
}

div#quickSummary {
	margin-top: 330px;
	padding: 13px 20px 5px 5px;
	background: url(big_white_box_top.png) no-repeat top left;
	width: 389px;
	float: left;
}
#quickSummary p {
	text-align: left;
	padding: 0 15px;
}

#quickSummary p.p2 {
	background: url(big_white_box_bottom.png) no-repeat bottom left;
	width: 414px;
	padding-bottom: 35px;
	margin-left: -5px;
	margin-bottom: -30px;
}

div#preamble {
	margin: 0px 150px 10px 10px;
	padding: 20px 0px;
}

div#supportingText {
	margin: 0px 150px 10px 384px;
	padding-left: 46px;
	z-index: 10;
	position: static;
/*	background: url(v_road.png) repeat-y top left; */
}

div#linkList {
	position: absolute;
	z-index: 100;
	top: 500px;
	left: 0px;
	padding: 90px 35px 150px 20px;
	width: 360px;
	height: 500px;
	background: url(v_road.png) repeat-y top right;
}

div#linkList ul {
	text-align: right;
	border: #d4d6d6 1px solid;
	padding: 5px 30px 5px 10px;
	margin: 0 -25px 0 118px;
	width: 230px;
	clear: both;
}

div#linkList h3 {
	margin-bottom: -1px;
	border: #9ea945 .2em dashed;
	border-bottom: none;
	display: inline;
	padding: .2em .7em 0;
	float: right;
	height: .95em;
	color: white;
}

div#extraDiv1 {
	position: absolute;
	z-index: 1;
	top: 550px;
	left: 0;
	width: 332px;
	height: 686px;
	background: url(big_flower.png) no-repeat top left;
}

div#extraDiv2 {
	position: absolute;
	top: 0;
	left: 384px;
	width: 30px;
	height: 600px;
}

So, what have I learned? Well, this was kinda how CSS was used back then. There wasn't anything exactly wrong with using id in CSS. It almost made sense to use it for styling elements that should only be on the page once. I used the class selector for elements that would be on the page multiple times. The idea behind CSS Zen Garden was to see what design could be made by just applying CSS and not modifying the HTML. I know now that having the HTML structure so tightly coupled with the CSS is not for good times.

I also learned that I wasn't much of a designer and shouldn't be designing websites. Sure, the site has a unique design with some strange borders around the sidebar headers. My use of applying filters on graphics was, uhm, different. Oh, and lets right align most of the body text! Yeah, that looks sweet!

Note the rounded corner background graphics on the #quickSummary element. Using border-radius back then wasn't well supported. That element's width is now limited to the width of the graphic. Not to reflect too much about the past, but I remember the days of all the little hacks that had to be done to simply add rounded corners to things like this. The one I use here was minor.

It looks like I did add some comments to my CSS. Or, well, two that aren't just commenting out code. I think I just added them to describe why I set a certain property that way. Looking at the code almost 10 years later; it would have been better to describe how the element is being styled. For example, the #pageHeader is being absolutley positioned to the top without a height and has a full width. The child h1 element is then floated right with a 100px width and a background graphic. All span elements within the #pageHeader are hidden which only applies to the 'css Zen Garden' text here. This results in a vertical banner on the right with the site's title. A comment about that would've been useful in the CSS I think.

There are also a lot of magic numbers with no comment about their value. At this point it's a guessing game as to why the margin-left is at 384px for #supportingText. With a simple site like this the guesses are easy and it is most likely associated with the sidebar. These things aren't hard to figure out, but would get unwieldly if the site were more complex.

Okay, well, there is always room for improvement.