CSS Layout w/ HTML5 & CSS3

Transcript

1. CSS Layout WITH
2. HTML5 The 5th revision of HTML CSS3 New JavaScript APIs + +
3. CSS3
4. https://en.wikipedia.org/wiki/HTML5
5. Semantics Connectivity Offline & Storage Multimedia 3D graphics & effects Performance & Integration Device Access Styling https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
6. Semantics Styling
7. Semantics Styling <header>, <footer>, <article>, <section>, <aside>, <nav>, <figure>, <audio>, <video>, …
8. Semantics Styling body div id=“header” div id=“sidebar” div id=“content” div class=“article” div class=“article” div id=“footer” body header aside section article article footer HTML4 HTML5
9. Semantics Styling <!DOCTYPE html> Simplified DOCTYPE
10. Semantics Styling <!DOCTYPE html> Compare with HTML 4.01: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3c.org/TR/html4/strict.dtd”> Simplified DOCTYPE
11. Semantics Styling
12. Semantics Styling
13. Semantics Styling
14. https://en.wikipedia.org/wiki/Cascading_Style_Sheets
15. • Selector • Box Model • Backgrounds & Border • Text Effects • 2D/3D Transformations • Animations • Multiple Column Layout
16. box-radius: 5px; Box radius
17. box-radius: 50%; Box radius
18. box-shadow: 1px 1px 0px pink; Box shadow
19. box-shadow: 1px 1px 0px pink, -1px -1px 0px green; Box shadow
20. text-shadow: 1px 1px 0px pink; Hello Hello Text shadow
21. h1:before, h1:after { content: “*”; color: pink; } *Hello* Pseudo elements
22. @font-face { font-family: “PilGi”; src: “PilGi.otf”; } h1 { font-family: “PilGi”; } Hello Web fonts
23. #container { background: #fff; display: flex; width: 900px; height: 400px; } Flexible Boxes #container
24. Flexible Boxes #container #main { background: pink; } #right-col { background: green; } #main #right-col #container { background: #fff; display: flex; width: 900px; height: 400px; }
25. Flexible Boxes #container #main { background: pink; width: 600px; } #right-col { background: green; } #main #right-col #container { background: #fff; display: flex; width: 900px; height: 400px; }
26. Flexible Boxes #container #main { background: pink; width: 600px; } #right-col { background: green; flex: 1; } #main #right-col #container { background: #fff; display: flex; width: 900px; height: 400px; }
27. Transitions div { width: 100px; } div:hover { width: 800px; }
28. Transitions div { width: 100px; } div:hover { width: 800px; }
29. Transitions div { width: 100px; transition: width 2s ease-in-out; } div:hover { width: 800px; }
30. Transitions div { width: 100px; transition: width 2s ease-in-out; } div:hover { width: 800px; }
31. Transforms Hi div { transform: rotate(45deg); }
32. Don’t forget vendor prefixes -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);
33. Preprocessors
34. Preprocessors .css .css .styl .sass .scss .less Myth Less Sass Stylus Postcss
35. Preprocessors
36. Question?
37. CSS Layout
38. FLEXBOX
39. 10+ 22+ 21+ 6.1+ 12.1+ http://caniuse.com/#search=flexbox -webkit-
40. DEFINITION The main idea is to give the “container” the ability to change the width & height of its children to best fill the blank space and prevent overflow.
41. TERMINOLOGY Flex Container 1 2 3 Flex Items
42. PROPERTIES Flex Container Flex Item ✦ display ✦ flex-direction ✦ flex-wrap ✦ flex-flow ✦ justify-content ✦ align-items ✦ … ✦ order ✦ flex-grow ✦ flex-shrink ✦ flex-basis ✦ align-self
43. GET STARTED <div class=“container”> <div class=“item”>1</div> <div class=“item”>2</div> <div class=“item”>3</div> </div> Flex Items Flex Container
44. WITHOUT FLEXBOX 1 2 3
45. WITH FLEXBOX .container { display: flex; } 1 2 3
46. FLEX-CONTAINER PROPERTIES
47. flex-direction 1 2 3 row default 3 2 1 row-reverse
48. flex-direction 1 2 3 column 3 2 1 column-reverse
49. flex-wrap nowrap default 1 2 3 4 5 6 wrap 1 2 3 4 5 6 wrap-reverse 1 2 3 4 5 6
50. flex-flow row nowrap default 1 2 3 4 5 6 flex-direction
51. ALIGMENT align-items justify-content cross-axis main-axis
52. justify-content flex-start default 1 2 3 4 flex-end 1 2 3 4
53. justify-content center 1 2 3 4
54. justify-content space-between 1 2 3 4 space-around 1 2 3 4
55. align-items stretch default 1 2 3 4 flex-start 1 2 3 4
56. align-items flex-end center 1 2 3 4 1 2 3 4
57. align-items baseline 1 2 3 4
58. align-content stretch default 1 2 3 4 5 6 7 8 9
59. align-content flex-start 1 2 3 4 5 6 7 8
60. align-content flex-end 1 2 3 4 5 6 7 8
61. align-content center 1 2 3 4 5 6 7 8
62. align-content space-between 1 2 3 4 5 6 7 8
63. align-content space-around 1 2 3 4 5 6 7 8
64. 1 2 3 FLEX-ITEMS PROPERTIES
65. order {number} 3 1 2 4 .item3 { order: -1; }
66. flex-grow {number} 1 2 3 4 .item2 { flex-grow: 2; }
67. flex-shrink {number} 1 2 3 4 .item2 { flex-shrink: 2; }
68. flex-basis {size} 1 2 3 4 .item1 { flex-basis: 20px; }
69. flex {number} 1 2 3 4 .item { flex: 0 1 auto; } flex-grow
70. align-self 1 2 3 4 .item1 { align-self: flex-start; } .item2 { align-self: stretch; } .item3 { align-self: flex-end; } .item4 { align-self: center; } default:auto
71. Header Footer Body Aside 1 Aside 2 http://codepen.io/cesar2535/pen/KpYqwd
72. RESOURCES Learn • https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties • https://css-tricks.com/snippets/css/a-guide-to-flexbox/ • http://heydesigner.com/flexbox/ • http://philipwalton.github.io/solved-by-flexbox/ • http://sixrevisions.com/css/learn-flexbox/ Bugs • https://github.com/philipwalton/flexbugs
73. Question? THANK!