TV version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Cross-Site CSS Files

August 06, 2003

File this one under goofy fun.

One of the more interesting ideas popping up in discussion of the Zen Garden has been standardizing a set of markup for weblogs. Since the data types contained within a weblog are pretty consistent across the board with few deviations, a central repository of CSS-based design would be possible. You could design a style sheet for my site without ever having seen it, if our markup matches.

While this wasn’t a goal in either project, a quick bit of inspiration last night led me to try loading some Zen Garden .css files into this site to see what would happen. I’ve made a couple of small changes to mezzoblue’s ids to better illustrate this effect, but each change was in an effort to move to more meaningful names: #rhs became #linkList, and so forth. The fit isn’t perfect due to wildly different data, but hey, it ain’t bad for hijacking style sheets which were never intended for this purpose.

Anyway, enough theory. Take a look:

And a couple of non-official Garden designs that work in this context:


Reader Comments

Jai says:
August 06, 01h

Let me go out on a limb and kind of take a different spin on it than your last few commenters… Although I definitely think it is an interesting and “enlightening” [get it?] experiment, the greater half of my analytical mind simply says:

It’s freakin’ weird, yo!

(mind you, that’s not necessarily a bad thing)

August 06, 01h

It’s all sounds good at one level, but part of the whole thing about blogs surely is that they can be individual. I can go look at a blog, take yours for examaple, and I’ll know immediately which blog I’m reading, without having to look at the url or any title on the page.

This is very handy when I have a bookmark group that I click on whenever I’m checking back on sites, as I don’t have to bother finding out who’s blog I’m reading - I just know.

Having said that, being able to port designs from place to place would be quite cool. As you say, the structure of blogs doesn’t vary too much across the board.

Dave S. says:
August 06, 01h

Weblogs are just one application that I’ve heard mentioned; someone’s bound to do this sooner or later.

The main point though is the portability of presentation, given well-thought-out content/markup. I really have no idea what kind of practical, Real World uses this might have. But it’s really neat.

MikeyC says:
August 06, 03h

“I really have no idea what kind of practical, Real World uses this might have.”

Are you kidding? It would be so handy for those who aren’t too web-saavy. Most people can’t write their own personal stylesheets (and shouldn’t have to either) but still might have difficulty reading text that is too small or uses a color that doesn’t stand-out enough from the background. I personally have difficulty looking at white backgrounds as it quickly becomes painful to my eyes so my personal stylesheet fixes that…not everyone knows CSS tho.

Also, from observing others I’ve noticed that some people have difficulty distinguishing hyperlinks from normal text as the days of “blue and underlined on every site” has gone out the window. Using a single stylesheet would solve this problem and therefore improve useability. I think this idea has great potential and not just in a “gee whiz” kind of way.

5
Chris M. Cooper says:
August 06, 03h

I must have read this whole post completely wrong, but I got the impression that Dave’s idea would allow the end users to control the style of sites with their own style sheets. So I could write a stylesheet that might control the style of several different blogs at once. In this respect, I don’t think this would lead to design theft at all, because the designs might only be seen by one person. Forgive me if I’m wrong, but this was my original thought on the matter.

MikeyC says:
August 06, 03h

Chris: “I must have read this whole post completely wrong, but I got the impression that Dave’s idea would allow the end users to control the style of sites with their own style sheets.”

That, of course, would be possible as well but what Dave proposed is: “a central repository of CSS-based design”.

Personally I don’t understand all the concern over “design theft” as its already possible to just rip off someone’s layout right now–and always has been. This might make theft a bit easier, I am, personally, not too concerned.

redux says:
August 06, 04h

heh…good stuff. the original gothica actually originated from another css project (and in turn that originated from a completely unrelated design i was working on) with only a few ID tweaks as well… :)

8
Didier Hilhorst says:
August 06, 04h

I think I must have missed the point of the whole concept. Either that or I’m just too much of a designer rather than a coder. But apart from dude-next-door-with-weblog using top-notch-of-the-shelve-design what’s the real value of this idea?

Sure, I can see some of the benefits but I would place this in categories such as favelets or other useful tools and wizards. Again it might be just me. I agree the idea has an interesting aspect and it’s certainly worth a try (just look at Dave’s examples).

On a sidenote: seems the preview button is having some difficulties. It just thanks me for posting, however the message was not actually been published.

donny says:
August 06, 05h

Wow, it’s so kool. I love it

Stv. says:
August 06, 06h

Mm..I likes!
Particularly as I’m always stumped for ideas for layout, as well, I’m just not visually creative like that, so I my own site is rather plain. A central repository would be nice, even if just for kicks - let people switch to some other stylesheet, and they can view your site in that design, rather than the piss-poor design you came up with yourself!

August 06, 07h

I’ve been thinking about this for a while. But I’ve never done more than think. You have acted. :P

August 06, 09h

Well, now that I tried tweaking some of my code (and now see that dave’s mezzoblue stylesheet partially works in my site) I notice that converting a site over to a common markup would be a bit of a project.

The main problem with such an idea is that page layout is still somewhat dependent upon structural markup (in my case, nesting elements has been required to position a few things). However, in the bigger picture, these are small issues that can be worked out.

Now I just need to actually figure out how this could be useful outside of being a CSS technology demonstration (which is a good reason in and of itself).

Would it really help other designers?

I suppose that it could be a method to create common layouts for need-to-find-information-fast sorts of users. It would actually be a nice application for corporate sites (I need to download drivers off of seven different manufacturer’s sites - why do I need to learn the navigational logic of seven different sites?)

The only way I could really see it helping someone like me is a means to force me not to touch the basic markup, and try solving most problems using css alone (which is a good challenge).

I’ll have to think about this some more. Although it is a good idea. For now, I might toy with getting my zen garden submission to work as a basic theme for my site. And I might still be interested in actually trying this out. Who knows what it might bring?

Dave S. says:
August 06, 09h

The spirit of exploration is what it’s all about, Kevin. Let us know what you uncover!

Something in me says that there’s a practical application for this, that goes far beyond weblogs. Porting the design from one web-based application to another, user-defined style sheets for controlling preferences web-wide as MikeyC pointed out, and probably plenty of other stuff I’ll never come up with myself. I can’t figure out what to do with it. Hopefully someone reading this will be sparked with an idea that turns into something wonderful.

paul says:
August 06, 09h

ah, the fun you can have separating data and presentation…

i still say each zen entry should say somewhere on the page which style is currently loaded :)

Kevin says:
August 06, 09h

Very cool. I’ve often thought about this. It would definitely make a difference in the weblogging community - although it is unclear to me what the difference would be. Either more people would take up blogging because they are able to have “pretty” sites easier, or it could just make it easier for people to steal good designs.

As for me, I keep meaning to write a better stylesheet than the one I currently have, but I haven’t made the time yet. :)

Dave S. says:
August 06, 09h

Paul - I still say that’s a damn good idea and I wish I’d thought of it 3 months ago. A retro-fit may happen yet. <strong> might be the way to go.

17
Chris M. Cooper says:
August 06, 09h

I’ve got to apologize for my previous lack of attention. I don’t know why I didn’t read the post twice before posting my comment.

Maybe the potential in the project is a style repository for another community blog site, but one where the design templates are standard compliant and more visually engaging than what is currently available. Or maybe I’m too tired to think straight. *shrug*

August 06, 10h

Very nice! I think it’s a good idea too, as there are many ugly blog designs around and this way some good designs may get wider attention. I could try something like this myself…

August 06, 10h

Hi Dave!

It was sort of funny to see my zen garden submission holding your site’s content. However, I must say that I really like your idea! Lately, I’ve been trying to restructure my own site to accept multiple themes (and I already have three). This sort of a project would only take a simple retrofitting of my current markup. If you would be interested, I would like to really try this out with my own site. Perhaps we could discuss this further? I am sure that it wouldn’t take much to agree on a few markup choices.

Feel free to email me at kevin@alazanto.org if you may indeed be interested in giving such an idea a test run.

Adam Rice says:
August 06, 11h

If the work being done on Pie/Echo/Atom/Whatever results in a format that fully encapsulates blog content, you’d be able to run that through XSLT, style that, and avoid the problem of HTML div names and whatnot entirely.

Mark my words, it’ll happen.

August 06, 12h

Good idea, I look forward to the learning opportunities. Just think I could become familiar with one set of content and then look around at the various layouts find out how to position items to my liking - I learn from example not from the w3.org specs!

When I try to figure out why my style sheets don’t work - my normal response is to find a site with the look I want and figure out how they get the code to work then build from there. But it is getting harder to understand how things are done as people expand their css file to upwards of 50 items. A standardized system would be easier to learn and thus easier to deconstruct.

As to people steeling good designs, wouldn’t this type of system be used by people who want to learn from others? i.e. What good is a central repository of CSS-based design if the submitters don’t want people to improve on and modify their concepts.
iolaire

forgetfoo says:
August 07, 01h

thanks, dave ;)

i was just playing around with setting up my own lil ‘fooBlog’ app that would work against emails… since i use email all day long, from all over the place, seemed like a good idea… then the backend system (CF) writes out XML files in RSS 2.0 format, and i have a single XSLT sheet to transform it… etc.

sounds kinda complicated, but it really wasnt too bad…. i’d like to play around with “skinning” via XSLT against xml files for my site, blog (eventually)… just some idle thoughts…

mutagen says:
August 07, 04h

Dave Winer was doing something like this (skinnable blogs) a couple of years ago and it seemed to get a good reception among his editthispage.com community, at least back when I followed it. People could have a decent looking page and personalize it from there, one step at a time.

Of course, you’re going several steps beyond his complete replacement of table based layouts, templates and such with a proposal to standardize across lots of blog software. It also helps with the same message that the zen garden site does, that content should be separated from design and css is one of the best ways to achieve this when delivering to browsers.

I certainly appreciated a decent CSS implementation in the latest blog software I’m using (nucleus) as I’ve yet to have a full understanding of CSS layouts.

August 07, 04h

forgetfoo, or anyone for that matter,

Could you recommend a good XSLT book? I’ve seen one or two, but I’m not sure if they would be a good reference.

forgetfoo says:
August 07, 10h

probably a misplaced comment here, and just an opinion… but tho i think “standardizing” blogs does have it’s merits to many, personally, i’d find myself always keeping an eye open for new innovations on the blogfront… i’d like to see more experimentation with just how many ways a ‘blog’ could be presented… both visually and structurally… whether it be with Flash, DHTML, or just some kick’n CSS…

i think that XSLT is something that’s really gonna take off, and never even thought of transforming an RSS feed with it until recently - just a lil experiment…

Elaine says:
August 07, 10h

Kevin, I like the Wrox XSLT Programmer’s Reference, 2nd Edition; started using it knowing about nothin’ about XSLT, and now I’m nowhere near a wizard (don’t use it often enough), but I feel reasonably competent and know where to look if I don’t know.

Dave S. says:
August 07, 10h

Dude - that XSLT/RSS demo is sweet! XSLT is on my list of toys to play with next, so that may be the push I need to start going.

Jai says:
August 07, 10h

I can’t find a real job as is, and I think that if everything became identical in markup with readily available designs, I’d never find one. As much as the idea is truely wonderful, and it is, I’m a bit nervous about it taking flight. Maybe I can’t see the big picture, but the peices I do see just frighten me a bit.

Does anyone have any idea how this would help create jobs, rather than threaten to sucumb an already dry market? If you can give me that hope, I’d like to hear it!

forgetfoo says:
August 08, 06h

ditto with Elaine… i like Wrox books, tho i mostly use them as reference books when i need to look something up… otherwise, i usually hit Google ;)

as for XSLT, i just read threw the XSL Tutorial on W3Schools.com - went over all the basics and i was up and running with a quick test pretty quickly… hope that helps!

Adam says:
August 12, 11h

You’re such a daggy nerd, Dave
;-)

jon says:
August 13, 04h

i love this. and i have been shamed, for my site works in a similar manner (i.e. you can pass a stylesheet URL to it–see the “style selecta”), but when i apply the zen garden sheets, my sites look nothing but jacked up ;)

of course this is also a function of you being familiar with your stylesheets as well, but you mentioned having consistent data types–i thought i didn’t change mine much from the out of the box MT, but apparently so. oh well i’m a software developer not a designer dangit….

more later–i’m out :)

Jai says:
August 15, 07h

Dude, this may be a bit off topic but… that guy over at your “the dailies” link labeled “oh hello” totally riped off Mezzoblue’s design! Is that legal?!?

(Sorry, I didn’t know where to post this, sine the dailies have no commentability).

February 26, 11h

Those links don’t work no more.