Re: [Chicken-users] Centralized documentation

[Peter Bex]

On Tue, Feb 13, 2007 at 05:00:27PM -0500, Alejandro Forero Cuervo wrote:
> * Any improvements to the CSS used by the wiki would be more than
>   welcome. :-)

I've spent a couple of hours hacking the CSS.  The result can be viewed
at http://frohike.homeunix.org/stream-wiki.html
Feel free to snarf the CSS and plug it in the current wiki.

I tried to match the eggdoc default CSS colorscheme.  call/cc.org uses
this colorscheme as well.

This CSS was prepared on the basis of the original HTML as it was found
on the wiki.  I'd give this a huge overhaul, if possible, though.
It's very unsemantic and suffers from a disease webdevelopers call
"divitis", which means there are too many DIVs/SPANs thrown in for no
reason, or as substitutes for UL/OLs.  Also, there is a lot of class abuse.

A small example straight from the source:
<div id="info-box" class="info-box">
  <span class="info-box">
    <a class="info-box" href="xsvnwiki-atom/stream-wiki">XML</a>
  </span>
</div>

1) It's pointless to define both a class and an id on the toplevel DIV.
Just the id should suffice since there's only one info-box on the page, ever.

2) It's pointless to define the same class on all sub-elements of the
info-box.  If you're trying to be generic and target all things of class
info-box (bad name since the id of the thing is also an info-box.  Classes
should rarely, if ever, shadow ids), you'll get into trouble because you're
actually targeting more than you want to target.

3) If I want to target the inner link, I don't have to have a class to
target it:

/* Target the direct descendent of a span which is a direct descendent of
   anything with id info-box and give it the color #666699. */
#info-box > span > a {
   color: #669;
}

Or, more generic:

/* Target any descendent (at any level) below anything with an id of info-box */
#info-box a {
  color: #669;
}

4) If I give the #info-box a font, for example, the span and a will inherit
it from the #info-box.  Anything that isn't defined in #info-box is inherited
from its parent, and so on.  (this doesn't apply to link color and
text-decoration because links have some sort of special status; they're
always colored differently, so you'll have to explicitly target them in CSS)

I hope this info helps.  But please make your HTML code semantically correct,
worry about targeting it with CSS later.  The ids and classes should be
semantically *meaningful*, not simply aids to help you target them in CSS.

If you'd like some more pointers to websites/books to read, let me know.

Regards,
Peter
-- 
http://sjamaan.ath.cx
--
"The process of preparing programs for a digital computer
 is especially attractive, not only because it can be economically
 and scientifically rewarding, but also because it can be an aesthetic
 experience much like composing poetry or music."
                                                        -- Donald Knuth

pgpQxPbfjGsw9.pgp
Description: PGP signature