Your SlideShare is downloading. ×
Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

11,873

Published on

In Teil 2 der Präsentation "Responsive Contao" stellen Peter Müller und Thomas Weitzel das "Contao Responsive Grid" vor. …

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
11,873
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. think-contao.depmueller.deWer wir sind
  • 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. Von Papier zum Responsive Grid FrameworkGrids 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 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. 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. 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. 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. Ein von Hand gebautes "responsive Grid"min-width:1100pxmin-width:600pxmin-width:320pxmarkboulton.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 DetailDas 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 SpaltenGrafik 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 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. Inhaltselemente nebeneinander stellenDas 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 responsiveab 980px< 980px
  • 23. und das Responsive GridVier mögliche AnsätzeBilder 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ü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. Grafik im Grid – aber nicht responsiveab 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 dieAnpassung der Grafik Eventueller Nachteil Text bleibt in Gridspalte Fließt nicht unterhalb desBildes 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 zusammenGrid 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 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. Look Ma. It responds.
  • 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. think-contao.depmueller.deVielen Dank für eure Aufmerksamkeit.

×