I'm two articles into the CSS series now. OK, well, neither is on the newstand (first lesson: November 2004 Lotus Advisor), and Advisor hasn't even seen the second one yet, but I'm through with them.

I mention this because I'm once again blown away with what you can do with this technology. If you know me (and you may not), you know I'm rather amazingly anal-retentive about how things look.

I'd like to think it's my printing background that makes me care so much but, really, I think it's just the way I'm wired. What's cool about CSS is the power--no, control--you can have over the look and feel of a web page. It's really kind of amazing.

Here's an example...

At the end of my first article I introduce a tease I'll satisfy in the second. I won't go into details, but the two screen shots below are both from pages with exactly the same HTML.

Yes, that's right. Exactly. The same. No difference. Not one character is different between the two pages.

And yet, look at the difference in the pages. One is plain and one is, well, nice. Both use CSS, of course, and that is different between them, but not as much as you'd think. The "bad" one has 24 lines of specifications while the good one has 34. Big deal. I could cut the line count a bit if I needed to, but I don't. It took me about five minutes to go from ugly to pretty.

Really. Five minutes. From chump to champ.

More importantly, I could have changed not only this one page but an entire web site in the same amount of time.

That is power. That's CSS. Very cool.

1. Top Dog09/27/2004 04:00:18 PM

Can't wait to read them!

2. Tom Roberts11/04/2004 09:31:11 PM
Homepage: http://www.wwwebfeet.com

Just wait till you see what I have in the plans for my company's public site next year. And if you haven't run across http://www.csszengarden.com you need to check it out.

Now if only Domino would allow a global web setting (per db perhaps) to use css instead of all the font tags and 16 px images it throws in by default!

Tom Roberts

3. Scott Good11/05/2004 09:09:41 AM
Homepage: http://www.scottgood.com

Ooooooo. That is a great idea. I just saw csszengarden for the first time this week and it is amazing. But your idea is even better because it could give all of us the basis to make that kind of CSS markup available in the real world.

If you look at all their markup--not the CSS but the HTML--you can see that the reason they're able to do such amazing things is because the HTML is so comprehensive--there are so many tags to hang your hat on.

Imagine if Domino had an option like you're talking about where it suppressed all the font tags but, instead, inserted <span> and other tags with IDs and classes we could get handles to with CSS. That would open up a whole new world of flexibility.

Man, my head is kind of reeling with the possibilities. You wouldn't think it would be all that hard for them (Lotus) to do (said like a true customer, with no sense of the actual work involved) and it would be...wow.

That is such a great idea. I wonder who we should tell it to?

Rocky...do you know?

4. Tom Roberts11/05/2004 02:36:09 PM
Homepage: http://www.wwwebfeet.com

From a true customer standpoint, it does sound easy. Domino already has styles for font and paragraph settings. And the Domino storage is essentially xml (document truly only contains name & value pairs (and multi)). It seems like it has all the fundamentals needed to have domino spit out an xslt and xml to format individual documents. And force the user to use styles (if db is tagged for css only) or simply create css for all the styles (to an external css of course), and use inline css instead of font tags everywhere else.

Again, it seems simple because it's not a paradigm shift, but it is a rewrite of the html engine.

I haven't signed up for Lotusphere yet but all this talk and idea exchange is making it harder to resist.

5. Scott Good11/05/2004 02:52:51 PM
Homepage: http://www.scottgood.com

Yep, I'm going to be at Lotusphere again this year. With a little luck I'll be speaking again, too.

After my last post I spent some time chatting with Jim Sanders, one of our guys, about the idea. He added a few more twists that would be nice. In our fantasy world...

1. The table dialog would include places to put tags for rows as well as for the table and individual cells. Also, you could define <th> and <caption> elements.

2. While the Domino engine (when asked) would spew out a standard CSS-tagged HTML for all the elements it currently tags for fonts and such, you could also highlight things like a paragraph or word or character and apply classes and ids to directly to it (more or less like you can to a table cell). These would be converted into <span> or other tags and spewed along with the rest of the HTML, giving developers HUGE flexibility in building CSS applications.

Seemingly minor additions like this could push Domino to be an incredible shortcut--and an incredible tool--for the increasing number of people moving to CSS-based application development.

What I'm starting to wonder is if I can write something to convert Domino HTML to CSS tags. Hmmm....

6. Tom Roberts11/05/2004 04:47:19 PM
Homepage: http://www.wwwebfeet.com

I'm wondering the same thing. My first (admittedly ugly) thoughts were an agent that calls a GetDocumentByURL then starts doing finds and replaces on text. It's ugly and slow already and I haven't even tried writing it.

My next thought was time to learn more about Domino's XML processors. Seems that you could theoretically pipeline the data to html, and bypass the html engine that puts the unwanted stuff in there altogether. I know Rocky's book is supposed to have some good stuff D6 XML processing. Still haven't found a copy at 1/2 Priced Books so I might have to pay full price for it this weekend...

ALSO,
If you haven't picked up any Eric Meyer books (Eric Meyer on CSS and More Eric Meyer on CSS), they're worth getting. He does a great job explaining css stuff and walking through demos of marking stuff up. His latest is this site (http://www.meyerweb.com/eric/tools/s5/ ) with a CSS based slide show system. The HTML behind it is just drop dead simple and gorgeous. It'd be so easy to create a Notes App with each doc being a slide and a view being transformed into one of those pages. Interested in writing a paper or article together on that?

7. Scott Good11/08/2004 09:12:29 AM
Homepage: http://www.scottgood.com

A) YES, I have three or four of Eric Meyer's books and I agree...he is terrific about explaining CSS in ways mortals can understand. He was my inspiration for bringing this same stuff to Lotus Advisor.

B) YES, let's do the database and article on slide shows...that would be fun, interesting and probably a cool thing to put out on OpenNTF or some such place. Good conversation for lunch this week.