Erweiterungen > rwd

RWD Ergänzungen

[rwd]

Miniaturbild

Ergänzungen für Responsive Web Desing

Diese Erweiterung ergänzt Contao um
  • IE7 Border Box für CSS box-sizing: https://github.com/9miles/ie7-box-sizing Alternativ das Polyfill boxsizing.htc: https://github.com/Schepp/box-sizing-polyfill
  • IE6-8 CSS3 media-queries: https://github.com/scottjehl/Respond
  • Skalierung von Image Maps: https://github.com/stowball/jQuery-rwdImageMaps
  • IE6-8 CSS3 Selektoren: http://selectivizr.com/
  • Touchverhalten von Webkit wie a:active
  • Adaptive Images: http://adaptive-images.com/
  • CSS-Normalize als CSS-Reset-Alternative: http://necolas.github.io/normalize.css/
  • Chrome Frame für IE aktivieren
  • class="js" bei aktiviertem JS zu <html> eintragen
  • Off Canvas Navigation mit PageSlide: http://srobbin.com/jquery-plugins/pageslide/

Chrome Frame aktivieren

Mit <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=IExx"> wird der Chrome-Frame für IE Version xx oder kleiner aktiviert. Damit kommen IE-Nutzer in den Genuss der schnellen Rendering-Engine von Chrome: https://developers.google.com/chrome/chrome-frame/

Media Queries

Gerade wenn mobile first entwickelt wird, müssen die Media Queries auch vom IE < 9 beachtet werden. Dazu wird das JS respond.js automatisch eingebunden.

Image Maps

Im Resonsive Web Desing werden Bilder an die Breite des Display angepasst. Beim Einsatz von Imagemaps führt dies zu Problemen. Hier hilft ein entsprechende JS.

CSS3 Selektoren für IE

Viele Pseudoselectoren stehen im IE nicht zur Verfügung. Hier hilft Selectivizr. Die Mootools-Unterstützung ist besser.

Adaptive Images

Für die Adaptive Images muss die .htaccess-Datei angepasst werden. Im Root-Verzeichnis befindet sich eine Vorlage: .htaccess.ai-default.

Touchverhalten

Damit der Tap auf einen Link bei Touchscreens mit Webkit-Browsern (iOS) genauso angezeigt wird, wie die Pseudoklasse :active für Links:
  • Im CSS-Framework: "Reset Tap Highlight Color" auswählen
  • In den jQuery-Templates "j_touchstart" auswählen
  • Einen Style für a:active definieren

IE7 box-sizing:

Für die CSS-Eigenschaft box-sizing stehen zwei Varianten zur Verfügung:
  • per Javascript: j_ie7BorderBox in den jQuery-Templates
  • als CSS-Eigenschaft: "*behavior: url(assets/boxsizing/boxsizing.htc)"
Contao 3.1: bitte beachten http://www.contao-austria.at/blogreader/contao-310-und-css3pie-piehtc.html

j_jsclass

als jQuery-Template hinzugefügt, um <head class="js"> zu verwenden bei aktiviertem JS.

Pageslide

jQuery-Plugin Pageslide hinzugefügt z.B. für Off Canvas Navigation
  • jQuery-Template "j_pageslide" aktivieren
  • Navigations-Modul mit einer CSS-ID versehen
  • PageslideButton als Frontendmodul einrichten und die CSS-ID angeben
  • Navigation mittels CSS display:none ausblenden
  • die Element #pageslide, .pageslidebutton und .mod_pageslidebutton mittels CSS anpassen
Version
1.3.0
Typ
Frei
Freigabedatum
09.07.2013
Kategorie
Plugin
Lizenz
LGPL
Copyright
© 2011 agentur fipps e.K.
Autor
fipps e.K. (fipps) http://www.fipps.de
Freigabe-Notizen und Änderungs-Log für 1.3.0
Andere Versionen

1.3.0 stable

  • chrome frame-Hinweis als inline, overlay, popup

1.2.0 stable

  • j_pageslide für Off Canvas Navigation eingefügt

1.1.0 stable

  • Chrome Frame konfigurierbar im Layout

1.0.0 stable

  • korrigiert: form2.css

0.0.1 RC1

  • korrigiert .htaccess.ai-default

0.0.1 beta3

  • hinzugefügt box-sizing polyfill

0.0.1 beta2

  • hinzugefügt selectivizr for mootools
  • respond,js im <head> hinzugefügt
Version Funktion
 
Total Funktion
0.00
Version Bedienung
 
Total Bedienung
0.00
Version Qualität
 
Total Qualität
0.00
Version Wertung
 
Total Wertung
0.00 (0 Stimmen)
Version Downloads
20
Total Downloads
279
Version Install.
4
Total Install.
384
Version Updates
9
Total Updates
129
Abhängigkeiten dieser Erweiterung
Von dieser abhängige andere Erweiterungen
Name
Version von
Version bis
Contao
3.0.0
3.1.1
Name
Version von
Version bis