FreeSkin

Introduction

FreeSkin is a skin developed for support total freedom in TWiki webs design. It's based on FlexibleSkin? , and aims to support:

• layout definition by editing topics with TWiki itself;
• use of standard and efficient web design practices;
• easy internationalization;

FreeSkin was created as a natural evolution of FlexibleSkin? , using the concept of tableless web design, CSS and good practices for web design.

Using FreeSkin requires:

• some knowledge about TWiki;
• knowledge about web design - (X?)HTML and CSS;

Special topics

When using FreeSkin, we have to define layout on special topics, that will generate the elements that, besides one topic content, will create the layout for TWiki.

We have two mandatory special topics:

• FreeSkinPreTopic? : included before the topic's content.
• FreeSkinPosTopic? : included after the topic's content.

Thus, when using FreeSkin, each topic is displayed as following:

To prevent strange behavior when editing the special topics, it's strongly recommended to delimit the piece of those topics that will be included in the layout, like this:

\
---+ Layout definition: FreeSkinPreTopic

This is the layout definition for being put before each topic.

<verbatim>
%STARTINCLUDE%\\
The content goes here ...\\
%STOPINCLUDE%
</verbatim>\

This will prevent the content of being interpreted when viewing the special topics, and allow you to document your design outside the delimited area for it.

Attention: As a design decision, the %META% variable are NOT included from the templates. You can add them to FreeSkinPreTopic or FreeSkinPosTopic (they will not get expanded when viewing those topics, but will do when the topics are included from FreeSkins's templates), and define exactly where you want them.

These META variables are:

• %META{"form"}%
• %META{"attachments"}%
• %META{"moved"}%
• %META{"parent"}%

See TWikiMetaData for special attributes and options for these variables.

There is one problem with META variables: they can be used in a special topic, but they don't get expanded in a web search results, giving us ugly %META% variable appearing in the layout. We will look for some workaround for this problem.

FreeSkin defines some predefined elements. You'll probably want to declare some style definition for them:

• The_"it's a %preview, don't forget to save your changes"_ message is written inside a DIV tag with an id value of "PreviewNote".
• The search results table has the id "SearchResultsTable".
  • The lines with the found topics's headers have a "FoundTopicHeader" class.

Installing

1. Uncompress the distribution package into your TWiki installation directory, and that's it!
2. Create a symbolic link in the templates/ subdirectory, named messages.free.tmpl, pointing to one of the provided translation files, that are also at the t Set SKIN = freeemplate/s subdirectory:
   • messages.free.tmpl.en_US - English
   • messages.free.tmpl.pt_BR - Brazilian Portuguese

Example of creating the symbolic link for Brazilian Portuguese:

In each web were FreeSkin will be used you must set the SKIN variable on the WebPreferences? topic, like this:

[6 spaces]* Set SKIN = free

Recommendations

First of all, create a GraphicDesign topic, to centralize all your layout issues. From there, link to your FreeSkinPreTopic and FreeSkinPosTopic topics.

It's also a good idea to separate menus and style sheets from the mandatory special topics and include the former ones from the latter ones, as you can easily alter this kind of information without the need of search it among layout structure definition.

Think about some means of saving time:

• when declaring background images from a stylesheet, for example, attach the image on the style sheet topic and use %ATTACHURL%/imagename.ext to reference the image.

Example designs

We will post some examples here, prepared for direct use. Please be patient.

For now, you can see FreeSkin running live at:

• http://psl-ba.softwarelivre.org - Bahia State's Free Software Project.
• http://www.enec.org.br/enecomp - Brazilian National Computer Science Students Meeting, 2004 edition.
• http://aside.im.ufba.br - Software Engineering Research Group at Universidade Federal da Bahia.

All of these

Some References

• http://www.tableless.com.br - Brazilian website about tableless web design (in Portuguese).
• http://www.csszengarden.com - Amazing tableless CSS use example.
• http://www.w3c.org/TR/CSS2 - W3C? 's Technical Recommendation for Cascading Style Sheets, level 2.