Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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

16.884 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
  • Als Erste(r) kommentieren

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.

×