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

17.173 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
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • ACCESS that WEBSITE Over for All Ebooks (Unlimited) ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... DOWNLOAD FULL EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M }
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • ..............ACCESS that WEBSITE Over for All Ebooks ................ ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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.

×