[ 
https://issues.apache.org/jira/browse/JSPWIKI-504?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=12717064#action_12717064
 ] 

Goran Karlic commented on JSPWIKI-504:
--------------------------------------

Dirk, I looked into OOCSS and I feel that it points into the right direction: 
having a patterns for XML to CSS relations. Nevetheless the code would heavily 
rely on OOCSS and simple things quickly get complicated again. This for example 
is a very simple OOCSS module (taken from the publicly available documentation):

{code:xml} 
<div class="mod"> 
        <b class="top"><b class="tl"></b><b class="tr"></b></b> 
        <div class="inner">
                <div class="hd">
                        <h3>Mod</h3>
                </div>
                <div class="bd">
                        <p>Mod is the basic container, all other containers 
inherit from this one. This is the high performance container that should be 
used unless you specifically need another type of container.</p>
                        <ul class="simpleList">
                                <li>One tiny image</li>
                                <li>Expands to any height or width</li>
                                <li>Compatible with any content</li>
                                <li>Choose for any container object that 
doesn't require outside transparency or complex borders.</li>
                        </ul>
                </div>
        </div>
        <b class="bottom"><b class="bl"></b><b class="br"></b></b> 
</div>
{code:xml} 

Adding a border in CSS is rather complicated here.

In contrast, applying patterns to the problem must result in the conclusion 
that simplest container (glyph) must be a "flyweight"  (see {{GTW}} from 
{{Gamma}}) that inherits from multiple classes (read: is a {{container}}, is a 
{{text container}}, is a {{image container}}).

{code:xml}
<div>Container 1</div>
<div class="container"  />
<div class="container image">
        <img src="A.png" />
</div>
<div class="container text">Text 1...</div>
<div class="container image"><img src="A.png" /></div>
<div class="container text">Image Title</div>
<div class="container text">Text 2...</div>
<div" class="container special" id="specialContainerInstance">Special 
container</div>
{code:xml}

Every instance that needs to be identified has also an {ID}}. HTML elements 
like {{h1}} should be only used if they retain they original (X)HTML meaning. 
Then, in CSS one can then quite fluently build a selector to select almost any 
set of related elements (glyphs):

{noformat}
div.container {display:block;}
div.container.image {float:left;}
div.container.image + div.container.text {clear:right;}
div.container.text {clear:both;}
#specialContainerInstance {color:red;}
{noformat}

When we decide for the solution here, we should also keep in mind, that from 
XHTML various output formats can result (PDF, DocBook, FOP to name few). Thus, 
the XHTML we ouput in JSPWiki should not be much more than XHTML ;-)

> New default look for 3.0
> ------------------------
>
>                 Key: JSPWIKI-504
>                 URL: https://issues.apache.org/jira/browse/JSPWIKI-504
>             Project: JSPWiki
>          Issue Type: Improvement
>          Components: Default template
>            Reporter: Janne Jalkanen
>            Priority: Blocker
>             Fix For: 3.0
>
>
> Folks, I'm kinda tired of our old look.  I would like to propose that we 
> retire the old, plain look (which looks very HTML 2.0) to an optional skin, 
> and adopt a completely new default look to signify the milestone marker to a 
> new life under Apache.
> However, we *do* need the hand of a capable graphic designer on this one.
> Any volunteer helpers?  Feel free to attach your skins as proposals to this 
> issue ;-)

-- 
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.

Reply via email to