RESPONSIVE CONTAOTeil 2: Das Contao Responsive GridThomas Weitzel think-contao.dePeter Müller pmueller.de道10. Mai 2013von ...
think-contao.depmueller.deWer wir sind
Was wir in Teil 2 vorhaben31. Über Grids und Frameworks2. Das Contao Responsive Grid (CRG)3. Das CRG in Inhaltselementen4....
Von Papier zum Responsive Grid FrameworkGrids und Frameworks
sixrevisions.com/web_design/the-960-grid-system-made-easy/
Grids sind ein Werkzeug für Grafikdesigner Mark Boulton über Grids In the context of graphic design, a grid is an instru...
Gridlayouts und das Web Das Problem mit Grids im Web Grundlage für ein Grid ist ein definierte Fläche Auf Papier ist da...
Ein von Hand gebautes 960px Grid Kein Framework Individuelles Grid 960px als Basis Sechs Spalten Breite pro Spalte: 1...
Grid-Frameworks: 960.gs – der KlassikerGrid-Frameworks drehen den Design-Prozess um:Nicht das Layout bestimmt das Grid, so...
Ein von Hand gebautes "responsive Grid"min-width:1100pxmin-width:600pxmin-width:320pxmarkboulton.co.uk/journal/look-mum-no...
Responsive Grid-Frameworks ...... gibt es wie Sand am Meer.Und eines davon lernen wir heute kennen.
responsive.css (aka grid.css) im DetailDas Contao Responsive Grid
responsive.css – 1. das Fundament Datei assets/contao/css/responsive.css (grid.css ab V3.1) #wrapper width:960px /* Fes...
responsive.css – 2. Das Grid wird ein Grid Das Grid hat zwölf Spalten: .grid1 { width:60px} /* 1. Spalte 60px Spaltenbre...
Die Basis: 960px Breite und 12 SpaltenGrafik basiert auf 960.gs
responsive.css – 3. Das Grid < 980px @media (min-width:768px) and (max-width:979px) Viewport kleiner als 980px Wrapper ...
responsive.css – 4. Das Grid wird einspaltig @media (max-width:767px) Viewport unter 768px Layout einspaltig (wie beim ...
Die Contao-Tools für Chrome Vorstellung im Blogcontao.org/de/news/contao-tools-fuer-chrome.html Features Kategorisierte...
Inhaltselemente nebeneinander stellenDas Grid für Inhaltselemente
Drei Elemente nebeneinander. Oops.Text verschwunden (wird nicht gefloatet)
Das Grid für Inhaltselemente Im Inhaltselement gewünschte Gridklassen grid3 oder grid4 etc. zuweisen Summe in einer Zei...
Das Grid ist von Haus aus responsiveab 980px< 980px
und das Responsive GridVier mögliche AnsätzeBilder im Inhaltselement Text
1. Quick and Dirty – in den Bildoptionen Bild im Inhaltselement Text Die Bildoptionen Breite und Höhe in px Abstand (d...
Grafik im Grid – aber nicht responsiveab 980px< 980px
2. Bild auslagern in ein Inhaltselement Bild Bild in Inhaltselement Bild Inhaltselement Bild grid2 Inhaltselement Text ...
3. Bild im Inhaltselement Text per CSS gestalten HTML <div class="ce_text"><figure class="image_container" style="paddin...
Perfekt: Bild im Grid und Text fließt
4. Automatisierung mit CSS-Klassen Klassen definieren in den Stylesheets Klassen für verschiedene Gridbreiten definieren...
Das Grid für Artikel
Das Grid und mehrere Artikel Mehrere Artikel auf einer Seite Artikeleigenschaften öffnen Gridklassen zuweisen Fertig ...
Layout-Builder und Responsive Grid zusammenGrid und mehrspaltige Layouts
Zweispaltiges Layout mit Sidebar rechts Breite der Layoutspalte orientiert sich am Grid Im Backend: THEME – SEITENLAYOUT...
Das Grid passt bei > 980px...
... aber noch nicht bei <980px
Die Sidebar ist statisch – make it respond Die Sidebar ist statisch Spaltenbreite ist 240px breit (= grid3) Sollte bei ...
Look Ma. It responds.
Fazit: Responsive Contao1. Layout-Builder ermöglicht responsive Webdesign basiert auf "Holy Grail" Viewport <768px – ein...
think-contao.depmueller.deVielen Dank für eure Aufmerksamkeit.
Nächste SlideShare
Wird geladen in …5
×

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

15.546 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie
0 Kommentare
3 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
15.546
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
9.402
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
3
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

  1. 1. RESPONSIVE CONTAOTeil 2: Das Contao Responsive GridThomas Weitzel think-contao.dePeter Müller pmueller.de道10. Mai 2013von 10.15 bis 11.15 Uhr
  2. 2. think-contao.depmueller.deWer wir sind
  3. 3. Was wir in Teil 2 vorhaben31. Über Grids und Frameworks2. Das Contao Responsive Grid (CRG)3. Das CRG in Inhaltselementen4. Das CRG für Artikel5. Layout-Builder und CRG in mehrspaltigen Layouts6. FazitDer Layout Builder und Mobile Seitenlayouts werden in Teil 1 vorgestellt
  4. 4. Von Papier zum Responsive Grid FrameworkGrids 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 orderinggraphical 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:Lets 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:15pxthegridsystem.org
  9. 9. Grid-Frameworks: 960.gs – der KlassikerGrid-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:320pxmarkboulton.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 DetailDas 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 SpaltenGrafik 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 Blogcontao.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 stellenDas 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 responsiveab 980px< 980px
  23. 23. und das Responsive GridVier mögliche AnsätzeBilder 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ürdas 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 responsiveab 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 dieAnpassung der Grafik Eventueller Nachteil Text bleibt in Gridspalte Fließt nicht unterhalb desBildes 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 zusammenGrid 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 Beispiellayout-768-979-mr ("mr" steht für #main und #right) Media Queryscreen 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 Contao1. Layout-Builder ermöglicht responsive Webdesign basiert auf "Holy Grail" Viewport <768px – einspaltiges Layout mit automatischer Breite reicht für viele Websites völlig aus2. 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äte3. 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.depmueller.deVielen Dank für eure Aufmerksamkeit.

×