Notes for Layout Methods By Scott Granneman & Jans Carton Find the presentation at http://www.granneman.com/presentations/ ## Slide 4 1st website http://info.cern.ch/hypertext/WWW/TheProject.html ## Slide 5 http://info.cern.ch/hypertext/WWW/MarkUp/Tags.html ## Slide 17 http://www.w3.org/TR/html5/tabular-data.html#the-table-element ## Slide 18 http://www.w3.org/TR/html5/tabular-data.html#the-tr-element ## Slide 19 http://www.w3.org/TR/html5/tabular-data.html#the-th-element ## Slide 20 http://www.w3.org/TR/html5/tabular-data.html#the-td-element ## Slide 21 http://codepen.io/websanity/pen/infKs?editors=100 ## Slide 24 http://www.tablesgenerator.com/html_tables ## Slide 25 http://www.tablesgenerator.com/html_tables ## Slide 27 https://en.wikipedia.org/wiki/Comma-separated_values ## Slide 32 http://www.tablesgenerator.com/html_tables ## Slide 33 http://www.tablesgenerator.com/html_tables ## Slide 34 http://www.tablesgenerator.com/html_tables ## Slide 35 http://www.tablesgenerator.com/html_tables ## Slide 36 http://www.tablesgenerator.com/html_tables ## Slide 37 http://www.tablesgenerator.com/html_tables ## Slide 38 http://www.tablesgenerator.com/html_tables ## Slide 39 http://www.tablesgenerator.com/latex_tables ## Slide 40 http://www.tablesgenerator.com/latex_tables ## Slide 41 http://www.tablesgenerator.com/text_tables ## Slide 42 http://www.tablesgenerator.com/text_tables ## Slide 43 http://www.tablesgenerator.com/text_tables ## Slide 44 http://www.tablesgenerator.com/markdown_tables ## Slide 45 http://www.tablesgenerator.com/markdown_tables ## Slide 46 http://www.tablesgenerator.com/mediawiki_tables ## Slide 47 http://www.tablesgenerator.com/mediawiki_tables ## Slide 50 https://codepen.io/websanity/full/pxePLQ/ ## Slide 51 https://codepen.io/websanity/full/wYJdgr/ ## Slide 52 https://codepen.io/websanity/full/wYJdgr/ ## Slide 55 http://codepen.io/websanity/pen/veJdq?editors=110 ## Slide 57 http://codepen.io/websanity/pen/Ivxft?editors=100 ## Slide 58 http://codepen.io/websanity/pen/Ivxft?editors=110 3 elements, all floated right ## Slide 60 http://codepen.io/websanity/pen/dDafC?editors=110 ## Slide 63 http://codepen.io/websanity/pen/Frklb?editors=110 ## Slide 64 http://codepen.io/websanity/pen/Frklb?editors=110 ## Slide 66 “Sting” sound: Sting.ogg, by PiAndWhippedCream. https://en.wikipedia.org/wiki/File:Sting.ogg. 31 July 2006. ## Slide 69 Note: Strictly speaking, these are block-level boxes AND a block box ## Slide 70 http://codepen.io/websanity/pen/hlmsu ## Slide 72 Demonstrates breaking across lines & all parts of box model are drawn, but only horizontal spacing is respected (not -top or -bottom parts of the Box Model) http://codepen.io/websanity/pen/DKLfB?editors=110 ## Slide 74 http://codepen.io/websanity/pen/Lzrie?editors=110 ## Slide 75 Sub-menus are hidden by display: none until the mouse hovers over them http://www.stlzoo.org ## Slide 77 http://codepen.io/websanity/pen/ecAnh?editors=110 ## Slide 78 border can be set if a parent has border-collapse: border, but this is extremely rare ## Slide 79 http://codepen.io/websanity/pen/oJujv?editors=110 ## Slide 81 http://codepen.io/websanity/pen/KdEvz?editors=110 ## Slide 82 http://codepen.io/websanity/pen/KdEvz?editors=110 ## Slide 83 http://codepen.io/websanity/pen/KdEvz?editors=110 ## Slide 88 Illustration assumes flex-direction: row (default) ## Slide 89 Illustration assumes flex-direction: row (default) ## Slide 93 http://codepen.io/websanity/pen/yNJmQN?editors=110 ## Slide 96 → ← ↓ ↑ ## Slide 97 → ← ↓ ↑ ## Slide 98 In other words, based on the direction of the text ## Slide 99 http://codepen.io/websanity/pen/rVLXRW?editors=110 ## Slide 100 In other words, based on the direction of the text ## Slide 101 http://codepen.io/websanity/pen/rVLXRW?editors=110 ## Slide 102 In other words, based on the direction of the text ## Slide 103 http://codepen.io/websanity/pen/rVLXRW?editors=110 ## Slide 104 In other words, based on the direction of the text ## Slide 105 http://codepen.io/websanity/pen/rVLXRW?editors=110 ## Slide 107 http://codepen.io/websanity/pen/KdjazW?editors=110 ## Slide 108 http://codepen.io/websanity/pen/KdjazW?editors=110 ## Slide 110 Bootstrap sm, md, lg http://codepen.io/websanity/pen/LpKxNX?editors=110 ## Slide 111 Bootstrap xs http://codepen.io/websanity/pen/LpKxNX?editors=110 ## Slide 115 Might be rtl, top to bottom, or bottom to top depending on flex-direction ## Slide 116 http://codepen.io/websanity/pen/oXzjJb?editors=110 ## Slide 118 http://codepen.io/websanity/pen/oXzjJb?editors=110 ## Slide 120 http://codepen.io/websanity/pen/oXzjJb?editors=110 ## Slide 121 Horizontally & vertically centered! Finally! http://codepen.io/websanity/pen/mJrOjN?editors=110 ## Slide 123 http://codepen.io/websanity/pen/oXzjJb?editors=110 ## Slide 125 http://codepen.io/websanity/pen/oXzjJb?editors=110 ## Slide 130 http://codepen.io/websanity/pen/mJrOjN?editors=110 ## Slide 132 http://codepen.io/websanity/pen/mJrOjN?editors=110 ## Slide 133 http://codepen.io/websanity/pen/mJrOjN?editors=110 ## Slide 135 http://codepen.io/websanity/pen/mJrOjN?editors=110 ## Slide 137 http://codepen.io/websanity/pen/mJrOjN?editors=110 ## Slide 139 http://codepen.io/websanity/pen/mJrOjN?editors=110 ## Slide 140 http://codepen.io/websanity/pen/mJrOjN?editors=110 ## Slide 145 http://codepen.io/websanity/pen/mJRGoM?editors=110 ## Slide 146 http://codepen.io/websanity/pen/mJRGoM?editors=110 ## Slide 147 http://codepen.io/websanity/pen/mJRGoM?editors=110 ## Slide 148 http://codepen.io/websanity/pen/mJRGoM?editors=110 ## Slide 149 http://codepen.io/websanity/pen/mJRGoM?editors=110 ## Slide 150 http://codepen.io/websanity/pen/mJRGoM?editors=110 ## Slide 151 http://codepen.io/websanity/pen/mJRGoM?editors=110 ## Slide 152 http://codepen.io/websanity/pen/mJRGoM?editors=110 ## Slide 155 http://codepen.io/websanity/pen/YXNJNE?editors=110 ## Slide 156 http://codepen.io/websanity/pen/YXNJNE?editors=110 ## Slide 157 http://codepen.io/websanity/pen/YXNJNE?editors=110 ## Slide 158 http://codepen.io/websanity/pen/YXNJNE?editors=110 ## Slide 160 http://codepen.io/websanity/pen/jPBqNQ?editors=110 ## Slide 161 http://codepen.io/websanity/pen/jPBqNQ?editors=110 ## Slide 162 http://codepen.io/websanity/pen/jPBqNQ?editors=110 ## Slide 163 http://codepen.io/websanity/pen/jPBqNQ?editors=110 ## Slide 170 http://codepen.io/websanity/pen/LVZwoe?editors=110 ## Slide 172 http://codepen.io/websanity/pen/LVZwoe?editors=110 ## Slide 174 http://codepen.io/websanity/pen/LVZwoe?editors=110 ## Slide 177 http://codepen.io/websanity/pen/NqdLMY?editors=110 ## Slide 180 http://codepen.io/websanity/pen/NqdLMY?editors=110 ## Slide 182 http://codepen.io/websanity/pen/NqdLMY?editors=110 ## Slide 184 http://codepen.io/websanity/pen/NqdLMY?editors=110 ## Slide 186 http://codepen.io/websanity/pen/NqdLMY?editors=110 ## Slide 188 http://codepen.io/websanity/pen/NqdLMY?editors=110 ## Slide 190 http://codepen.io/websanity/pen/NqdLMY?editors=110 ## Slide 193 https://www.w3.org/TR/css-grid-1/ ## Slide 194 https://caniuse.com/#feat=css-grid 2018-10-25 ## Slide 198 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 199 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 200 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 201 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 202 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 203 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 204 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 205 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 9 1-cell areas 12 2-cell areas 6 3-cell areas 4 4-cell areas 4 6-cell areas 1 9-cell area 9+12+6+4+4+1=36 ## Slide 206 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 207 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 208 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 209 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 210 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 211 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 212 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 213 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 214 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 220 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 221 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 222 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 223 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 224 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 229 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 230 https://medium.freecodecamp.org/a-beginners-guide-to-css-grid-3889612c4b35 ## Slide 231 https://codepen.io/websanity/pen/oQLoBL?editors=1100 ## Slide 232 https://codepen.io/websanity/pen/oQLoBL?editors=1100 ## Slide 233 https://codepen.io/websanity/pen/oQLoBL?editors=1100 ## Slide 234 https://codepen.io/websanity/pen/oQLoBL?editors=1100 ## Slide 235 https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows https://caniuse.com/#feat=css-grid https://developer.mozilla.org/en-US/docs/Web/CSS/flex_value https://developer.mozilla.org/en-US/docs/Web/CSS/minmax https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content