Slide 1

Slide 1 text

CSS LAYOUT & HOW TO USE THEM By POCHUN LU FROM THE WORLD OF X-VILLAGE Sli.do:

Slide 2

Slide 2 text

8BSOJOH⇥↮ྏⅢ $44ၞ⇥ₒࣚđႭఃᄝṇ⇔↌∉ஆϱ֥Ἶӱॖି὜მ֞ޓ؟҂ॖන∗ ⅽ๥མ䐅!֥౦㣐đ≾ℭॖ༵僯༯ྏῲđᄜႨῘứದ≇۽ऎࠇಀ (PPHMF∽م䪌ૼῲᅳԛჰၹbέἠᄅᗥ⇔֥؟ਔđ≾ུ↜ⅳሱಖࣼഒਔb ਸ਼ຓ೏҂ᾞ#VHℶ㬪#VHط൞Ά֥҄Ὠ὜đ὜бᾱಸၞሼ༯ಀb ࠇᆀӹềⅽ๥∇đⅽࣼ҂὜ฮਔb

Slide 3

Slide 3 text

Today we will build: (hope)

Slide 4

Slide 4 text

1. Realize web layout… 2. Learn CSS for Layout✻ 3. Make it RWD!! Instructions

Slide 5

Slide 5 text

1. About Web Layout… Wait, what is layout!?

Slide 6

Slide 6 text

1. About Layout… “Put each element at each place you want.”

Slide 7

Slide 7 text

1. Web Layout… Web Layout! Not Web Layout Web layout is like Tetris, we pile elements one by one.

Slide 8

Slide 8 text

1. About Layout… In python, we have error messages It help us diagnose problems. zzz

Slide 9

Slide 9 text

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!

Slide 10

Slide 10 text

1. Real World Web Layout… Image: 1, 2 It’s a little bit hard to trace the bug…

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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!

Slide 13

Slide 13 text

2.1. Reset CSS Browsers are enthusiastic, they will put some different default CSS style. More You’re welcome~ Like this and this one

Slide 14

Slide 14 text

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.

Slide 15

Slide 15 text

2.2.1 box-sizing: border-box; content-box (default) border-box

Slide 16

Slide 16 text

2.2.2 width: auto & 100% 50px 50px width: 100%; (parent) width auto; (default)

Slide 17

Slide 17 text

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)

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

ࢤ༯ῲ֥ఃℯࣼᆺ൞նᇁϜ≾≵і֥؟⅂῵໊䪌၂ђl display: Basic behavior margin padding center block; inline; inline-block; %JTQMBZ

Slide 21

Slide 21 text

2.3.1 display: block; Default:

~

, We can set width/height, padding, margin, but the next element will start on a new line.

Slide 22

Slide 22 text

Note: center block - {margin: auto;} We can use "margin: auto;” to horizontally center that block element.

Slide 23

Slide 23 text

2.3.2 display: inline;

Slide 24

Slide 24 text

2.3.2 display: inline; Default: , , “An inline element does not start on a new line and only takes up as much width as necessary.” - w3school

Slide 25

Slide 25 text

2.3.2 display: inline; - margin We can not set “margin-top” or “margin-bottom“ on ,

Slide 26

Slide 26 text

2.3.2 display: inline; - padding And “padding-top”, “padding-bottom” attributes will override the other elements.

Slide 27

Slide 27 text

Note: inline {text-align: center;}

Slide 28

Slide 28 text

Note: inline {text-align: center;} “text-align” set alignment for its child elements (or text) (child elements should be {display: inline or inline-block)}.

Slide 29

Slide 29 text

2.3.2 display: inline; - border

Slide 30

Slide 30 text

block inline inline-block

Slide 31

Slide 31 text

2.3.3 display: inline-block; We can just change the display attribute of

Slide 32

Slide 32 text

2.3.3 display: inline-block; We can set ”display: inline-block;” to horizontally align those

elements in future.

Slide 33

Slide 33 text

Note: inline-block {text-align: center;}

Slide 34

Slide 34 text

නॉ߭∔၂༯ display: Basic behavior margin padding center block; inline; inline-block; %JTQMBZ

Slide 35

Slide 35 text

҂ေ్≾喁ॹ display: Basic behavior margin padding center block; inline; inline-block; %JTQMBZ

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

ὕὸ֤⁯Ĥ display: Basic behavior margin padding center block; inline; inline-block; %JTQMBZ

Slide 38

Slide 38 text

⃷ק⁯Ĥ display: Basic behavior center padding margin inline-block; block; inline; %JTQMBZ

Slide 39

Slide 39 text

Tips 1.1: Debug SOP - Trace Why Cobb is not center? Scroll ->

Slide 40

Slide 40 text

Tips 1.1: Debug SOP - Trace Check here Open developer tool & click here

Slide 41

Slide 41 text

Tips 1.1: Debug SOP - Trace Or here then here!

Slide 42

Slide 42 text

Tips 1.1: Debug SOP - Trace And find out who commit this bug. Gotcha!

Slide 43

Slide 43 text

Tips 1.2: Debug SOP - Delete Or just remove each element until finding the strange one. Press delete(keyboard) Press delete(keyboard)

Slide 44

Slide 44 text

Brainstorming: Remove the gap What happened here? (gaps) Because those dinosaurs are too brutal!

Slide 45

Slide 45 text

Note: inline-block __space__ Issue What happened here? (gaps) Hint Because those dinosaurs are too brutal!

Slide 46

Slide 46 text

Brainstorming: Remove the gap - 2 What happened here? (gaps) Because those dinosaurs are too brutal!

Slide 47

Slide 47 text

Note: inline-block __space__ Issue Equal to Space! Space everywhere! So \n \n \n \t \t \t \t

Slide 48

Slide 48 text

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:

Slide 49

Slide 49 text

Warn: Do not use table layout, No!!! You may see old website(10 years) use ,, as web layout method. But it is not responsive and it can not survive in 2018. Only use in displaying “table” . Image (mostly)

Slide 50

Slide 50 text

Warn: Repeat, Do not use table layout! Table layout

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

2.4.1 position: relative; original layout

Slide 54

Slide 54 text

2.4.1 position: relative; 50px 50px 60px Add translate

Slide 55

Slide 55 text

2.4.1 position: relative; (margin & padding) Margin & Padding still affect the original space. Big!!

Slide 56

Slide 56 text

2.4.2 position: absolute; absolute { left: 20px; top: 20px; } Beware the origin! Not always here!!

Slide 57

Slide 57 text

2.4.2 position: absolute

Slide 58

Slide 58 text

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 ->

Slide 59

Slide 59 text

2.4.2 position: absolute - (center) We can use {left:0; right:0; margin: auto} to horizontally center the element.

Slide 60

Slide 60 text

2.4.3 position: fixed;

Slide 61

Slide 61 text

2.4.3 position: fixed; 40px 40px

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

2.5.1 Flexbox Layout Flexbox Layout Image-Credit: How Flexbox works — explained with big, colorful, animated gifs

Slide 64

Slide 64 text

2.5.1 Flexbox Layout Wait, what would happen to “new” CSS features?

Slide 65

Slide 65 text

Acceptable?

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

2.5.1 Flexbox

Slide 68

Slide 68 text

2.5.1 Flexbox

Slide 69

Slide 69 text

2.5.1 Flexbox - flex-wrap downsizing wrap

Slide 70

Slide 70 text

2.5.1 Flexbox - justify-content

Slide 71

Slide 71 text

2.5.1 Flexbox - align-items

Slide 72

Slide 72 text

2.5.1 Flexbox - align-items

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

2.5.1 Flexbox - future learning Lots of attributes! Flex-direction, flex-flow, order, align-self, flex-grow, flex-basis…

Slide 75

Slide 75 text

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!!

Slide 76

Slide 76 text

2.5.2 Grid (not bootstrap grid) CSS Grid Layout Image credit: Responsive Grid Layout: The past, present and future

Slide 77

Slide 77 text

“Well, that’s embarrassing.”

Slide 78

Slide 78 text

2.5.2 Grid Image-Credit: CSS grid Intro

Slide 79

Slide 79 text

2.5.2 Grid 與 CSS Grid 的第⼀一次接觸 Learn CSS Grid in 5 Minutes Or Search CSS grid on Medium!!

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

網⾴頁常⾒見見組成 Image

Slide 82

Slide 82 text

Exercise 1. navbar 你覺得可以怎麼做？

Slide 83

Slide 83 text

Exercise 1. navbar 你覺得可以怎麼切？

Slide 84

Slide 84 text

Exercise 1. navbar

Slide 85

Slide 85 text

Exercise 2. Jumbotron Photo by Chinda Sam on Unsplash 你覺得可以怎麼做？

Slide 86

Slide 86 text

Exercise 2. Jumbotron lorem + tab: generate fake long text

Slide 87

Slide 87 text

Exercise 2. background-image resources Pixbay, stocksnap.io, unsplash… Just google CC0 images

Slide 88

Slide 88 text

Exercise 2. Image resize & compress tools We must compress & resize our images.(≤1366px) Tiny jpg Resizeimage.net index.html: 10KB An image: 2MB

Slide 89

Slide 89 text

Exercise 3. cards (3 or 4 columns) 你覺得可以怎麼做？

Slide 90

Slide 90 text

Exercise 3. cards (3 or 4 columns)

Slide 91

Slide 91 text

Exercise 4 Footer 你覺得可以怎麼做？

Slide 92

Slide 92 text

Exercise 4 Footer

Slide 93

Slide 93 text

Exercise 1. navbar - sample answer

Slide 94

Slide 94 text

Exercise 1. navbar - container 70% > >

Slide 95

Slide 95 text

Example 1. navbar - li > a >

Slide 96

Slide 96 text

Exercise 2. Jumbotron - sample answer Photo by Chinda Sam on Unsplash

Slide 97

Slide 97 text

Exercise 2. jumbotron - header

Slide 98

Slide 98 text

Exercise 2. jumbotron - intro > >

Slide 99

Slide 99 text

Exercise 2. jumbotron - intro > p > div.intro

Slide 100

Slide 100 text

Exercise 2. jumbotron - intro > a.btn > div.intro

Slide 101

Slide 101 text

Exercise 3. cards sample answer 你覺得可以怎麼做？

Slide 102

Slide 102 text

Exercise 3. cards sample answer

Slide 103

Slide 103 text

Exercise 3. cards sample answer

Slide 104

Slide 104 text

Exercise 4 Footer - sample answer

Slide 105

Slide 105 text

3. RWD & Mobile Devices: Lots of devices Attributes: viewport, media, vw/vh Event: No hover but swipe Components: Different thinking

Slide 106

Slide 106 text

3.1. Devices - (screen width) > 768px > 375px < 768px > 320px < 375px Width Usually:

Slide 107

Slide 107 text

3.1. Devices - (or check bootstrap)

Slide 108

Slide 108 text

3.1. Devices - (browsers) Browsers In-app browsers (WebView) Evil ! & Contain

Slide 109

Slide 109 text

3.2.1 Viewport Ref: Mobile webpage 如何⾃自適應螢幕 Viewport Desktop viewport = visible area Viewport

Slide 110

Slide 110 text

3.2.2 Attributes - %, max-width/height

Slide 111

Slide 111 text

3.2.2 Attributes - %, max-width/height

Slide 112

Slide 112 text

3.2.3 Attributes - media query

Slide 113

Slide 113 text

3.2.3 Attributes - media query

Slide 114

Slide 114 text

3.2.4 Attributes - vw, vh, vmax, vmin

Slide 115

Slide 115 text

3.2.4 Attributes - vw, vh, vmax, vmin 400px X 300px 800px X 600px 80px 80px 160px 160px Easily to build full bleed layout!

Slide 116

Slide 116 text

3. RWD & Mobile Devices: Lots of devices Attributes: viewport, media, vw/vh Event: No hover but swipe Components: Different thinking v v

Slide 117

Slide 117 text

3.3. Interact - Desktop hover, click, mousemove, mouseup, scroll… keydown, keyup…

Slide 118

Slide 118 text

3.3. Interact - Mobile touchstart, touchmove, touchend… swiperight, swipedown…

Slide 119

Slide 119 text

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…

Slide 120

Slide 120 text

8BSOJOH.PCJMF6*%FTJHO ᄝྛọ؊đ℟ί℩ಯᄝ҂ỗṴℷ۷ࡄ֥ӯ⇀ٚൔđഈ૫ิ֥֞≾ུ $PNQPOFOUT൉喁ℭީҌℳކ↌ਫ਼ഈ္Ⴕ҂ഒ⁠≳đೂݔᆇ֥ޓᄝၩ≾ ུ6*69℟ίࡹ∗؟ु≾ ໓ᅣࠇᅳ℟ί℩Ⅿ⁠b ⅖ಖỚԚ⇥ᆀῲ䪌ॖၛ༵҂Ⴈܵ≾ུঝll ၂్ࢌἡ℟ί℩ࣼỚਔMPM

Slide 121

Slide 121 text

3. RWD & Mobile Devices: Lots of devices Attributes: viewport, media, vw/vh Event: No hover but swipe Components: Different thinking v v v v

Slide 122

Slide 122 text

Exercise 5 - Hamburger menu 你覺得可以怎麼做？

Slide 123

Slide 123 text

Exercise 5 - Hamburger menu 不要看這麼快

Slide 124

Slide 124 text

Exercise 5 - Hamburger menu 分解動作 1. 設定 media query 當螢幕寬度少於一定值時， 1. 就把選單改成垂直的 2. 再把選單藏起來 2. 加一個☰按鈕，設定螢幕寬度過寬就不顯示 3. 設定點擊那個按鈕之後，把選單顯示出來 (增減class)

Slide 125

Slide 125 text

Exercise 5 - Ham menu - sample answer Ref: W3Schools: Responsive Top Navigation

Slide 126

Slide 126 text

One More Thing - deploy 3. Deploy finished!! 1. Click here 2. then here

Slide 127

Slide 127 text

One More Thing - deploy Or use “https://xxxx.github.io/yyyy/index.html “

Slide 128

Slide 128 text

ധޫ་đ߭∔၂༯἗Ҍ‥ἠཬℭ ⇥֞൉喁b

Slide 129

Slide 129 text

෮ၛ἗Ҍ‥ἠཬℭ⇥֞ਔ൉喁Ĥ

Slide 130

Slide 130 text

୆҂ႨЯሱ࠭ࣂ฿⇥὜đ ≾؟⇔ሱಖ ৘⁠ഈ ࣼ὜ඃ‣đ ֌ᇀഒေ⇥֞ႵࠎЧ↜ⅳିौሱ࠭(PPHMF⇥὜֥ӱ؇ ֌္⦁ອਔ୆⇥↌∉֥ଢ֥b

Slide 131

Slide 131 text

More To Read - Layout Learn CSS Layout CSS Conf.asia - Laying out the future

Slide 132

Slide 132 text

Slide 133

Slide 133 text

Slide 134

Slide 134 text

Appendix - CSS • Pseudo Elements (::before, ::after) • Web Animation Infographics • Maintainable CSS

Slide 135

Slide 135 text

I’ll be back. he