[CS Foundation] Web - 3 - css layout

Transcript

1. CSS LAYOUT & HOW TO USE THEM By POCHUN LU FROM THE WORLD OF X-VILLAGE Sli.do:
2. 8BSOJOH
   ⇥↮ྏⅢ $44
   ၞ⇥ₒࣚđႭఃᄝṇ⇔↌∉ஆϱ֥Ἶӱॖି὜მ֞ޓ؟҂ॖන∗
   ⅽ๥མ䐅
   !
   ֥౦㣐đ≾ℭॖ༵僯༯ྏῲđᄜႨῘứದ≇۽ऎࠇಀ (PPHMF
   ∽م䪌ૼῲᅳԛჰၹb
   έἠᄅᗥ⇔֥؟ਔđ≾ུ↜ⅳሱಖࣼഒਔb ਸ਼ຓ೏҂ᾞ
   #VH
   ℶ㬪
   #VH
   ط൞Ά֥҄Ὠ὜đ὜бᾱಸၞሼ༯ಀb ࠇᆀӹềⅽ๥∇đⅽࣼ҂὜ฮਔb
3. Today we will build: (hope)
4. 1. Realize web layout… 2. Learn CSS for Layout
   ✻ 3. Make it RWD!! Instructions
5. 1. About Web Layout… Wait, what is layout!?
6. 1. About Layout… “Put each element at each place you want.”
7. 1. Web Layout… Web Layout! Not Web Layout Web layout is like Tetris, we pile elements one by one.
8. 1. About Layout… In python, we have error messages It help us diagnose problems. zzz
9. 1. Ideal web Layout… But in “CSS”, we do not have error messages. So… budy { funt-size: 15qx; buger-radius: 5px } “You didn’t see anything. “ Everything is default!
10. 1. Real World Web Layout… Image: 1, 2 It’s a little bit hard to trace the bug…
11. 1. About Web Layout… If you want to move something to some place, you need to know its attributes. Display Position Margin Padding Center Box
12. 2. CSS For Layout ✻
    ✻ Reset: The first step. width & height: auto & % Display: “Where the magic happens” Position: How to put the element?? Flex & Grid: OMG It’s so useful!!! or bug!
13. 2.1. Reset CSS Browsers are enthusiastic, they will put some different default CSS style. More You’re welcome~ Like this and this one
14. 2.1. Reset CSS So we need to reset our CSS to keep UI consistency among browsers. We can also use complex reset code: Link Or you can try normalize CSS.
15. 2.2.1 box-sizing: border-box; content-box (default) border-box
16. 2.2.2 width: auto & 100% 50px 50px width: 100%; (parent) width auto; (default)
17. 2.2.3 height: auto & 100% height: auto; (black border) height: 100%; height: 100% depend upon the height of its parent (parent -> gray border) height: auto; (default) depend upon the height of its children (children -> green border)
18. 2. CSS For Layout Reset: The first step. width & height: auto & % Display: Where the magic happens Position: How to put the element?? Flex & Grid: OMG It’s so useful!!! or bug! v v
19. 2.3 display - basic value block inline inline-block No wrap Must wrap No wrap & we can set width/height inline inline inline inline inline inline inline inllne long long inline-block display: inline- block; \n Expecto.. Partronum!!! \n \n \n \n display: inline- block; Inline- block display: block; block; block black block
20. ࢤ༯ῲ֥
    
    ఃℯࣼᆺ൞նᇁϜ≾≵і֥؟⅂῵໊䪌၂ђl display: Basic behavior margin padding center block; inline; inline-block; 
    %JTQMBZ
21. 2.3.1 display: block; Default: <div>, <p>, <h1> ~ <h6>, We can set width/height, padding, margin, but the next element will start on a new line.
22. Note: center block - {margin: auto;} We can use "margin: auto;” to horizontally center that block element.
23. 2.3.2 display: inline;
24. 2.3.2 display: inline; Default: <span>, <a>, <img/> “An inline element does not start on a new line and only takes up as much width as necessary.” - w3school
25. 2.3.2 display: inline; - margin We can not set “margin-top” or “margin-bottom“ on <span>, <a>
26. 2.3.2 display: inline; - padding And “padding-top”, “padding-bottom” attributes will override the other elements.
27. Note: inline {text-align: center;}
28. Note: inline {text-align: center;} “text-align” set alignment for its child elements (or text) (child elements should be {display: inline or inline-block)}.
29. 2.3.2 display: inline; - border
30. block inline inline-block
31. 2.3.3 display: inline-block; We can just change the display attribute of <li>.
32. 2.3.3 display: inline-block; We can set ”display: inline-block;” to horizontally align those <li> elements in future.
33. Note: inline-block {text-align: center;}
34. නॉ߭∔၂༯ display: Basic behavior margin padding center block; inline; inline-block; 
    %JTQMBZ
35. ҂ေ్≾喁ॹ display: Basic behavior margin padding center block; inline; inline-block; 
    %JTQMBZ
36. display: Basic behavior margin padding center block; wrap V V margin: auto; inline; No wrap No top & bottom overlay text-align: center; inline-block; No wrap V V text-align: center; 
    %JTQMBZ
37. ὕὸ֤Ĥ display: Basic behavior margin padding center block; inline; inline-block; 
    %JTQMBZ
38. ⃷קĤ display: Basic behavior center padding margin inline-block; block; inline; 
    %JTQMBZ
39. Tips 1.1: Debug SOP - Trace Why Cobb is not center? Scroll ->
40. Tips 1.1: Debug SOP - Trace Check here Open developer tool & click here
41. Tips 1.1: Debug SOP - Trace Or here then here!
42. Tips 1.1: Debug SOP - Trace And find out who commit this bug. Gotcha!
43. Tips 1.2: Debug SOP - Delete Or just remove each element until finding the strange one. Press delete(keyboard) Press delete(keyboard)
44. Brainstorming: Remove the gap What happened here? (gaps) Because those dinosaurs are too brutal!
45. Note: inline-block __space__ Issue What happened here? (gaps) Hint Because those dinosaurs are too brutal!
46. Brainstorming: Remove the gap - 2 What happened here? (gaps) Because those dinosaurs are too brutal!
47. Note: inline-block __space__ Issue Equal to Space! Space everywhere! So \n \n \n \t \t \t \t
48. Note: inline-block __space__ Issue In 2018, we use “display: flex;” You may see lots of website use “float: left;” & “clear: both;” to fix it. But that’s a little annoying. Image:
49. Warn: Do not use table layout, No!!! You may see old website(10 years) use <table>,<tr>, <td> as web layout method. But it is not responsive and it can not survive in 2018. Only use <table > in displaying “table” . Image (mostly)
50. Warn: Repeat, Do not use table layout! Table layout
51. 2. CSS For Layout Reset: The first step. width & height: auto & % Display: Where the magic happens Position: How to put the element?? Flex & Grid: OMG It’s so useful!!! or bug! v v v
52. 2.4 position static relative absolute fixed Default { left: 20px; top: 20px; } Scroll to bottom { left: 20px; top: 20px; } { left: 20px; top: 20px; } footer Always here! We can not set left/top
53. 2.4.1 position: relative; original layout
54. 2.4.1 position: relative; 50px 50px 60px Add translate
55. 2.4.1 position: relative; (margin & padding) Margin & Padding still affect the original space. Big!!
56. 2.4.2 position: absolute; absolute { left: 20px; top: 20px; } Beware the origin! Not always here!!
57. 2.4.2 position: absolute
58. 2.4.2 position: absolute; - (origin) 50px 50px 40px 40px The origin point will be locate at upper left corner of its first parent element which is absolute or relative. (e.g.p-rela) <- The origin of cage is here Origin is here ->
59. 2.4.2 position: absolute - (center) We can use {left:0; right:0; margin: auto} to horizontally center the element.
60. 2.4.3 position: fixed;
61. 2.4.3 position: fixed; 40px 40px
62. 2. CSS For Layout Reset: The first step. width & height: auto & % Display: Where the magic happens Position: How to put the element?? Flex & Grid: OMG It’s so useful!!! or bug! v v v v
63. 2.5.1 Flexbox Layout Flexbox Layout Image-Credit: How Flexbox works — explained with big, colorful, animated gifs
64. 2.5.1 Flexbox Layout Wait, what would happen to “new” CSS features?
65. Acceptable?
66. Note: CSS - Prefix -webkit- (Chrome, Safari, newer versions of Opera, almost all iOS browsers (including Firefox for iOS); basically, any WebKit based browser) -moz- (Firefox) Ref
67. 2.5.1 Flexbox
68. 2.5.1 Flexbox
69. 2.5.1 Flexbox - flex-wrap downsizing wrap
70. 2.5.1 Flexbox - justify-content
71. 2.5.1 Flexbox - align-items
72. 2.5.1 Flexbox - align-items
73. 2.5.1 Flexbox - center Center a div vertically & horizontally Flexbox absolute position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; display: flex; align-items: center; justify-content: center; Old but not obsolete
74. 2.5.1 Flexbox - future learning Lots of attributes! Flex-direction, flex-flow, order, align-self, flex-grow, flex-basis…
75. 2.5.1 Flexbox - future learning • Flexbox Cheatsheet • How Flexbox works — explained with big, colorful, animated gifs • A Complete Guide to Flexbox • Just search ‘flexbox’ on Medium!!
76. 2.5.2 Grid (not bootstrap grid) CSS Grid Layout Image credit: Responsive Grid Layout: The past, present and future
77. “Well, that’s embarrassing.”
78. 2.5.2 Grid Image-Credit: CSS grid Intro
79. 2.5.2 Grid 與 CSS Grid 的第⼀一次接觸 Learn CSS Grid in 5 Minutes Or Search CSS grid on Medium!!
80. 2. CSS For Layout Reset: The first step. width & height: auto & % Display: Where the magic happens Position: How to put the element?? Flex & Grid: OMG It’s so useful!!! or bug! v v v v v
81. 網⾴頁常⾒見見組成 Image
82. Exercise 1. navbar 你覺得可以怎麼做？
83. Exercise 1. navbar 你覺得可以怎麼切？
84. Exercise 1. navbar
85. Exercise 2. Jumbotron Photo by Chinda Sam on Unsplash 你覺得可以怎麼做？
86. Exercise 2. Jumbotron lorem + tab: generate fake long text
87. Exercise 2. background-image resources Pixbay, stocksnap.io, unsplash… Just google CC0 images
88. Exercise 2. Image resize & compress tools We must compress & resize our images.(≤1366px) Tiny jpg Resizeimage.net index.html: 10KB An image: 2MB
89. Exercise 3. cards (3 or 4 columns) 你覺得可以怎麼做？
90. Exercise 3. cards (3 or 4 columns)
91. Exercise 4 Footer 你覺得可以怎麼做？
92. Exercise 4 Footer
93. Exercise 1. navbar - sample answer
94. Exercise 1. navbar - container 70% > >
95. Example 1. navbar - li > a >
96. Exercise 2. Jumbotron - sample answer Photo by Chinda Sam on Unsplash
97. Exercise 2. jumbotron - header
98. Exercise 2. jumbotron - intro > >
99. Exercise 2. jumbotron - intro > p > div.intro
100. Exercise 2. jumbotron - intro > a.btn > div.intro
101. Exercise 3. cards sample answer 你覺得可以怎麼做？
102. Exercise 3. cards sample answer
103. Exercise 3. cards sample answer
104. Exercise 4 Footer - sample answer
105. 3. RWD & Mobile Devices: Lots of devices Attributes: viewport, media, vw/vh Event: No hover but swipe Components: Different thinking
106. 3.1. Devices - (screen width) > 768px > 375px < 768px > 320px < 375px Width Usually:
107. 3.1. Devices - (or check bootstrap)
108. 3.1. Devices - (browsers) Browsers In-app browsers (WebView) Evil ! & Contain
109. 3.2.1 Viewport Ref: Mobile webpage 如何⾃自適應螢幕 Viewport Desktop viewport = visible area Viewport
110. 3.2.2 Attributes - %, max-width/height
111. 3.2.2 Attributes - %, max-width/height
112. 3.2.3 Attributes - media query
113. 3.2.3 Attributes - media query
114. 3.2.4 Attributes - vw, vh, vmax, vmin
115. 3.2.4 Attributes - vw, vh, vmax, vmin 400px X 300px 800px X 600px 80px 80px 160px 160px Easily to build full bleed layout!
116. 3. RWD & Mobile Devices: Lots of devices Attributes: viewport, media, vw/vh Event: No hover but swipe Components: Different thinking v v
117. 3.3. Interact - Desktop hover, click, mousemove, mouseup, scroll… keydown, keyup…
118. 3.3. Interact - Mobile touchstart, touchmove, touchend… swiperight, swipedown…
119. 3.4. Components - sample UI Hamburger menu, sidebar, scrollable nav Image: why-and-how-to-avoid-hamburger-menus/, when-card-ui-design-doesnt-work Tab menu, fab, card list…
120. 8BSOJOH
     .PCJMF
     6*
     %FTJHO ᄝྛọ؊đ℟ί℩ಯᄝ҂ỗṴℷ۷ࡄ֥ӯ⇀ٚൔđഈ૫ิ֥֞≾ུ
     $PNQPOFOUT
     ൉喁ℭީҌℳކ↌ਫ਼ഈ္Ⴕ҂ഒ⁠≳đೂݔᆇ֥ޓᄝၩ≾ ུ
     6*
     69
     ℟ίࡹ∗؟ु≾ ໓ᅣࠇᅳ℟ί℩Ⅿ⁠b
     ⅖ಖỚԚ⇥ᆀῲ䪌ॖၛ༵҂Ⴈܵ≾ུঝll
     ၂్ࢌἡ℟ί℩ࣼỚਔMPM
121. 3. RWD & Mobile Devices: Lots of devices Attributes: viewport, media, vw/vh Event: No hover but swipe Components: Different thinking v v v v
122. Exercise 5 - Hamburger menu 你覺得可以怎麼做？
123. Exercise 5 - Hamburger menu 不要看這麼快
124. Exercise 5 - Hamburger menu 分解動作 1. 設定 media query 當螢幕寬度少於一定值時， 1. 就把選單改成垂直的 2. 再把選單藏起來 2. 加一個☰按鈕，設定螢幕寬度過寬就不顯示 3. 設定點擊那個按鈕之後，把選單顯示出來 (增減class)
125. Exercise 5 - Ham menu - sample answer Ref: W3Schools: Responsive Top Navigation
126. One More Thing - deploy 3. Deploy finished!! 1. Click here 2. then here
127. One More Thing - deploy Or use “https://xxxx.github.io/yyyy/index.html “
128. ധޫ་đ߭∔၂༯἗Ҍ‥ἠཬℭ ⇥֞൉喁b
129. ෮ၛ἗Ҍ‥ἠཬℭ⇥֞ਔ൉喁Ĥ
130. ୆҂ႨЯሱ࠭ࣂ฿⇥὜đ
     ≾؟⇔ሱಖ ৘⁠ഈ ࣼ὜ඃ‣đ
     ֌ᇀഒေ⇥֞
     ႵࠎЧ↜ⅳିौሱ࠭
     (PPHMF
     ⇥὜֥ӱ؇
     ֌္⦁ອਔ୆⇥↌∉֥ଢ֥b
131. More To Read - Layout Learn CSS Layout CSS Conf.asia - Laying out the future
132. More To Read - Blog
133. More To Read - UIUX
134. Appendix - CSS • Pseudo Elements (::before, ::after) • Web Animation Infographics • Maintainable CSS
135. I’ll be back. he