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

Chrome Frame aktivieren

Mit <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> wird der Chrome-Frame für IE 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ühr 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 actvie 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)"

j_jsclass

als jQuery-Template hinzugefügt, um class="js" zu verwenden bei aktiviertem JS.
Version
0.0.1-beta3
Typ
Frei
Freigabedatum
24.05.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 0.0.1-beta3
Andere Versionen

0.0.1 beta3

  • box-sizing Ployfill als Alternative zu j_ie7BorderBox

0.0.1 beta2

  • selectivizr auch für mootools
  • respond,js im <head> aufgenommen
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
8
Total Downloads
279
Version Install.
8
Total Install.
384
Version Updates
4
Total Updates
129
Abhängigkeiten dieser Erweiterung
Von dieser abhängige andere Erweiterungen
Name
Version von
Version bis
Contao
3.1.0
3.1.0
Name
Version von
Version bis