Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 2

Ad

RESPONSIVE CONTAO
Teil 2: Das Contao Responsive Grid
Thomas Weitzel think-contao.de
Peter Müller pmueller.de
道
10. Mai 201...

Ad

think-contao.de
pmueller.de
Wer wir sind

Ad

Was wir in Teil 2 vorhaben
3
1. Über Grids und Frameworks
2. Das Contao Responsive Grid (CRG)
3. Das CRG in Inhaltselement...

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Nächste SlideShare
Contao und CSS
Contao und CSS
Wird geladen in …3
×

Hier ansehen

1 von 39 Anzeige
1 von 39 Anzeige

Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 2

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.

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.

Anzeige
Anzeige

Weitere Verwandte Inhalte

Anzeige

Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 2

  1. 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. 2. think-contao.de pmueller.de Wer wir sind
  3. 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. 4. Von Papier zum Responsive Grid Framework Grids und Frameworks
  5. 5. sixrevisions.com/web_design/the-960-grid-system-made-easy/
  6. 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. 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. 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. 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. 10. Ein von Hand gebautes "responsive Grid" min-width:1100pxmin-width:600pxmin-width:320px markboulton.co.uk/journal/look-mum-no-gutters
  11. 11. Responsive Grid-Frameworks ... ... gibt es wie Sand am Meer. Und eines davon lernen wir heute kennen.
  12. 12. responsive.css (aka grid.css) im Detail Das Contao Responsive Grid
  13. 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. 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. 15. Die Basis: 960px Breite und 12 Spalten Grafik basiert auf 960.gs
  16. 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. 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. 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. 19. Inhaltselemente nebeneinander stellen Das Grid für Inhaltselemente
  20. 20. Drei Elemente nebeneinander. Oops. Text verschwunden (wird nicht gefloatet)
  21. 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. 22. Das Grid ist von Haus aus responsive ab 980px < 980px
  23. 23. und das Responsive Grid Vier mögliche Ansätze Bilder im Inhaltselement Text
  24. 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. 25. Grafik im Grid – aber nicht responsive ab 980px < 980px
  26. 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. 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. 28. Perfekt: Bild im Grid und Text fließt
  29. 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. 30. Das Grid für Artikel
  31. 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. 32. Layout-Builder und Responsive Grid zusammen Grid und mehrspaltige Layouts
  33. 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. 34. Das Grid passt bei > 980px...
  35. 35. ... aber noch nicht bei <980px
  36. 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. 37. Look Ma. It responds.
  38. 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. 39. think-contao.de pmueller.de Vielen Dank für eure Aufmerksamkeit.

×