Neue CSS-Struktur & Funktionen der Designs des Webbaukastens
Einleitung
Wie angekündigt, wurden die CSS-Designs des Webbaukastens generalüberholt und in eine neue Struktur gebracht. Für die Anwender ergeben sich dadurch eine Vielzahl neuer Funktionen und Konfigurationsmöglichkeiten. Auch soll es zukünftig einfacher sein, die Designs an die eigenen Wünsche anzupassen, was durch die Möglichkeit realisiert wurde, zusätzliche Funktionen durch CSS-Module (sog. „basemods“) einfach an- und auszuschalten (nach dem Vorbild des YAML-Frameworks). Module können auch mit geringem Aufwand (und ausreichenden CSS-Kenntnissen) selbst erstellt und integriert werden. Dieser Artikel beschreibt nur den Umfang der Aktualisierung, eine Update-Anleitung finden Sie im Artikel Anleitung zur Durchführung des CSS-Updates.
Neue Funktionen
Eine Vielzahl an gewünschten neuen Funktionen und Änderungen wurde bereits in die neue Version der CSS-Designs integriert.
Begrenzung der Design-Breite bei breiten Bildschirmen
Häufig nachgefragt wurde die Funktion, die Design-Breite (für sehr breite Bildschirme) auf ein Maximum zu beschränken, sodass Textabsätze nicht mehr auf unleserliche Breiten skalieren. Die maximale Breite ist bei fast allen Designs auf 1200px gesetzt. Aktiviert wird die Funktion über das Modul „maxwidth“, welches im NavEditor zukünftig aktiviert werden kann. Alternativ lässt sich das Modul (wie auch alle anderen CSS-Module) direkt in der layout.css durch Entfernen der Kommentarsymbole aktivieren. Folgende Abbildungen zeigen die Funktion für das Design D7 (ohne bzw. mit Beschränkung der Breite):
mobile Designs für Smartphones & co.
Smartphonebenutzer erhalten nun eine neue, für mobile Geräte optimierte Version der verschiedenen Designs des Webbaukastens. Freigeschaltet werden diese Designs mit dem Modul „mediaqueries“, das Modul ist bereits bei allen Designs standardmäßig aktiviert.
Subtemplates
Mit sog. Subtemplates (einer Funktion des YAML-Frameworks) lassen sich nun parallel gelegene Textboxen in fast beliebigen Größenverhältnissen integrieren. Diese sind kompatibel mit verschiedensten Browserversionen und „kollabieren“ automatisch zu untereinanderliegenden Text-Blöcken in mobilen Designs. Diese neue Methode ist in vielerlei Hinsicht einer Lösung mit Tabellen stets vorzuziehen. Eine Anleitung für die Verwendung von Subtemplates befindet sich unter den Musterseiten der neuen Demowebsite.
Wechsel von Farbvarianten & Spaltenzahl des Designs mit nur wenigen Klicks
Die neue Struktur macht es möglich, bei dem aktuell verwendeten Design mit nur wenigen Mausklicks Farbvarianten zu wählen oder die Spaltenzahl des Designs (zwei- oder dreispaltiger Modus) – sofern verfügbar – anzupassen. So lassen sich auch ohne großen Aufwand in Zukunft neue Farbvarianten leicht erstellen und integrieren.
Neue Gestaltung des Newsfeeds
Newsfeeds werden nun standardmäßig übersichtlicher Dargestellt, was durch ein einfaches Zweispalten-Layout realisiert wurde:
Mittels vordefinierter CSS-Klassen lässt sich die Optik der neuen Darstellung auch noch leicht modifizieren. Dazu genügt es das Element mit der Klasse „feedrahmen“ (oder ein darüberliegendes Element) mit der entsprechenden zusätzlichen Klasse zu versehen. Bisher sind die Klassen „fd-gradient“ und „fd-headliner“ definiert und erzeugen folgende Darstellungen:
Das Struktur-Update (nach Vorbild von YAML)
Wer einen Blick hinter die Kulisse wirft wird schnell merken, dass die Ordner- und Dateistruktur der CSS-Dateien grundlegend verändert und an neue Standards angepasst wurde. Zugleich wurden auch die Grafiken neu strukturiert, um wieder etwas Ordnung in das Dateisystem zu bringen.
Update
Das Update ist ab sofort verfügbar und kann unter http://www.vorlagen.uni-erlangen.de/downloads/ direkt heruntergeladen werden. Ein Update auf die neue Version ist in jedem Fall sinnvoll, da zukünftige Designs und Funktionsupdates ebenfalls in der neuen Struktur veröffentlicht werden. Sollte die Gefahr bestehen, dass eigene, bisherige Änderungen an den Designs nicht mit der neuen Version kompatibel sind, lohnt sich eventuell ein Blick in die Dokumentation. Vor der Durchführung des Updates sollte auf jeden Fall ein Backup durchgeführt werden.
Ausblick
In Zukunft sollen mit weiteren Updates Schritt für Schritt neue Webtechnologien eingeführt werden. Das jetzige Update setzt bereits in manchen Teilen auf die Verwendung von CSS3, dies soll in Zukunft weiter ausgebaut werden. Auch über eine Aktualisierung auf HTML5 wird derzeit diskutiert.