In Teil 2 der Präsentation "Responsive Contao" stellen Peter Müller und Thomas Weitzel das "Contao Responsive Grid" vor. In Teil 1 ging es um den Responsive Layout Builder, den Holy Grail und mobile Seitenlayouts.

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.