The CSS Zen Garden site isn't exactly new news these days, but I've been digesting the excellent CSS Zen Garden book over the last few months and we now have an opportunity to pursue a completely CSS-driven site layout on one of our projects.
I haven’t done it yet, but I’m going to give it a shot sometime after the first of the year. I’m going to roll my own blog software, and attempt to do as much with CSS as possible.
I’m particularly fond of the Mozart style:
http://www.csszengarden.com/?cssfile=/189/189.csspage=0
Except I would do it with more of a computer/tech related theme instead of musical. I’ll probably go for dark on light as well.
My site is pretty much as zen’d out as you can get in asp.net, and so is Milan’s (http://www.aspnetresources.com/). There’s really nothing that prevents creating a nice, semantic site in ASP. Just watch out for controls outputting funky html, and the fact that asp.net renders crappy html to “downlevel” browsers in 1.1.
Great stuff Jeff, keep the links coming.
Here’s an amusing article on converting the microsoft.com homepage to a fully CSS-based layout:
http://www.stopdesign.com/articles/throwing_tables/
That article’s a little old, but I just checked and the microsoft.com site is still table based.
All my ASP.Net sites output nice html and do most layout stuff in CSS. I end up using repeaters more than data grids and such like. Formatting the tables is one of the most interesting challenges. All my asp sites did that too.
Scott Guthrie just posted about the ASP.NET 2.0 Control Adapter Architecture which gives you the ability to change the how a control renders html. They are actively working on a project to show you how to do pure CSS layout using this architecture. a href="http://weblogs.asp.net/scottgu/archive/2005/12/21/433692.aspx"http://weblogs.asp.net/scottgu/archive/2005/12/21/433692.aspx/a
Scott also recently posted about some 2.0 UI templates (a href="http://weblogs.asp.net/scottgu/archive/2005/12/13/433079.aspx"http://weblogs.asp.net/scottgu/archive/2005/12/13/433079.aspx/a ) and a new CSS Properties Window (a href="http://weblogs.asp.net/scottgu/archive/2005/12/12/432993.aspx"http://weblogs.asp.net/scottgu/archive/2005/12/12/432993.aspx/a ).
Seriously, Scott’s blog is invaluable to all ASP.NET devs.
I had the same issues coming from a world of ASP where I knew how to get nice XHTML strict layouts rocking with CSS. ASP.NET felt like a stumble backwards to the caveman days of FrontPage, “pay no attention to the markup behind the curtain.”
Honestly I hover between Ruby on Rails and ASP.NET 2.0 because it is so much easier to produce the exact HTML I want with Rails.
That aside:
the repeater is your new best friend
never use any of the control properties (basically you need to ignore the property editor for anything that is UI-related)
all your user controls should be emitted as divs
tables aren’t evil as long as you use them only for tabular data.
tables are still best for complicated data entry screens (even the pros on ALA tend to agree)
ignore the design view, you need to live in the HTML view of your pages
it’s quite easy to develop for Firefox first and then fix IE as long as you do not use the intergrated browser in VS
All that being said it’s actually not too bad as long as you are comfortable coding xhtml by hand. If you’re a drag and drop guy though be prepared for a learning curve.
I do some intranet application development with .NET 1.1, and everything I do is semi-standards-based. I can’t be bothered to make the webcontrols output valid HTML (too much work for no measurable gain), but I do use purely CSS-driven layouts and my apps are smoothly structured and smoothly semantic like a baby’s arse (OK, that was a bad comparison). And I do it for fun - the company standard is IE, only a handful of geeks use Firefox, and nobody knows I’m doing it; that is, until they just hit Print in their web browser and get everything wonderfully formatted for printing. In other people’s apps, there have to be special report generators, and even then stuff looks awful because they generate tons of tables and everything.
BTW, Jeff, you should really change your blog comment script. If one doesn’t enter his e-mail, it’ll complain for the e-mail being mandatory; when you do enter it, then, your address is joyfully displayed for all the spamming world to see. If - on the other hand - you enter an URL, it gets scrambled. It’s the opposite of what the script should do 
Or not. I’ve entered an URL, and the script still complained about the missing e-mail address. If I enter both, what will be displayed…? Hmm…
For the last few years the company I worked for were producing pure CSS sites using ASP.Net 1.1 ( examples: a href="http://www.think-energy.co.uk/"http://www.think-energy.co.uk//a and a href="http://www.autumnidealhomeshow.co.uk/Default.aspx"http://www.autumnidealhomeshow.co.uk/Default.aspx/a ) and it is quite possible to do but I did end up creating custom versions of all the regularly used server controls because the majority of those are deeply tied to table-based design.
As for Visual Studio’s habit of horrifically munging your carefully crafted xhtml putting ALL YOUR TAGS INTO CAPITALS and killing your closing li tags, that was simply inexcusable. I’ve not played with 2005 yet, but the rumours were it is less cruel to html.
VS 2005 leaves your html code alone. That alone is worth the upgrade.
I’ve worked on one ASP.net website that I tried to convert to pure CSS. The powers that be stopped me from doing the complete deal.
I am in the process or designing a new site (my own project). It will be pure CSS when I am done. Most likely with a couple of themes to choose from.
I saw that people already mentioned CS above. So I won’t talk about it. We’ve had very few problems developing a custom site with ASP.Net, .Net 1.1, and XHTML:
a href="http://www.stjohns.edu/"http://www.stjohns.edu//a
Our initial design was table-based, but over time we’ve migrated just about everything over to semantic markup and standards compliance. The downside is that because we started with a table-based, non-standards compliant design, there is still content (either .Net controls that we haven’t refactored or user-entered content) that doesn’t validate.
The company I work for also has several other sites (loosely based on this same framework), that are 100% compliant and 100% semantic, but they haven’t gone live just yet. Shawn made some good points above, I only disagree with him on the following:
I would also like to add:
There have been very few instances where the 1.1 Framework has provided us with a non-compliant control, and where it has, it has almost always been easily replaced with a compliant custom control. .Net 2.0 appears to be 100% compliant out-of-the-box so that should make it even easier.
Thanks to everyone who provided tips on ASP.NET adoption of CSS Zen garden techniques-- it is very much appreciated.
Also, there’s a great thumbnail set of (all?) the zen garden designs here:
(To Geof) http://www.csszengarden.com/ is quite alive and well.
(To Jeff) So your original post was a little over a year ago now… Have you since successfully used a CSS based design with ASP.NET? I’m struggling with that myself, along with a CSS vs Themes question. A group I work with is big on themes, but I just don’t see the advantages of using ASP.NET Themes with CSS, in fact I see some disadvantages… CSS seems to give you all/most of the real benefit of Themes in a more clear, simpler way.
The ASP.NET CSS Control Adapter toolkit does make things a bit easier. (http://www.asp.net/cssadapters/Default.aspx)
-Andy
Andy, I’m currently learning ASP.NET 2. I’m used to having control over HTML output and applying CSS to present the content. The book I’m learning from introduces CSS and immediately starts talking about Skins. On a quick test, style information outputted by Skins is inline CSS, which as you’ll know, leads to bloated HTML documents.
Of my limited experience of ASP.NET development, I really hate the way that developers must jump through hoops to produce standards-based web sites. I totally agree with you that pure CSS (in an external file) is the way to go. Why does ASP.NET take so much control away?
Why is CSS so hard with ASP.NET? Because CSS is hard with dynamic applications (that resize) vs the Text-only CSS-Useless garden. I’ve yet to see a real web APPLICATION, not a web SITE that uses server side coding and CSS-only websites.
Dustin:
Um. How about Wired.com? ESPN is pretty close too. I think their landing page has a single table cell in it.
ASP.NET does not make CSS harder, in fact quite the contrary. Most controls in code-behind offer methods for injecting CSS properties and values. That is much cleaner that getting into the mark-up game in your server-side code like you had to for changing CSS values in dynamic languages like classic ASP and PHP.
I have tried CSS control adapters. They are cool but a heve a problem. In IE7 and Firefox, my website csstemplatesforfree.com is working fine but in IE6 browser my menus are disappearing. What’s going on?!