Flexbox @ Joomladagen 2017

Flexbox is een krachtige CSS techniek die hand-in-hand samengaat met content management systemen. Het lijkt wel alsof ze voor elkaar gemaakt zijn. En juist in dit tijdperk van responsive design moet een theme flexibel zijn. Deze talk zal laten zien dat het gebruik van Flexbox niet alleen je themes mooier, maar ook robuster zal maken en kan helpen met responsiveness.

Transcript

1. niels leenheer 
 @html5test fl ex box joomladagen 2017
4. joomla?
6. wat is 
 flexbox?
8. assen
9. main axis
10. cross axis
11. start
12. end
13. start
14. end
15. containers en kinderen
16. <ul>
 <!-- hier gaan we items aan toevoegen --> 
 </ul> ul {
 display: flex;
 }
17. start end start end
18. start end start end
19. start end start end
20. start end start end
21. <ul>
 <li class="groen"></li>
 <li class="oranje"></li>
 <li class="rood"></li>
 </ul> ul {
 display: flex;
 }
22. richting
23. ul {
 flex-direction: row;
 }
24. ul {
 flex-direction: row-reverse;
 }
25. ul {
 flex-direction: column;
 }
26. ul {
 flex-direction: column-reverse;
 }
27. uitlijning
28. ul {
 justify-content: flex-start; 
 }
29. ul {
 justify-content: flex-end; 
 }
30. ul {
 justify-content: center; 
 }
31. ul {
 justify-content: space-between; 
 }
32. ul {
 justify-content: space-around; 
 }
33. kruisuitlijning
34. ul {
 align-items: stretch;
 }
35. ul {
 align-items: flex-start;
 }
36. ul {
 align-items: center;
 }
37. ul {
 align-items: flex-end;
 }
38. uitvullen
39. li {
 flex: 0 1 auto;
 }
40. li {
 flex-grow: 0; 
 flex-shrink: 1; 
 flex-basis: auto;
 }
41. li {
 flex-grow: 1;
 }
42. li.rood {
 flex-grow: 2;
 }
43. li {
 flex-shrink: 1;
 }
44. li {
 flex-shrink: 1;
 }
45. li {
 flex-shrink: 1;
 }
46. doorloop
47. li {
 flex-shrink: 0;
 }
48. ul {
 flex-wrap: wrap;
 }
49. li {
 flex-grow: 1;
 }
50. volgorde
51. 1 2 3 li.groen {
 order: 10;
 }
52. 1 2 3 li.rood {
 order: -1;
 }
53. wat kunnen 
 we met 
 flexbox doen?
54. een heleboel
55. flexbox 
 is niet voor 
 pagina opmaak!
56. navigatiebalk
57. <ul>
 <li><a href=“#”>Home</a></li>
 <li><a href=“#”>Programma</a></li>
 ...
 </ul> • Home
 • Programma
 • Sprekers
 • Locatie
58. li { display: inline-block;
 } Home Programma Sprekers Locatie
59. li { display: inline-block;
 } Home Programma Sprekers Locatie
60. ul { text-align: center;
 } Home Programma Sprekers Locatie
61. li { width: 25%;
 } Home Programma Sprekers Locatie
62. li { width: 25%;
 } Home Programma Sprekers Locatie
63. Home Programma Sprekers Locatie ul { display: flex;
 justify-content: space-between;
 }
 
 li {
 flex: 0 0 auto;
 }
64. ul { display: flex;
 justify-content: space-between;
 }
 
 li {
 flex: 0 0 auto;
 } Home Programma Sprekers Locatie
65. li {
 flex: 0 0 auto;
 } Home Programma Sprekers Locatie Tickets
66. Home Programma Sprekers Locatie Tickets li {
 flex: 0 0 auto;
 }
67. ul { justify-content: center;
 }
 
 li {
 flex: 1 0 auto;
 } Home Programma Sprekers Locatie Tickets
68. ul { justify-content: center;
 }
 
 li {
 flex: 1 0 auto;
 } Home Programma Sprekers Locatie Tickets
69. Home Programma Sprekers Locatie Tickets
70. Home Programma Sprekers Locatie Tickets
71. Home Programma Sprekers Locatie Tickets
72. Home Programma Sprekers Locatie Tickets
73. Home Programma Sprekers Locatie Tickets
74. Home Programma Sprekers Locatie Tickets li#tickets {
 flex: 0 0 auto;
 }

75. @media (min-width: 25em) {
 li { flex: 0 0 auto; }
 li#tickets {
 margin-left: auto;
 }
 } Home Programma Sprekers Locatie Tickets
76. @media (min-width: 25em) {
 li { flex: 0 0 auto; }
 li#tickets {
 margin-left: auto;
 }
 } Home Programma Sprekers Locatie Tickets
77. Home Programma Sprekers Locatie Tickets
78. Home Programma Sprekers Locatie Tickets
79. Home Programma Sprekers Locatie Tickets
80. Home Programma Sprekers ul {
 flex-wrap: wrap;
 } Locatie Tickets
81. Home Programma Sprekers ul {
 flex-wrap: wrap;
 } Locatie Tickets
82. @media (max-width: 32em) { li {
 flex: 0 0 50%;
 } } Home Programma Sprekers Locatie Tickets
83. @media (max-width: 32em) { li {
 flex: 0 0 50%;
 } } Home Programma Sprekers Locatie Tickets
84. zoekbalk
85. <form>
 <input type=text placeholder="Zoeken">
 <button type=submit>Zoek</button> </form>
 Zoek Zoeken naar artikelen
86. <form>
 <input type=text placeholder="Zoeken">
 <button type=submit>Zoek</button> </form>
 Zoek Zoeken naar artikelen
87. <form>
 <input type=text placeholder="Zoeken">
 <button type=submit>Zoek</button> </form>
 Zoek Zoeken naar artikelen
88. <form>
 <input type=text placeholder="Zoeken">
 <button type=submit>Zoek</button> </form>
 Zoek Zoeken naar artikelen
89. Zoek Zoeken naar artikelen Zoek Zoeken naar artikelen Zoek Zoeken naar artikelen input { width: 85%; }
 button { width: 15%; }
90. Zoeken naar artikelen Zoeken naar artikelen Zoeken naar… Zoek Zoek Zoek form { padding-right: 60px; }
 input { width: 100%; }
 button { position: absolute; right: 0; }
91. Zoeken naar artikelen Zoeken naar artikelen Zoeken naar… Zoeken Zoeken Zoeken form { padding-right: 60px; }
 input { width: 100%; }
 button { position: absolute; right: 0; }
92. form {
 display: flex;
 } Zoek Zoeken naar artikelen
93. input {
 flex: 1 1 auto;
 } Zoek Zoeken naar artikelen
94. input {
 flex: 1 1 auto;
 } Zoek Zoeken naar artikelen
95. input {
 flex: 1 1 auto;
 } Zoeken Zoeken naar artikelen
96. input {
 flex: 1 1 auto;
 } Zoeken Zoeken naar artikelen
97. input {
 width: 0%;
 flex: 1 1 auto;
 } Zoeken Zoeken naar…
98. metadata
99. <dl class=“article-info”>
 <dd class=“createdby”>Geschreven door Niels Leenhe <dd class=“create”>1 april 2017</dd>
 </dl>
 1 april 2017 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac sapien at orci ornare finibus et eu ex. Aenean pulvinar suscipit sem ut tempor. Vestibulum augue nunc, facilisis vitae finibus ac, gravida at odio. In tincidunt aliquet justo, ut Lorem ipsum dolor Geschreven door Niels Leenheer
100. dl { overflow: hidden; }
 dd.createdby { float: left; }
 dd.created { float: right; } Lorem ipsum dolor 1 april 2017 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac sapien at orci ornare finibus et eu ex. Aenean pulvinar suscipit sem ut tempor. Vestibulum augue nunc, facilisis vitae finibus ac, gravida at odio. In tincidunt aliquet justo, ut Geschreven door Niels Leenheer
101. dl { overflow: hidden; }
 dd.createdby { float: left; }
 dd.created { float: right; } Lorem ipsum dolor Geschreven door Niels Leenheer 1 april 2017 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac sapien at orci ornare finibus et eu ex. Aenean pulvinar suscipit sem ut tempor. Vestibulum augue nunc,
102. dl { overflow: hidden; }
 dd.createdby { float: left; }
 dd.created { float: right; } Lorem ipsum dolor Geschreven door Niels Leenheer 1 april 2017 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac sapien at orci ornare
103. dl { 
 display: flex; 
 justify-content: space-between; 
 } Lorem ipsum dolor Geschreven door Niels Leenheer 1 april 2017 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac sapien at orci ornare
104. dl { 
 display: flex; 
 justify-content: space-between; 
 } Lorem ipsum dolor Geschreven door Niels Leenheer 1 april 2017 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac sapien at orci ornare finibus et eu ex. Aenean pulvinar suscipit sem ut tempor. Vestibulum augue nunc,
105. dl { 
 display: flex; 
 justify-content: space-between; 
 } 1 april 2017 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac sapien at orci ornare finibus et eu ex. Aenean pulvinar suscipit sem ut tempor. Vestibulum augue nunc, facilisis vitae finibus ac, gravida at odio. In tincidunt aliquet justo, ut Lorem ipsum dolor Geschreven door Niels Leenheer
106. tabs
107. li {
 padding: 2em 10em;
 display: inline-block;
 } Vrijdag 31 maart Zaterdag 1 april Zondag 2 april
108. li {
 padding: 2em 10em;
 display: inline-block;
 } Vrijdag 31 maart Zaterdag 1 april Zondag 2 april
109. li {
 padding: 2em 10em;
 display: inline-block;
 } Vrijdag 31 maart Zaterdag 1 april Zondag 2 april
110. ul { display: flex; }
 li { flex: 1 1 auto; } Vrijdag 31 maart Zaterdag 1 april Zondag 2 april
111. ul { display: flex; }
 li { flex: 1 1 auto; } Vrijdag 31 maart Zaterdag 1 april Zondag 2 april
112. li.today { order: -1; } Vrijdag 31 maart Zaterdag 1 april Zondag 2 april
113. blokken
114. <div class="blocks">
 <div class="block"> ... </div>
 <div class="block"> ... </div>
 </div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac sapien at orci ornare finibus et eu ex. Aenean pulvinar suscipit sem ut tempor. Vestibulum augue nunc, facilisis vitae finibus ac, gravida at odio.
115. .block {
 height: 10em;
 } Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac sapien at orci ornare finibus et eu ex. Aenean pulvinar suscipit sem ut tempor. Vestibulum augue nunc, facilisis vitae finibus ac, gravida at odio.
116. .block {
 height: 10em;
 } Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt aliquet justo, ut blandit leo aliquet a. Nunc faucibus sem ac sem euismod vulputate. Nunc eleifend velit eu porta lacinia. Vestibulum augue nunc, facilisis vitae finibus ac, gravida at odio.
117. .block {
 height: 10em;
 overflow: hidden;
 } Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt aliquet justo, ut blandit leo aliquet a. Nunc faucibus sem ac sem euismod vulputate. Nunc Vestibulum augue nunc, facilisis vitae finibus ac, gravida at odio.
118. .block {
 min-height: 10em;
 } Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt aliquet justo, ut blandit leo aliquet a. Nunc faucibus sem ac sem euismod vulputate. Nunc eleifend velit eu porta lacinia. Vestibulum augue nunc, facilisis vitae finibus ac, gravida at odio.
119. .blocks {
 display: flex;
 } Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt aliquet justo, ut blandit leo aliquet a. Nunc faucibus sem ac sem euismod vulputate. Nunc eleifend velit eu porta lacinia. Vestibulum augue nunc, facilisis vitae finibus ac, gravida at odio.
120. en nog 
 veel meer!
121. is flexbox
 veilig om te
 gebruiken?
122. ja*
123. drie specificaties display: box;
 display: flexbox;
 display: flex;
124. prefixes display: -webkit-box;
 display: -moz-box;
 display: box; display: -ms-flexbox; display: -webkit-flex;
 display: flex;
125. browser support 29 28 9 12.1 12 11 laatste specificatie, unprefixed *
126. browser support 21 28 6.1 12.1 12 11 laatste specificatie, inclusief prefixes *
127. browser support 4 2 3.1 12.1 12 10 eerdere specificaties, inclusief prefixes *
128. progressive 
 enhancement
129. Zoeken naar artikelen Zoeken naar artikelen Zoeken naar… Zoek Zoek Zoek form { padding-right: 60px; }
 input { width: 100%; }
 button { position: absolute; right: 0; }
130. form { padding-right: 60px; }
 input { width: 100%; }
 button { position: absolute; right: 0; } @supports(display: flex) { form { display: flex; padding-right: 0; } input { width: 0%; flex: 1 1 auto; } button { position: static; } }
131. browser support 29 28 9 12.1 12 laatste specificatie, unprefixed, in combinatie met @supports
132. en mijn 
 grid systeem 
 dan?
133. grids zijn perfect
 voor pagina opmaak
134. grids zijn perfect
 voor pagina opmaak flexbox is ideaal 
 voor componenten
135. bootstrap 4 <div class="d-flex justify-content-start">
 <div class="p-2">A</div>
 <div class="p-2">B</div>
 <div class="p-2 ml-auto">C</div>
 </div>
137. bedankt! @html5test