FreeSkin < TWiki

---+!! FreeSkin

%TOC%

------

---++ 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 Free<nop/>Skin 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:

   * Sandbox.FreeSkinPreTopic: included *before* the topic's content.
   * Sandbox.FreeSkinPosTopic: included *after* the topic's content.

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

<div style='border: 1px solid black;'>
  <div style='background: #e0e0e0; color: black;'><nop/>FreeSkinPreTopic content</div>
  <div style='background: white; color: black;'>Topic content (%<nop/>TEXT%)</div>
  <div style='background: #e0e0e0; color: black;'><nop/>FreeSkinPosTopic content</div>
</div>

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:

<div style='border: solid black 1px; background: #e0e0e0; color: black;'>
<tt><pre>\
<nop/>---+ Layout definition: <nop/>FreeSkinPreTopic

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

&lt;verbatim>
%<nop/>STARTINCLUDE%\\
The content goes here ...\\
%<nop/>STOPINCLUDE%
&lt;/verbatim>\
</pre></tt>
</div>

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 %<nop/>META% variable are *NOT* included
from the templates. You can add them to Free<nop/>SkinPreTopic or Free<nop/>SkinPosTopic
(they will not get expanded when viewing those topics, but will do when the
topics are included from Free<nop/>Skins's templates), and define exactly where you
want them.

These META variables are:

   * %<nop/>META{"form"}%
   * %<nop/>META{"attachments"}%
   * %<nop/>META{"moved"}%
   * %<nop/>META{"parent"}%

See TWiki.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
%</nop>META% variable appearing in the layout. We will look for some workaround
for this problem.

%I% 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 "Preview<nop/>Note". 
   * The search results table has the id "Search<nop/>ResultsTable".
      * The lines with the found topics's headers have a "Found<nop/>TopicHeader" class.

---++ Installing 

   1 Uncompress the distribution package into your TWiki installation directory, and that's it!
   1 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:

<div style='background: #e0e0e0; color: black;'><tt>
$ ln -s messages.free.tmpl.pt_BR messages.free.tmpl
</tt></div>

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

<strong><tt>[6 spaces]* Set SKIN = free</tt></strong>

---++ Recommendations

First of all, create a Graphic<nop/>Design topic, to centralize all your layout
issues. From there, link to your Free<nop/>SkinPreTopic and Free<nop/>SkinPosTopic 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 %</nop>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.
This topic: TWiki > Sandbox? > FreeSkin
Topic revision: r1 - 30 Nov 2003 - 20:45:00 - DoidoMaluco?
Copyright � by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback
Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.FreeSkin