Implementierung von http://adapt.960.gs in Contao

ck_adapt implementiert ein flexibles, responsives Gridsystem auf Basis des 960.gs in Contao.

ck_adapt bringt ein Set von CSS-Dateien mit, mit denen diverse Bildschirmauflösungen - von Mobilgeräten bis hin zu sehr großen Monitoren - mit einem jeweils passenden Grid versorgt werden können.

Bei Änderungen des Viewports lädt ck_adapt passende CSS-Dateien zur Laufzeit nach, so dass eine Anpassung des Grids auf die zur Verfügung stehende Auflösung erfolgt.

Manual

a. Installation

Entweder die Extension hier laden oder eine aktuelle Version von https://github.com/kikmedia/ck_adapt als Zip-File laden. In diesem Fall die Ordner in die Contao-Struktur integrieren.

Ein Datenbankupdate ist nicht erforderlich.

b. Integration ins Seitenlayout

Nach aktivieren des Templates moo_adapt im Seitenlayout steht die zur Verfügung. Contao kümmert sich selbst um die entsprechende HTML5 / XHTML-Version.

c. Grid-Classes

Um die Funktionen von Adapt nutzen zu können müssen Seiten, Artikel, Module und/oder Inhaltselemente mit gridbezogenen .class-Attributen versehen werden. Eine Einführung in die Arbeit mit dem 960.gs findet sich unter http://960.gs

d. Funktionsweise

ck_adapt ergänzt das #wrapper-Element um class="container_12" . In einer späteren Version wird diese Funktion konfigurierbar sein.

Nach Aktivierung im Seitenlayout lädt ck_adapt in Abhängigkeit der jeweilgen Bildschirmauflösung eine CSS-Datei, die eine Gridfunktion implementiert. Im Augenblick sind die folgenden CSS-Dateien enthalten (Viewport / File):

• '0px bis 760px = mobile.css',
• '760px bis 980px = 720.css',
• '980px bis 1280px = 960.css',
• '1280px bis 1600px = 1200.css',
• '1600px bis 1940px = 1560.css',
• '1940px bis 2540px = 1920.css',
• '2540px = 2520.css'  

ck_adapt stellt diese CSS-Dateien nicht nur beim Laden der Seite einmalig zur Verfügung sondern berücksichtigt auch Änderungen der Größe des Viewports und lädt dann die entsprechende Datei dynamisch hinzu.

e. Nachteile

Wie jedes Javascript-basierte Plugin funktioniert adapt.js nur, wenn JS auch im Browser aktiviert ist. Auf der anderen Seite richtet es ohne JS  keinen Schaden an.

f. Wiki & mehr

Wiki: http://contao-forge.org/projects/ckadapt/wiki/Wiki
Bugtracker: http://contao-forge.org/projects/ckadapt/issues
Git: https://github.com/kikmedia/ck_adapt