Desenvolvendo Interfaces "Total-Flex"

Apresentação curta sobre o desenvolvimento de interfaces, com enfoque no "flexbox" ou "CSS Flexible Box Layout Module" do CSS3

Transcript

1. Desenvolvendo Interfaces “Total-Flex” Daniel Filho daniel!lho.info
2. @danielfilho
3. ig.com.br front-end developer
4. zofe.com.br co-host
5. makeyou.com core-team front-end engineer
6. danielfilho.github.com eternal apprentice
7. </time>
9. <table />
10. <table width="100%" cellpadding="10" cellspacing="0" border="0"> <tr> <td colspan="2" bgcolor="#777d6a"> <h1>Website Logo</h1> </td> </tr> <tr> <td width="20%" valign="top" bgcolor="#999f8e"> <a href="#">Menu link</a><br> <a href="#">Menu link</a><br> <a href="#">Menu link</a> </td> <td width="80%" valign="top" bgcolor="#d2d8c7"> <h2>Page heading</h2> <p>Here's a two column layout with header and footer</p> <p>The second table row contains the menu and the content column.</p> <p>The third table row creates the footer.</p> </td> </tr> <tr> <td colspan="2" align="center" height="20" bgcolor="#777d6a">Copyright ©</td> </tr> </table> </body>
12. <div />
13. <div class="logo"> <h1>Website Logo</h1> </div> <div class="menu"> <ul> <li><a href="#link" title="Menu link">Menu link</a></li> <li><a href="#link" title="Menu link">Menu link</a></li> <li><a href="#link" title="Menu link">Menu link</a></li> </ul> </div> <div class="main"> <h2>Page heading</h2> <p>Here's a two column layout with header and footer</p> <p>The second table row contains the menu and the content column.</p> <p>The third table row creates the footer.</p> </div> <div class="footer">Copyright ©</div>
14. +semantic
15. <header> <h1>Website Logo</h1> </header> <aside> <nav> <ul> <li><a href="#" title="Menu link">Menu link</a></li> <li><a href="#" title="Menu link">Menu link</a></li> <li><a href="#" title="Menu link">Menu link</a></li> </ul> </nav> </aside> <article> <h2>Page heading</h2> <p>Here's a two column layout with header and footer</p> <p>The second table row contains the menu and the content column.</p> <p>The third table row creates the footer.</p> </article> <footer>Copyright ©</footer>
17. div{ display: table-cell; } div{ display: table-row; }
18. 6 : Math.floor( Math.pow(2, 2.59) );
23. Vamos falar de coisa boa?
24. CSS
25. Flexible Box Layout Module http://www.w3.org/TR/css3-flexbox/
26. Flexbox
27. -webkit-flex; -moz-flex; -ms-flex; -o-flex; display: flex;
28. -webkit-justify-content: {...}; -moz-justify-content: {...}; -ms-justify-content: {...}; -o-justify-content: {...}; justify-content: {...};
29. -webkit-align-items: {...}; -moz-align-items: {...}; -ms-align-items: {...}; -o-align-items: {...}; align-items: {...};
30. code demo 1: alignment
31. code demo 2: sorting and orientation
32. code demo 3: flexibility
33. simurai.com
34. code demo 1: website vs webapp
35. code demo 2: header
36. code demo 3: e-mail webapp
38. danielfilho.info/ /about-me /g /+ /@ /sd /in