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 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 25 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 26 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 27 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 28 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 29 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 30 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 31 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 32 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 33 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 34 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 35 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 36 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 37 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 38 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 39 https://en.wikipedia.org/wiki/Comma-separated_values ## Slide 44 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 45 https://www.tablesgenerator.com/html_tables ## Slide 46 https://www.tablesgenerator.com/html_tables ## Slide 47 “Tables Generator”. Tables Generator, https://www.tablesgenerator.com/html_tables. Web. 8 Mar 2022. ## Slide 48 “Sting” sound: Sting.ogg, by PiAndWhippedCream. https://en.wikipedia.org/wiki/File:Sting.ogg. 31 July 2006. ## Slide 51 WebSanity. “CSS Layout: Block Layout”. CodePen, 14 July 2020, https://codepen.io/websanity/full/pxePLQ/. Web. 27 Sep 2022. ## Slide 52 WebSanity. “CSS Layout: Inline Layout”. CodePen, 5 July 2020, https://codepen.io/websanity/full/wYJdgr/. Web. 14 Jan 2024. ## Slide 53 WebSanity. “CSS Layout: Inline Layout with floats”. CodePen, 5 July 2020, https://codepen.io/websanity/pen/LYGQmQN?editors=1100. Web. 15 Jan 2024. ## Slide 56 http://codepen.io/websanity/pen/veJdq?editors=110 ## Slide 58 http://codepen.io/websanity/pen/Ivxft?editors=100 ## Slide 59 http://codepen.io/websanity/pen/Ivxft?editors=110 3 elements, all floated right ## Slide 61 http://codepen.io/websanity/pen/dDafC?editors=110 ## Slide 64 http://codepen.io/websanity/pen/Frklb?editors=110 ## Slide 65 http://codepen.io/websanity/pen/Frklb?editors=110 ## Slide 66 http://codepen.io/websanity/pen/Ivxft?editors=100 FIXME redo screenshot so it matches with the next slide ## Slide 67 WebSanity. “CSS: float multiple boxes”. CodePen, 12 Mar 2020, https://codepen.io/websanity/pen/abBPVJ?editors=1100. Web. 22 Apr 2022. ## Slide 68 FIXME: update icons! ## Slide 69 “Sting” sound: Sting.ogg, by PiAndWhippedCream. https://en.wikipedia.org/wiki/File:Sting.ogg. 31 July 2006. ## Slide 72 Note: Strictly speaking, these are block-level boxes AND a block box ## Slide 73 http://codepen.io/websanity/pen/hlmsu ## Slide 75 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 77 http://codepen.io/websanity/pen/Lzrie?editors=110 ## Slide 78 Sub-menus are hidden by display: none until the mouse hovers over them http://www.stlzoo.org ## Slide 80 http://codepen.io/websanity/pen/ecAnh?editors=110 ## Slide 81 border can be set if a parent has border-collapse: border, but this is extremely rare ## Slide 82 http://codepen.io/websanity/pen/oJujv?editors=110 ## Slide 84 http://codepen.io/websanity/pen/KdEvz?editors=110 ## Slide 85 http://codepen.io/websanity/pen/KdEvz?editors=110 ## Slide 86 http://codepen.io/websanity/pen/KdEvz?editors=110 ## Slide 90 FIXME replace with new slides! ## Slide 91 Illustration assumes flex-direction: row (default) ## Slide 92 Illustration assumes flex-direction: row (default) ## Slide 96 http://codepen.io/websanity/pen/yNJmQN?editors=110 ## Slide 99 → ← ↓ ↑ ## Slide 100 → ← ↓ ↑ ## Slide 101 In other words, based on the direction of the text ## Slide 102 http://codepen.io/websanity/pen/rVLXRW?editors=110 ## Slide 103 In other words, based on the direction of the text ## Slide 104 http://codepen.io/websanity/pen/rVLXRW?editors=110 ## Slide 105 In other words, based on the direction of the text ## Slide 106 http://codepen.io/websanity/pen/rVLXRW?editors=110 ## Slide 107 In other words, based on the direction of the text ## Slide 108 http://codepen.io/websanity/pen/rVLXRW?editors=110 ## Slide 110 http://codepen.io/websanity/pen/KdjazW?editors=110 ## Slide 111 http://codepen.io/websanity/pen/KdjazW?editors=110 ## Slide 113 Bootstrap sm, md, lg http://codepen.io/websanity/pen/LpKxNX?editors=110 ## Slide 114 Bootstrap xs http://codepen.io/websanity/pen/LpKxNX?editors=110 ## Slide 118 Might be rtl, top to bottom, or bottom to top depending on flex-direction ## Slide 119 http://codepen.io/websanity/pen/oXzjJb?editors=110 ## Slide 121 http://codepen.io/websanity/pen/oXzjJb?editors=110 ## Slide 123 http://codepen.io/websanity/pen/oXzjJb?editors=110 ## Slide 124 Horizontally & vertically centered! Finally! http://codepen.io/websanity/pen/mJrOjN?editors=110 ## Slide 126 http://codepen.io/websanity/pen/oXzjJb?editors=110 ## Slide 128 http://codepen.io/websanity/pen/oXzjJb?editors=110 ## Slide 133 http://codepen.io/websanity/pen/mJrOjN?editors=110 ## Slide 135 http://codepen.io/websanity/pen/mJrOjN?editors=110 ## Slide 136 http://codepen.io/websanity/pen/mJrOjN?editors=110 ## Slide 138 http://codepen.io/websanity/pen/mJrOjN?editors=110 ## Slide 140 http://codepen.io/websanity/pen/mJrOjN?editors=110 ## Slide 142 http://codepen.io/websanity/pen/mJrOjN?editors=110 ## Slide 143 http://codepen.io/websanity/pen/mJrOjN?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 153 http://codepen.io/websanity/pen/mJRGoM?editors=110 ## Slide 154 http://codepen.io/websanity/pen/mJRGoM?editors=110 ## Slide 155 http://codepen.io/websanity/pen/mJRGoM?editors=110 ## Slide 158 http://codepen.io/websanity/pen/YXNJNE?editors=110 ## Slide 159 http://codepen.io/websanity/pen/YXNJNE?editors=110 ## Slide 160 http://codepen.io/websanity/pen/YXNJNE?editors=110 ## Slide 161 http://codepen.io/websanity/pen/YXNJNE?editors=110 ## Slide 163 http://codepen.io/websanity/pen/jPBqNQ?editors=110 ## Slide 164 http://codepen.io/websanity/pen/jPBqNQ?editors=110 ## Slide 165 http://codepen.io/websanity/pen/jPBqNQ?editors=110 ## Slide 166 http://codepen.io/websanity/pen/jPBqNQ?editors=110 ## Slide 173 http://codepen.io/websanity/pen/LVZwoe?editors=110 ## Slide 175 http://codepen.io/websanity/pen/LVZwoe?editors=110 ## Slide 177 http://codepen.io/websanity/pen/LVZwoe?editors=110 ## Slide 180 http://codepen.io/websanity/pen/NqdLMY?editors=110 ## Slide 183 http://codepen.io/websanity/pen/NqdLMY?editors=110 ## Slide 185 http://codepen.io/websanity/pen/NqdLMY?editors=110 ## Slide 187 http://codepen.io/websanity/pen/NqdLMY?editors=110 ## Slide 189 http://codepen.io/websanity/pen/NqdLMY?editors=110 ## Slide 191 http://codepen.io/websanity/pen/NqdLMY?editors=110 ## Slide 193 http://codepen.io/websanity/pen/NqdLMY?editors=110 ## Slide 196 Diagrams by Scott Granneman & Jans Carton https://www.w3.org/TR/css-grid-1/ ## Slide 197 https://caniuse.com/#feat=css-grid 2018-10-25 ## 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 ## 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 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 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 215 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 216 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 217 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 225 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 226 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 227 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 232 https://codepen.io/websanity/pen/vQBEEZ?editors=1100 ## Slide 233 https://medium.freecodecamp.org/a-beginners-guide-to-css-grid-3889612c4b35 ## Slide 234 https://codepen.io/websanity/pen/oQLoBL?editors=1100 ## Slide 235 https://codepen.io/websanity/pen/oQLoBL?editors=1100 ## Slide 236 https://codepen.io/websanity/pen/oQLoBL?editors=1100 ## Slide 237 https://codepen.io/websanity/pen/oQLoBL?editors=1100 ## Slide 238 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