alps hypertexte

Wie ist hierbei "Standard-Template" zu interpretieren? Im geläufigen Sinne es das Design, mit welchem eine Web-Applikation nach der Erstinstallation erscheint. In diesem Falle ist die Bedeutung noch weiter gefasst: Es ist ein Basis-Theme(-Framework), das auf Anpassungen und Weiterentwicklungen ausgelegt ist.

Ich nenne es deshalb ein "Framework", weil es aus verschiedenen "Schichten" besteht. Und weil es auch auf fapulous basiert. Diese Schichten entstehen aus Notwendigkeiten in der Projekt-Arbeit: die schnelle (und damit kostengünstige) Erstellung und Veränderung bestehenden Codes. Das Entwerfen von XHTML-Mockups zu bestimmten Konstrukten oder die Umstellung des Layout-Typs von fest auf elastisch soll die geringste Entwicklungszeit beanspruchen. So zumindest das Ziel von "adaptation 2010".

Die Schichten

Es gibt verschiedene Schichten im Framework:

1. Reset: Die reset.css setzt alle Werte zurück, um die Browseranpassungszeit zu senken.
2. Basis-Layout: Umfasst die Layout-Arten, Abstände zwischen den Elementen (microPadding, macroPadding etc.) und Typographie.
3. Farben: Alle Text-, Hintergrund-, Rahmen- und Schattenfarben
4. Chrarakter: Alle Besonderheiten, Abweichungen vom Framework und Elemente, die der Website ein individuelles Aussehen geben.

Die Notwendigkeit eines Reset-Stylesheets ist allen Webworkern geläufig. Ich verwende in adaptation bzw. fapulous eine leichte Modifikation von Eric Meyers Reset: :focus wird nicht der Outline entzogen, weil oft vergessen wird, es wieder zu setzen.

Vor den Layout-Anweisungen werden die Typo-Anweisungen in der typo.css geladen, weil einige Layout-Anweisungen in em gesetzt und somit Abhängig von den Anweisungen in typo.css sind. Mit der layout-lib.css und common.css wird der Seite die erste "Form" gegeben. Die erste Form besteht aus Anweisungen fürs Layout, Schriftgrößen und Helferlein wie in der common.css und iehacks.css. Oder auch die tables.css, die für Serendipitys Archive verwendet wird, und die forms.css für das Such- und Kommentarformular.

Das Framework fapulous repräsentiert in adaptation die ersten beiden Schichten. Es regelt die Basis-Form eines jeden Themes. Wenn Abstände (nach Raster), Schriftgrößen oder Layoutspaltenbreiten geändert werden müssen, setzt man an der zweiten Schicht an, die aus folgenden CSS-Dateien besteht:

• /css/fapulous/typo.css
• /css/fapulous/common.css
• /css/fapulous/layout-lib.css
• /css/fapulous/forms.css
• /css/fapulous/tables.css
• /css/fapulous/iehacks.css

Im Falle von Serendipity kommt noch eine CSS-Datei dazu:

• /css/s9y.css

In dieser Datei werden die Layout- und Typo-Anweisungen für Serendipitys Konstrukte gesetzt. Dabei wurde auch neuer Markup (also .tpl-Dateien) fabriziert und die Benennung gleich den fapulous-Konventionen angepasst. Aus .serendipity_entry wurde so s9yEntry ... kürzer im Stylesheet und leichter zu kopieren. Bei den zusammengesetzten Wörtern wurde diese Umbenennung konsequent durchgezogen, so dass ein Zurückstellen der Konvention auf die von Serendipity automatisiert möglich ist. Es wurde aber nicht jede Klasse oder ID umbenannt, da einige in Beziehung zu Komponenten außerhalb des Templating-Systems stehen. Wo immer Unterstriche in CSS-Klassennamen existieren, sind sie also bewusst naturbelassen.

Als dritte Schicht erscheinen dann die Farben von adaptation. Und die sind - der Name ist Programm - kaum gesetzt. Es passt sich weiterhin einem dunklen Desktop-Theme mit einer Negativ-Darstellung an. Auch Linkfarben sind nicht gesetzt. Wer das ändern will, operiert in der /css/s9ycolors.css. Da kann man dem nackten Basisgerüst eine Grundierung verpassen.

Die letzte Schicht, der "Charakter", ist nicht Bestandteil von adaptation 2010. Die ist jedem Designer selbst überlassen. Hier legt man am besten eine eigene CSS-Datei an (oder ein Set in einem eigenen Verzeichnis unter /css).

Man kann diese Aufteilung der Anweisungen in verschiedene Dateien ohne Performance-Nachteil durchführen, wenn Tools wie minify verwendet werden, die beim Abruf der Seite alle Anweisungen in eine Datei zusammenfassen und dabei unnötige Leerzeichen und Kommentare entfernen. Auf der fapulous-Site ist minify schon im Einsatz. Ob ich es adaptation 2010 beilege, überlege ich noch.

Die Layout-Typen

Neu in adaptation 2010 ist, dass man sich den Layout-Typ einstellen kann. Dies geschieht nicht, wie in Bulletproof, durch einen Schalter in der Styles-Ansicht des Adminbereichs, sondern einzig durch die Anordnung der Seitenleisten-Plugins.

Packt man alle Plugins in die linke Seitenleiste ("links") erscheint adaptation als Zwei-Spalter mit einer Sidebar links. Genauso umgekehrt mit rechts. Platziert man Plugins in beide Leisten, erscheint ein 3-Spalter im 50%:25%:25%-Format. Platziert man Plugins nur in der Footer-Leiste ("LEFTF" oder "RIGHTF"), dann nimmt adaptation die ein-spaltige Form an und befördert die Plugins unter den Content.

Faziterei

adaptation ist also kein Theme an sich, sondern mehr eine Ausgangsbasis für eigene Designs. Für Leute, die mehrere Serendipity-Themes pflegen, wäre das eine Lösung, denn ursprünglich möchte ich selber damit in der Lage sein, in 1-2 Tagen ein Weblog-Theme aufzusetzen und dabei auf Änderungswünsche in der Mockup-Phase schnell reagieren zu können, wie in es Make Your Mockup in Markup beschrieben ist. Sich dabei die CSS-Anweisungen in Schichten aufzuteilen, hat sich als sehr produktiv erwiesen, auch wenn es den anfänglichen Überblick bei der Einarbeitung erschwert.

Die Entwicklung von adaptation hält noch an. Funktionieren tut es schon in allen Browsern ab IE 5.01. Ich denke zur Zeit nur über den einen oder anderen "Schalter" nach, den ich noch einbauen könnte. Aber voraussichtlich stelle ich das feature creeping bald ein und schüre ein Paket zusammen .