Das Dokument behandelt die Implementierung des Contao Responsive Grid (CRG) mit dem Schwerpunkt auf der Erstellung responsiver Layouts für Webseiten. Es werden Grundlagen zu Grids und Frameworks erläutert sowie spezifische CSS-Klassen und Media Queries vorgestellt, um Layouts für verschiedene Bildschirmgrößen anzupassen. Abschließend wird auf die Funktionen des Layout-Builders und die Optimierung von Inhalten für mobile Endgeräte eingegangen.

1. RESPONSIVE CONTAO
Teil 2: Das Contao Responsive Grid
Thomas Weitzel think-contao.de
Peter Müller pmueller.de
道
10. Mai 2013
von 10.15 bis 11.15 Uhr

2. think-contao.de
pmueller.de
Wer wir sind

3. Was wir in Teil 2 vorhaben
3
1. Über Grids und Frameworks
2. Das Contao Responsive Grid (CRG)
3. Das CRG in Inhaltselementen
4. Das CRG für Artikel
5. Layout-Builder und CRG in mehrspaltigen Layouts
6. Fazit
Der Layout Builder und Mobile Seitenlayouts werden in Teil 1 vorgestellt

4. Von Papier zum Responsive Grid Framework
Grids und Frameworks

5. sixrevisions.com/web_design/the-960-grid-system-made-easy/

6. Grids sind ein Werkzeug für Grafikdesigner
 Mark Boulton über Grids
 In the context of graphic design, a grid is an instrument for ordering
graphical elements of text and images.
 It’s about mathematics.
Ratios and equations are everywhere in grid system design.
 Grids sind...
 auf deutsch ein "Raster".
 ursprünglich in der Printwelt zu Hause.
 ein gedankliches Konstrukt und haben nichts mit Web oder CSS zu tun.
 ein Werkzeug für Grafikdesigner.
 für Nicht-Grafikdesigner schwierig umzusetzen.

7. Gridlayouts und das Web
 Das Problem mit Grids im Web
 Grundlage für ein Grid ist ein definierte Fläche
 Auf Papier ist das einfach
 Im Web nicht
 Die Lösung war einfach:
Let's pretend we have 960px.

8. Ein von Hand gebautes 960px Grid
 Kein Framework
 Individuelles Grid
 960px als Basis
 Sechs Spalten
 Breite pro Spalte: 160px
 width:145px
 padding-right:15px
thegridsystem.org

9. Grid-Frameworks: 960.gs – der Klassiker
Grid-Frameworks drehen den Design-Prozess um:
Nicht das Layout bestimmt das Grid, sondern das Grid bestimmt das Layout.

10. Ein von Hand gebautes "responsive Grid"
min-width:1100pxmin-width:600pxmin-width:320px
markboulton.co.uk/journal/look-mum-no-gutters

11. Responsive Grid-Frameworks ...
... gibt es wie Sand am Meer.
Und eines davon lernen wir heute kennen.

12. responsive.css (aka grid.css) im Detail
Das Contao Responsive Grid

13. responsive.css – 1. das Fundament
 Datei assets/contao/css/responsive.css (grid.css ab V3.1)
 #wrapper
 width:960px /* Feste Breite von 960px */
 margin: 0 auto
 *[class*="grid"] /* Default margin für die Gridspalten */
 float:left
 margin-right: 10px
 margin-left: 10px
 .mod_article > * /* Default margin für alle Inhaltselemente */
 margin-right: 10px /* Inhaltsbereich Einrückung rechts */
 margin-left: 10px /* Inhaltsbereich Einrückung links */

14. responsive.css – 2. Das Grid wird ein Grid
 Das Grid hat zwölf Spalten:
 .grid1 { width:60px} /* 1. Spalte 60px Spaltenbreite */
 .grid2 { width:140px} /* weitere Spalten plus 2x10px margin */
 .grid3 { width:220px} und .grid4 { width:300px}
 .grid5 { width:380px} und .grid6 { width:460px}
 .grid7 { width:540px} und .grid8 { width:620px}
 .grid9 { width:700px} und .grid10 { width:780px}
 .grid11 { width:860px} und .grid12 { width:940px}
 Dies sind die Grid-Klassen für Inhaltselemente

15. Die Basis: 960px Breite und 12 Spalten
Grafik basiert auf 960.gs

16. responsive.css – 3. Das Grid < 980px
 @media (min-width:768px) and (max-width:979px)
 Viewport kleiner als 980px
 Wrapper schmaler: #wrapper { width:744px; }
 Die Breite der zwölf Spalten werden entsprechend reduziert
 .grid1 { width:42px}
 .grid2 { width:104px}
 .grid3 { width:166px} und .grid4 { width:228px}
 .grid5 { width:290px} und .grid6 { width:352px}
 .grid7 { width:414px} und .grid8 { width:476px}
 .grid9 { width:538px} und .grid10 { width:600px}
 .grid11 { width:662px} und .grid12 { width:724px}

17. responsive.css – 4. Das Grid wird einspaltig
 @media (max-width:767px)
 Viewport unter 768px
 Layout einspaltig (wie beim Layout-Builder)
 Wrapper mit automatischer Breite: #wrapper { width:auto; }
 Die Spalten werden untereinander dargestellt
 *[class*="grid"]
 float: none
 display: block
 width: auto

18. Die Contao-Tools für Chrome
 Vorstellung im Blog
contao.org/de/news/contao-tools-fuer-chrome.html
 Features
 Kategorisierte Linksammlung
 Grid-Overlay für das CRG
 passt sich den Grid-Stufen an
 Installation
 über den Chrome-Webstore

19. Inhaltselemente nebeneinander stellen
Das Grid für Inhaltselemente

20. Drei Elemente nebeneinander. Oops.
Text verschwunden (wird nicht gefloatet)

21. Das Grid für Inhaltselemente
 Im Inhaltselement
 gewünschte Gridklassen grid3 oder grid4 etc. zuweisen
 Summe in einer Zeile muss immer 12 ergeben:
 drei Elemente mit grid4
 vier Elemente mit grid3
 zwei Elemente mit grid6
 ein Element mit grid3 und ein Element mit grid9
 Nach einer Gridzeile muss gecleart werden:
 Nächste Zeile auch floaten, z. B. mit grid12
 Floats clearen, z. B. mit <div class="clear"></div>

22. Das Grid ist von Haus aus responsive
ab 980px
< 980px

23. und das Responsive Grid
Vier mögliche Ansätze
Bilder im Inhaltselement Text

24. 1. Quick and Dirty – in den Bildoptionen
 Bild im Inhaltselement Text
 Die Bildoptionen
 Breite und Höhe in px
 Abstand (diverse Einheiten)
 Gridklassen kann man nur für
das Textelement zuweisen
 Bild im Grid positionieren
 an Gridklassen orientieren
 Bildbreite von 140px
 20px Abstand nach rechts
 entspricht grid2
 passt, ist aber nicht responsive

25. Grafik im Grid – aber nicht responsive
ab 980px
< 980px

26. 2. Bild auslagern in ein Inhaltselement Bild
 Bild in Inhaltselement Bild
 Inhaltselement Bild grid2
 Inhaltselement Text grid10
 Vorteile
 Elemente nebeneinander
 CRG übernimmt die
Anpassung der Grafik
 Eventueller Nachteil
 Text bleibt in Gridspalte
 Fließt nicht unterhalb des
Bildes weiter

27. 3. Bild im Inhaltselement Text per CSS gestalten
 HTML
 <div class="ce_text">
<figure class="image_container" style="padding-right:20px;">
<img src="bild.jpg" width="140" height="">
 Wenn Bild anklickbar: Hyperlink <a> um das <img> herum
 Wenn Bildunterschrift: <figcaption> unterhalb von <img>
 Im großen Grid ab 980px
 .ce_text img { width:140px; margin-right: 20px; }
 entspricht der Gridklasse grid2
 Im kleinen Grid von 768px bis 980px
 .ce_text img { width:104px; margin-right: 20px; }
 entspricht ebenfalls der Gridklasse grid2

28. Perfekt: Bild im Grid und Text fließt

29. 4. Automatisierung mit CSS-Klassen
 Klassen definieren in den Stylesheets
 Klassen für verschiedene Gridbreiten definieren
 Klassennamen zum Beispiel bildgrid 2 oder bildgrid 3
 Im großen Grid ab 980px
 .ce_text.bildgrid2 img { width:140px; margin-right: 20px; }
 .ce_text.bildgrid3 img { width:220px; margin-right: 20px; }
 Im kleinen Grid von 768px bis 979px
 .ce_text.bildgrid2 img { width:104px; margin-right: 20px; }
 .ce_text.bildgrid3 img { width:166px; margin-right: 20px; }
 In den Bildoptionen beim Inhaltselement Text
 definierte CSS-Klasse zuweisen, z. B. bildgrid2, bildgrid3 etc.
 Bildbreite und Abstände optional

30. Das Grid für Artikel

31. Das Grid und mehrere Artikel
 Mehrere Artikel auf einer Seite
 Artikeleigenschaften öffnen
 Gridklassen zuweisen
 Fertig
 Contao erledigt den Rest
 In responsive.css (bzw. grid.css)
 "Remove margin from floated articles"
 "Floated articles can be 20 pixel wider"
 Für Artikel ist grid6 = 480px statt 460px
 Inhaltselemente haben den margin

32. Layout-Builder und Responsive Grid zusammen
Grid und mehrspaltige Layouts

33. Zweispaltiges Layout mit Sidebar rechts
 Breite der Layoutspalte orientiert sich am Grid
 Im Backend: THEME – SEITENLAYOUT – STANDARDSEITENLAYOUT
 Zwei Spalten: Inhalt und rechte Seitenspalte
 Spaltenbreite: 240px
 entspricht grid3 (220px) plus margin (20px)
 definiert die Breite der Layoutspalte im großen Grid

34. Das Grid passt bei > 980px...

35. ... aber noch nicht bei <980px

36. Die Sidebar ist statisch – make it respond
 Die Sidebar ist statisch
 Spaltenbreite ist 240px breit (= grid3)
 Sollte bei Viewport < 980px nur 186px breit sein.
 Passt sich nicht automatisch an, da kleine Gridklasse vergeben wurde.
 Neues Stylesheet erstellen
 Name zum Beispiel
layout-768-979-mr ("mr" steht für #main und #right)
 Media Query
screen and (min-width:768px) and (max-width:979px)
 Zwei neue Styles erstellen
 #container { padding-right: 186px }
 #right { width: 186px }

37. Look Ma. It responds.

38. Fazit: Responsive Contao
1. Layout-Builder ermöglicht responsive Webdesign
 basiert auf "Holy Grail"
 Viewport <768px – einspaltiges Layout mit automatischer Breite
 reicht für viele Websites völlig aus
2. Mobiles Seitenlayout
 Entscheidung "mobile = true" über UA-Sniffing (agents.php)
 ermöglicht anderes HTML für mobile Geräte (Frontend-Module)
 Spezielle Stylesheets nur für mobile Geräte
3. Contao Responsive Grid
 Viewport >980px – Grid mit 960px und 12 Spalten
 Viewport <980px – Grid mit 744px und 12 Spalten
 Viewport <768px – einspaltiges Layout mit automatischer Breite

39. think-contao.de
pmueller.de
Vielen Dank für eure Aufmerksamkeit.