• Save
Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 2
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 8,613 views

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.

Statistics

Views

Total Views
8,613
Views on SlideShare
4,155
Embed Views
4,458

Actions

Likes
1
Downloads
0
Comments
0

3 Embeds 4,458

http://ck2013.think-contao.de 2757
http://pmueller.de 1397
http://www.ck2013.think-contao.de 304

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • RESPONSIVE CONTAOTeil 2: Das Contao Responsive GridThomas Weitzel think-contao.dePeter Müller pmueller.de道10. Mai 2013von 10.15 bis 11.15 Uhr
  • 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. Das CRG für Artikel5. Layout-Builder und CRG in mehrspaltigen Layouts6. FazitDer Layout Builder und Mobile Seitenlayouts werden in Teil 1 vorgestellt
  • 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 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.
  • 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.
  • 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
  • Grid-Frameworks: 960.gs – der KlassikerGrid-Frameworks drehen den Design-Prozess um:Nicht das Layout bestimmt das Grid, sondern das Grid bestimmt das Layout.
  • Ein von Hand gebautes "responsive Grid"min-width:1100pxmin-width:600pxmin-width:320pxmarkboulton.co.uk/journal/look-mum-no-gutters
  • 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 /* 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 */
  • 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
  • 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 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}
  • 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
  • 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
  • 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 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>
  • 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 (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
  • Grafik im Grid – aber nicht responsiveab 980px< 980px
  • 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
  • 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
  • Perfekt: Bild im Grid und Text fließt
  • 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
  • Das Grid für Artikel
  • 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
  • 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 – STANDARDSEITENLAYOUT Zwei Spalten: Inhalt und rechte Seitenspalte Spaltenbreite: 240px entspricht grid3 (220px) plus margin (20px) definiert die Breite der Layoutspalte im großen Grid
  • 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 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 }
  • Look Ma. It responds.
  • 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
  • think-contao.depmueller.deVielen Dank für eure Aufmerksamkeit.