incubator-jspwiki-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Goran Karlic (JIRA)" <j...@apache.org>
Subject [jira] Commented: (JSPWIKI-504) New default look for 3.0
Date Sun, 07 Jun 2009 17:58:07 GMT

    [ 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.


Mime
View raw message