Responsive CP .tmpl design mit Bootstrap

[santscho]

Ich beschaeftige mich zur Zeit bisschen mit Twitter Bootstrap und mache mir so Dedanken, wie man ein CP-Template "resonsive" aufbauen müsste.

Hier die theoretische Grundlage für meine ersten Ansätze:
http://twitter.github.com/bootstrap/sca ... responsive

Da ein CP jeweils nur ein Template halten kann (templatename.tmpl) müsste die Auswahl der richtigen scripts und CSS-Dateien für das jeweilige Ausgabegerät mit den "Support Classes" von Bootstrap ausgewählt werden? Die verfügbaren klassen sind: .visible-phone, .visible-tablet, .visible-desktop, .hidden-phone, .hidden-tablet, .hidden-desktop.

Ich kann mir vorstellen, dass es irgendwie so funktionieren könnte (Beispiel CP Teaser)

Code: Select all

<div class="visible-desktop hidden-phone hidden-tablet">
<!--TEASER_HEAD_START//-->
<!--TEASER_ENTRY_START//-->
<!--TEASER_ENTRY_END//-->
<!--TEASER_SPACER_START//-->  
<!--TEASER_SPACER_END//-->
<!--TEASER_FOOTER_START//-->
<!-- CSS: {TEMPLATE}lib/teaser_desktop/teaser_desktop.css -->
<!-- JS: easing --><!-- JS: {TEMPLATE}lib/teaser_desktop.js -->
<!--TEASER_FOOTER_END//-->
</div>
<div class="visible-phone visible-tablet hidden-desktop">
<!--TEASER_HEAD_START//-->
<!--TEASER_ENTRY_START//-->
<!--TEASER_ENTRY_END//-->
<!--TEASER_SPACER_START//-->  
<!--TEASER_SPACER_END//-->
<!--TEASER_FOOTER_START//-->
<!-- CSS: {TEMPLATE}lib/teaser_mobile/teaser_mobile.css -->
<!-- JS: easing --><!-- JS: {TEMPLATE}lib/teaser/mobile/teaser_mobile.js -->
<!--TEASER_FOOTER_END//-->
</div>

Ich kann mir jedoch nicht vorstellen, dass phpwcms die hidden-Klassen als "nicht verarbeiten" verstehen wird. Schliesslich ist das ja nur CSS und kein PHP.

Ideen?

[Oliver Georgi]

Dafür habe ich die Device Selektoren im cms eingeführt. Suche mal danach, irgendwo hier beschrieben.

Gerade gesucht, den Thread hattest Du sogar angestoßen:
http://forum.phpwcms.org/viewtopic.php?f=16&t=22297

[santscho]

Peinlich. Ich werde demnach mal dort weiter forschen und meinen Senf dazu geben...