Your SlideShare is downloading. ×
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-Modell
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

Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-Modell

1,238

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
1,238
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
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. CSS3-Flexbox-Modell Responsive Webdesign Neue Möglichkeiten und Freiheiten mit dem Peter Rozek, ecx.io germany GmbH
  • 2. Peter Rozek, ecx.io germany GmbH Speaker
  • 3. Frontend Entwicklung: Gestern, Heute, Morgen
  • 4. Gestern: float: left/right; clear: both position:relative position:absolute position: fixed
  • 5. Heute: float: left/right; display: flex; clear: both position:relative position:absolute position: fixed
  • 6. Morgen: display: flex;
  • 7. Flexbox unterstützt uns für flexible und skalierbare Layouts.
  • 8. Beliebig positionieren und aneinander ausrichten
  • 9. Reihenfolge verändern ordre display Ohne das HTML-Dokument anzupassen
  • 10. Vertical Alignment
  • 11. Boxen lassen sich nebeneinander in Zeilen, oder untereinander in Spalten anordnen.
  • 12. Elemente lassen in der Höhe, als auch in der Breite nach unterschiedlichsten Verhältnissen anpassen.
  • 13. „Das geht doch auch mit herkömmlichen CSS.“
  • 14. Für komplexere Lösungen wie z.B. “Equal Height Columns” oder “Vertical Alignment” muss man tief in die Trickkiste greifen.
  • 15. Beispiel mit CSS Equal Height Columns
  • 16. <div class="page"> <header>…</header> <div class="wrapper"> <main class="content">...</main> <aside class="sidebar primary">...</aside> <aside class="sidebar secondary">...</aside> </div> <footer>…</footer> </div> <html>
  • 17. {css} .content { width: 60%; float: left; background: #fff; } .sidebar { width: 20%; float: left; } .footer { clear: both; float: none; } Ausrichtung: Design: #content, #footer, .primary, .secondary { padding: 3% 5%; } #header, #footer { background: #0e212e; color: #fff; } .secondary { background: #bbc4c9; } .primary { background: #5f6d7a; }
  • 18. mit CSS und pseudo Selektor Equal Height Columns
  • 19. .content { float: left; } .content, .content:before { width: 60%; } .content:before { content: ''; position: absolute; top: 0; bottom: 0; z-index: -1; left: 0; background: #fff; } .primary, .primary:before { width: 20%; } .primary:before { content: ''; position: absolute; top: 0; bottom: 0; z-index: -1; left: 60%; background-color: #5f6673; } .secondary, .secondary:before { width: 20%; } .secondary:before { content: ''; position: absolute; top: 0; bottom: 0; z-index: -1; left: 80%; background-color: #434750; } {css} .sidebar { float: left; } .wrapper { position: relative; overflow: hidden; } .footer { clear: both; float: none; }
  • 20. http://brm.io/jquery-match-height/ mit jQuery matchHeight.js* Equal Height Columns * matchHeight.js kann auch Responsive
  • 21. <!doctype html> <html lang="de"> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="jquery.matchHeight.js"></script> </head> <html> jQuery Plugin jQuery Libary
  • 22. <html> <div class="page"> <header>…</header> <div class="wrapper"> <main class="content" data-match-height=„items-a">...</main> <aside class="sidebar primary" data-match-height=„items-a">...</aside> <aside class="sidebar secondary" data-match-height=„items-a">...</aside> </div> <footer>…</footer> </div> data Attribute
  • 23. {css} .content { width: 60%; float: left; background: #fff; } .sidebar { width: 20%; float: left; } .footer { clear: both; float: none; } Ausrichtung: Design: #content, #footer, .primary, .secondary { padding: 3% 5%; } #header, #footer { background: #0e212e; color: #fff; } .secondary { background: #bbc4c9; } .primary { background: #5f6d7a; }
  • 24. mit Flexbox einfach smarter Equal Height Columns
  • 25. <html> <div class="page"> <header>…</header> <div class="wrapper"> <main class="content">...</main> <aside class="sidebar primary">...</aside> <aside class="sidebar secondary">...</aside> </div> <footer>…</footer> </div>
  • 26. display: flex; Das ist alles! {css}
  • 27. <html> <div class="page"> <header>…</header> <div class="wrapper"> <main class="content">...</main> <aside class="sidebar primary">...</aside> <aside class="sidebar secondary">...</aside> </div> <footer>…</footer> </div> {css} .wrapper { display: flex; } wrapper = flex container content und sidebar = flex items
  • 28. Vorteil gegenüber float: Nachfolgende Elemente sind von “display: flex“ nicht betroffen und umfließen die Flexbox nicht.
  • 29. clear: both position:relative position:absolute position: fixed Das hier ist nicht mehr notwendig:
  • 30. 1. Floats? Die brauchen wir nicht. ! 2. Layouts, die zuvor eine Herausforderung waren, sind nun verständlicher. ! 3. Wir können wirklich flexible Layouts erstellen und die Berechnungen macht der Browser.
  • 31. Terminologie
  • 32. Properties Elternelement (flex container) Properties Kindelemente display flex-direction flex-wrap flex-flow align-items justify-content align-content order flex-grow flex-shrink flex-basis flex (flex items) (flex items) (flex items)
  • 33. Aufbau Flex Container main axis main start main end cross axis cross start cross end flex items
  • 34. Properties Elternelement
  • 35. ! Flexbox aktivieren http://oneofus.net/2014/04/the-top-ten-starship-captains-of-the-small-screen/
  • 36. display: Definiert das Element als Flex-Container. Elemente darin werden zu Flex-items. flex inline-flex
  • 37. flex-direction: Steuert die Reihenfolge der Element in einer Flexbox. row row-reverse column column-reverse
  • 38. flex-direction: row; 4 3 2 11 2 3 4 4 3 2 1 1 2 3 4 flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse; Syntax:
  • 39. Mehrzeilige Anordnung
  • 40. Legt fest, ob die Elemente in einem Flexbox- Container auf einer Linie liegen, oder bei bedarf auf mehrere Zeilen verteilt werden können. flex-wrap: nowrap wrap wrap-reverse
  • 41. Syntax: flex-wrap: nowrap; flex-wrap: wrap; flex-wrap: wrap-reverse; Die flexiblen Elemente liegen alle in derselben Reihe, auch wenn dazu der Platz fehlt. Die flexiblen Elemente können sich wenn nötig innerhalb des Containers in mehrere Zeilen aufteilen (nach unten). Die flexiblen Elemente können sich wenn nötig innerhalb des Containers in mehrere Zeilen aufteilen (nach oben).
  • 42. Die Kurzschreibweise flex-flow fasst die Eigenschaften flex-direction und flex-wrap zusammen. syntax aus: „flex-direction“ „flex-wrap“ flex-flow
  • 43. .flexitem { flex-flow: row nowrap; } flex-wrap flex-direction
  • 44. Vertikale Ausrichtung von HTML-Elementen innerhalb der Flexbox. align-items: flex-start flex-end center stretch
  • 45. Syntax: align-items: flex-start; align-items: flex-end; align-items: center; align-items: stretch;
  • 46. http://philipwalton.github.io/solved-by-flexbox/
  • 47. Leerraumverteilung
  • 48. Definiert Ausrichtung und Abstand auf der horizontalen. justify-content: flex-start flex-end center space-between space-around
  • 49. Syntax: justify-content: flex-end; justify-content: flex-start; justify-content: center; justify-content: space-between; justify-content: space-around;
  • 50. Legt fest, wo die Elemente in einem Flexbox- Container positioniert sind, oder welchen Abstand sie zueinander haben. align-content: flex-start flex-end center space-between space-around stretch
  • 51. Syntax: align-content: flex-start; 1 2 3 4 5 6 1 2 3 4 5 6 1 2 3 4 5 6 1 2 3 4 5 6 1 2 3 4 5 6 1 2 3 4 5 6 align-content: flex-end; align-content: center; align-content: space-between; align-content: space-around; align-content: stretch;
  • 52. Properties Kindelemente
  • 53. Die Kurzschreibweise flex fasst die Eigenschaften flex-grow, flex-shrink und flex-basis zusammen. syntax aus: „flex-grow“ „flex-shrink“ „flex-basis“ flex
  • 54. .flexitem { flex: 1 1 100px; } flex-shrink flex-basisflex-grow Eigenschaft flex gibt den Flex-items flexible Ausmaße mit.
  • 55. .flex-container { display: flex; } ! .main { flex: 40% 1 2; } ! .primary { flex: 20% 1 1; } ! .secondary { flex: 20% 2 1; }
  • 56. .flexitem { order: 1; } Eigenschaft order ändert die Reihenfolge im HTML-Dokument.
  • 57. .flex-container { display: flex; } ! .main { order: 2; } ! .primary { order: 1; } ! .secondary { order: 3; }
  • 58. http://philipwalton.github.io/solved-by-flexbox/ Flexbox Spielwiese
  • 59. Im Responsive Webdesign spielt Flexbox seine stärken aus.
  • 60. <html> Ausgangslage HTML: <div class=„page flex-container"> <header>…</header> <main class=„content“> <div class=„box“> … </div> … </main> <aside class="sidebar primary">...</aside> <aside class="sidebar secondary“> <div class=„box“> … </div> … </aside> <footer>…</footer> </div>
  • 61. {css} ..flex-container { display: flex; flex-flow: row wrap; } #header { order: 1; } .content { display: flex; flex-flow: column wrap; order: 2; } .primary { order: 4; } .secondary { display: flex; flex-flow: column reverse; order: 3; } #footer { order: 5; } Basis:
  • 62. {css} Responsive: @media screen and (min-width: 48em) { .content { display: flex; flex-flow: row wrap; width: 75%; } .content .box { padding: 0; margin: 0 1em; flex: 1 1 30%; } .primary { width: 25%; padding: 1em 4.833%; order: 3; } .secondary { flex-direction: row; justify-content: space around; padding: 3% 4%; } .secondary .box { padding: 0; margin: 0 1em; } }
  • 63. {css} @media screen and (min-width: 60em) { ! .content .box { flex: 1 1 25%; } ! } Responsive:
  • 64. Flexbox adressiert Multiscreen Experience
  • 65. „Multiscreen is about developing a single application for multiple interfaces – one for each screen type: smartphone, tablet, desktop, and television.“ Ridley Marx
  • 66. John Allsopp, A dao of webdesign: http://alistapart.com/article/dao „It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all. The journey begins by letting go of control, and becoming flexible.“
  • 67. Es geht nicht mehr darum, ein Design pixelgenau umzusetzen, es geht um den Kern des Internets.
  • 68. Kern des Internets: • Transformation • Informations Experience • Accessibility
  • 69. Responsive Webdesign Workflow und Flexbox
  • 70. Konzeption: Mobile und. Content First Development: Progressive Enhancement
  • 71. Graceful degradation Bild: http://carmoderns.blogspot.nl/2012/09/monster-truck.html
  • 72. Content Strategy Bild von: http://samanthatoy.com/style-tiles/
  • 73. Content Wireframes http://support.balsamiq.com/customer/portal/articles/615901
  • 74. Content erstellen Bild von: http://samanthatoy.com/style-tiles/
  • 75. Moodboard / Style Tile Bilder von: http://styletil.es/
  • 76. HTML-Prototyping
  • 77. Testen, testen, testen…
  • 78. Produktion
  • 79. Responsive Workflow https://twitter.com/zeldman/statuses/268066054452953088
  • 80. Kann Flexbox heute schon eingesetzt werden?
  • 81. Ja
  • 82. Coole und smarte Layouts für aktuelle Browser entwickeln.
  • 83. An Fallback Lösungen denken.
  • 84. Browsersupport
  • 85. 11.0 29.0 35.0 7.0* 21.0 Supported teilweise Supported nicht Supported Browsersupport Desktop http://caniuse.com/flexbox * benötigt Vendor-Präfix
  • 86. 11.0 28.0 34.0 7.0* 20.010.0* 27.0 33.0 6.1* 19.09.0 26.0 32.0 6.0* 18.08.0 24.0 31.0 5.1* 17.0 Supported teilweise Supported nicht Supported 29.0 35.0 21.0 http://caniuse.com/flexbox * benötigt Vendor-Präfix
  • 87. 7.0* 5.0-7.0 4.4 10.0* 21.0 35.0 29.0 10.0* Supported teilweise Supported nicht Supported Browsersupport Mobile * benötigt Vendor-Präfix iOS Mini Mobile Andriod Andriod http://caniuse.com/flexbox
  • 88. 7.0* 5.0-7.0 4.4 10.0* 16.0 35.0 29.0 10.0* 6.0-6.1* 4.2-4.3* 7.0* 12.15.0-5.1* 4.1* 12.04.2-4.3* 4.0* 11.5 Supported teilweise Supported nicht Supported 4.0-4.1* 3.0* iOS Mini Mobile Andriod Andriod 26.0*33.0 http://caniuse.com/flexbox 21.0 * benötigt Vendor-Präfix
  • 89. http://developer.android.com/about/dashboards/index.html Verbreitung Android
  • 90. http://david-smith.org/iosversionstats/ Verbreitung iOS
  • 91. Vendor-Präfix für altere Browser
  • 92. .selektor { display: -webkit-box; ! display: -moz-box; ! display: -ms-flexbox; ! display: -webkit-flex; ! display: flex; ! } /* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */ /* OLD: Safari, iOS, Android browser, older WebKit browsers. */ /* NEW, Chrome 21–28, Safari 6.1+ */ /* MID: IE 10 */ /* OLD: Firefox (buggy) */ {css}
  • 93. SCSS macht es Dir einfach
  • 94. @mixin flexbox { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; } ! .flexbox { @include flexbox; } {scss}
  • 95. https://github.com/mastastealth/sass-flex-mixin sass-flex-mixin
  • 96. Modernizr und Flexbox
  • 97. {css} .no-flexboxlegacy .no-flexbox .selektor { /* Angaben wenn keine Flexbox Eigenschaften unterstützt werden. */ }
  • 98. {JS} <script> Modernizr.addTest(’ meinflexbox ‘, function(){ return Modernizr.testAllProps (’ eigenschaft ’); }); </script> Text ob bestimmte Eigenschaften unterstützt werden. Die Klasse „meinflexbox“ wird beim html Start-Tag ergänzt.
  • 99. Pollyfill
  • 100. Flexie ist ein JavaScript Polyfill für die Flexbox, berücksichtigt aber den alten Standard. Flexie http://flexiejs.com/
  • 101. Mach es (anders)
  • 102. Mach es anders als andere (es erwarten). Selbst wenn Deine Aktivität in eine falsche Richtung geht, erhältst Du wertvolle Informationen daraus. Jeder Fehler ist der Beginn einer neuen Idee.
  • 103. Hab Mut zum Experimentieren
  • 104. Flexbox wird kommen
  • 105. Danke, Merci, Thanks
  • 106. Für meine Ellen
  • 107. Fragen ? twitter: @webinterface E-Mail: peter.rozek@ecx.io E-Mail: hello@peter-rozek.de Demos: https://github.com/webinterface/Flexbox

×