CSS Style Sheets need cleanup, optimization and better naming of elements

• Key: FOR-652
• Type: Improvement
• Status: Open
• Priority: Major
• Assignee: Gavin
• Reporter: Gavin
• Component/s: Plugin: internal.dispatcher
• Affects Version/s: 0.8

Description

The current CSS implementation needs a bit of a cleanup, some tweaking and optimization. It needs to be improved and some styles converted to % in order to cater for different browsers and user resolutions. A more fluid design needs to be the outcome. The overall style and look and feel of the current pelt skin is to largely remain the same where possible whilst implementing these improvements. The style sheets are to remain CSS1 valid and aim for CSS2 valid. When XHTML2 is implemented perhaps CSS3 can be achieved.

Comments

A start at making for a more fluid design. Some minor changes to improve fluidity.

[Thorsten Scherler]

http://svn.apache.org/viewcvs.cgi/*checkout*/forrest/events/forrest-friday/20060210-summary.txt
Cheche and Thorsten discussed the horrible CSS in version 0.7 and hoped
that Dispatcher will be better.

http://svn.apache.org/viewcvs.cgi/*checkout*/forrest/events/forrest-friday/20060210-log.txt
[18:50] cheche: I am a bit sad about forrest...
[18:50] cheche: I was doing a web site for a customer
[18:50] tscherler: why?
[18:50] cheche: http://www.cesarnieto.com/
[18:51] cheche: I did it using forrest v.07
[18:51] cheche: and I ask a css programer to help me with the site
[18:51] cheche: I have got an email yesterday from him
[18:52] tscherler: and?
[18:52] cheche: he said that it was the most complex css code that he ever saw
[18:52] cheche: and he quit for the job :-)
[18:53] tscherler: lol
...
[18:53] tscherler: the css was growing
...
[18:55] cheche: well, that was with the old version
[18:55] cheche: is the dispatcher going to help in this way?
...
[19:00] cheche: I am ok with the new changes.
...
[19:02] cheche: xley: can I add www.cesarnieto.com as en example site?
[19:02] xley: better if they do.
[19:02] xley: sure please do
[19:03] cheche: but It has his own skin and a lot of modifications
[19:03] xley: no problem, it is still an example of what can be done.
[19:03] cheche: ok then
[19:04] tscherler: cheche yes and no
[19:04] tscherler: the css codes is not rewritten for the dispatcher
[19:04] tscherler: but it would make sense
[19:05] tscherler: it makes it way easier for a designer to change everything but still you need to do it ;-)
[19:05] tscherler: k
...

[Thorsten Scherler]

We have to fix the css naming for the dispatcher.

http://svn.apache.org/viewcvs.cgi/*checkout*/forrest/events/forrest-friday/20060210-log.txt
[22:50] tscherler: [22:05] _Gav_: What concerns has cheche with this
[22:50] tscherler: he said is way to verbose and I share this concern
...
[22:50] tscherler: pelt has too much css files
...
[22:51] _Gav_: ok, so simplify it to one css file maybe
...
[22:51] tscherler: we should try to have one/two static css and one dynamic css contract
...
[22:52] tscherler: further the naming is sometimes really spacy
[22:52] tscherler: we should follow
...
[22:53] tscherler: http://svn.apache.org/viewcvs.cgi/*checkout*/forrest/trunk/main/webapp/skins/leather-dev/contracts.initial.txt
[22:53] tscherler: when ever possible
[22:53] tscherler: The task involved are:
[22:54] tscherler: 1) reduce css files (merge the files)
...
[22:54] tscherler: 2) rename css elements and the corresponding structurer hooks/contracts

[Sina K. Heshmati]

In an attempt to produce clean markup, with appropriate 'id' and 'class' names, I've tried to capture the markup generated by the legacy skins and the dispatcher/structurer in two different XML files. These two files are intended to deliver an image of the output result produced by Forrest. They'll assist the designers through the markup re-design process.

[Thorsten Scherler]

http://www.oscom.org/events/oscom4/proposals/skins.html
A while ago I did the above presentation about this topic. More or less our container have standard names. A few can be enhanced I have to admit.

http://marc.info/?l=forrest-dev&m=109535294600667&w=2
Is explaining the whole issue as well quite well.

[Sina K. Heshmati]

Markup generated by the Pelt theme could look like this capture.