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/

moo_fixtouchhover

Mootool Template hinzugefügt um das Hover-Verhalten von Touchpads für span-Elemente in der Navigation zu fixen, Bsp. Flyout-Menü

Chrome Frame aktivieren

Mit <meta http-equiv="X-UA-Compatible" content="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 Elemente #pageslide, .pageslidebutton und .mod_pageslidebutton mittels CSS anpassen
Version
1.4.0
Typ
Frei
Freigabedatum
24.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.4.0
Andere Versionen

1.4.0 stable

  • neu: moo_fixtouchhover
  • neu: xhtm tamplates

1.3.2 stable

  • Verbesserungen Chrome Frame

1.3.1 stable

  • Bugfix

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 [] 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
81
Total Downloads
279
Version Install.
293
Total Install.
384
Version Updates
38
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