Notes for CSS - Layout By Scott Granneman & Jans Carton Find the presentation at http://www.granneman.com/presentations/ ## Slide 3 https://codepen.io/websanity/pen/ZEQxVLj?editors=1100 ## Slide 4 https://codepen.io/websanity/pen/PoZRXEp?editors=1100 ## Slide 5 https://codepen.io/websanity/pen/gtIAc?editors=1100 ## Slide 6 https://codepen.io/websanity/pen/gtIAc?editors=1100 ## Slide 10 https://developer.mozilla.org/en-US/docs/Web/CSS/display ## Slide 15 https://developer.mozilla.org/en-US/docs/Web/CSS/display ## Slide 19 https://en.wikipedia.org/wiki/File:Buxus-microphylla-sinica.JPG Korean boxtree leaves - Buxus sinica (syn. Buxus microphylla var. sinica) - Wikipedia - Sten Porse - CC BY-SA 3.0 - 2005 https://en.wikipedia.org/wiki/File:Buxus-microphylla-sinica.JPG ## Slide 20 The browser processing pipeline is covered in the CSS - Overview slide deck https://hpbn.co/primer-on-web-performance/#dom-cssom-and-javascript ## Slide 21 The browser processing pipeline is covered in the CSS Overview presentation Diagram by Scott Granneman & Jans Carton ## Slide 22 The browser processing pipeline is covered in the CSS Overview presentation ## Slide 23 CSS Display Module Level 3 W3C Candidate Recommendation, 28 August 2018 https://www.w3.org/TR/css-display-3/#intro ## Slide 24 CSS Display Module Level 3 W3C Candidate Recommendation, 28 August 2018 https://www.w3.org/TR/css-display-3/#intro ## Slide 28 https://codepen.io/websanity/pen/LgrXvj?editors=1100 ## Slide 29 https://codepen.io/websanity/pen/LgrXvj?editors=1100 ## Slide 30 https://codepen.io/websanity/pen/LgrXvj?editors=1100 ## Slide 31 https://codepen.io/websanity/pen/LgrXvj?editors=1100 ## Slide 34 Chinese Porcelain Vase by design56, licensed from Can Stock Photo, 2014-08-04 http://www.canstockphoto.com/chinese-porcelain-vase-10824229.html ## Slide 35 A Cardboard Box with Fill Packaging Peanuts by MaxalTamor, licensed from Can Stock Photo, 2014-08-04 http://www.canstockphoto.com/a-cardboard-box-with-fill-packaging-19324250.html ## Slide 36 Giftwrapped by Lightreign, licensed from Can Stock Photo, 2014-08-04 http://www.canstockphoto.com/giftwrapped-1395457.html ## Slide 54 https://developer.mozilla.org/en-US/docs/Web/CSS/border-width ## Slide 55 https://developer.mozilla.org/en-US/docs/Web/CSS/border-width ## Slide 56 https://developer.mozilla.org/en-US/docs/Web/CSS/border-width ## Slide 70 https://developer.mozilla.org/en-US/docs/Web/CSS/margin ## Slide 71 https://developer.mozilla.org/en-US/docs/Web/CSS/margin ## Slide 72 https://developer.mozilla.org/en-US/docs/Web/CSS/margin ## Slide 74 http://codepen.io/websanity/pen/kejHu?editors=110 ## Slide 75 http://codepen.io/websanity/pen/kejHu?editors=110 ## Slide 76 https://developer.mozilla.org/en-US/docs/Web/CSS/margin ## Slide 77 https://codepen.io/websanity/pen/adjvD?editors=1100 ## Slide 80 http://codepen.io/websanity/pen/AmIJr?editors=110 ## Slide 82 http://codepen.io/websanity/pen/fwLhC ## Slide 84 http://codepen.io/websanity/pen/EqrxH ## Slide 85 https://caniuse.com/#feat=css3-boxsizing ## Slide 88 https://drafts.csswg.org/css-sizing-3/#width-height-keywords For a block of text, max-content width is the width of the text when laid out end-to-end, on one line ## Slide 89 https://codepen.io/websanity/pen/mzMXzy ## Slide 90 https://codepen.io/websanity/pen/mzMXzy ## Slide 91 https://codepen.io/websanity/pen/EdXoGb?editors=1100 ## Slide 92 https://codepen.io/websanity/pen/EdXoGb?editors=1100 ## Slide 93 https://codepen.io/websanity/pen/mzMXzy?editors=1100 ## Slide 94 https://codepen.io/websanity/pen/mzMXzy?editors=1100 ## Slide 96 https://drafts.csswg.org/css-sizing-3/#width-height-keywords ## Slide 97 https://caniuse.com/#feat=mdn-css_properties_width https://caniuse.com/#feat=mdn-css_properties_min-width https://caniuse.com/#feat=mdn-css_properties_max-width https://caniuse.com/#feat=mdn-css_properties_height https://caniuse.com/#feat=mdn-css_properties_min-height https://caniuse.com/#feat=mdn-css_properties_max-height ## Slide 98 https://caniuse.com/#feat=mdn-css_properties_width_max-content https://caniuse.com/#feat=mdn-css_properties_width_min-content https://caniuse.com/#feat=mdn-css_properties_width_fit-content https://developer.mozilla.org/en-US/docs/Web/CSS/width ## Slide 99 https://caniuse.com/#feat=mdn-css_properties_height_max-content https://caniuse.com/#feat=mdn-css_properties_height_min-content https://caniuse.com/#feat=mdn-css_properties_height_fit-content https://developer.mozilla.org/en-US/docs/Web/CSS/height ## Slide 100 Current hack, which Bootstrap has implemented aspect-ratio property ## Slide 105 http://codepen.io/websanity/pen/sljbJ?editors=110 ## Slide 106 http://codepen.io/websanity/pen/sljbJ?editors=110 ## Slide 107 http://codepen.io/websanity/pen/sljbJ?editors=110 ## Slide 108 http://codepen.io/websanity/pen/sljbJ?editors=110 ## Slide 110 http://codepen.io/websanity/pen/cwGtx?editors=110 ## Slide 111 https://developer.mozilla.org/en-US/docs/Web/CSS/overflow https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y ## Slide 114 Unlike visibility: hidden, which hides the element but leaves it in flow as though it were still there ## Slide 115 http://codepen.io/websanity/pen/Lzrie?editors=110 ## Slide 116 Sub-menus are hidden by display: none until the mouse hovers over them http://www.stlzoo.org ## Slide 118 https://codepen.io/websanity/pen/dgjbjP?editors=1100 ## Slide 119 https://codepen.io/websanity/pen/dgjbjP?editors=1100 ## Slide 120 https://developer.mozilla.org/en-US/docs/Web/CSS/display https://caniuse.com/#feat=css-display-contents 🐞: https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents & https://bugs.chromium.org/p/chromium/issues/detail?id=835455 ## Slide 123 https://codepen.io/websanity/full/pxePLQ/ ## Slide 124 https://codepen.io/websanity/full/wYJdgr/ ## Slide 125 https://codepen.io/websanity/pen/LYGQmQN?editors=1100 ## Slide 126 https://codepen.io/websanity/pen/MWKQGQx?editors=1100 ## Slide 129 https://codepen.io/websanity/full/wYJdgr/ ## Slide 131 https://codepen.io/websanity/full/wYJdgr/ ## Slide 133 https://codepen.io/websanity/full/wYJdgr/ ## Slide 136 https://codepen.io/websanity/pen/GOpQWJ?editors=1100 ## Slide 137 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 139 http://codepen.io/websanity/pen/dztpu?editors=110 ## Slide 140 https://codepen.io/websanity/pen/ePjYNo?editors=1100 ## Slide 141 https://codepen.io/websanity/pen/ePjYNo?editors=1100 ## Slide 144 https://codepen.io/websanity/full/pxePLQ/ ## Slide 145 https://codepen.io/websanity/full/pxePLQ/ ## Slide 146 https://codepen.io/websanity/full/pxePLQ/ ## Slide 151 http://codepen.io/websanity/pen/zcqFK?editors=110 ## Slide 152 http://codepen.io/websanity/pen/vgHJa?editors=010 ## Slide 153 http://codepen.io/websanity/pen/fbDwc?editors=110 ## Slide 154 The

has value of block, so therefore the anonymous block boxes are needed for the layout ## Slide 158 https://codepen.io/websanity/pen/MWKQGQx?editors=1100 ## Slide 159 https://codepen.io/websanity/pen/MWKQGQx?editors=1100 ## Slide 160 https://codepen.io/websanity/pen/MWKQGQx?editors=1100 ## Slide 161 https://codepen.io/websanity/pen/MWKQGQx?editors=1100 ## Slide 164 http://codepen.io/websanity/pen/veJdq?editors=110 ## Slide 165 http://codepen.io/websanity/pen/veJdq?editors=110 ## Slide 167 http://codepen.io/websanity/pen/Ivxft?editors=100 ## Slide 168 http://codepen.io/websanity/pen/Ivxft?editors=110 3 elements, all floated right ## Slide 169 https://codepen.io/websanity/full/bQXZNm Cthulhu by Danelo Neira: https://dibujando.net/dib/cthulhu-96836 Randolph Carter by Mark Foster: http://hplovecraftart.blogspot.com/2014/01/lovecraftian-characters.html Shub-Nigguarth by Michael Bukowski: http://yog-blogsoth.blogspot.com/2013/07/shub-niggurath.html Tsathaggua by Chase Norton: https://www.flickr.com/photos/150863707@N06/31885230880/in/photostream/ Abdul Alhazred by Mark Foster: https://hplovecraftart.blogspot.com/2013/12/hp-lovecrafts-mad-arab-abdul-alhazred.html Yog-Sothoth by Richard Luong: https://www.etsy.com/listing/168884701/yog-sothoth-limited-edition-lithograph?ref=shop_home_active_5 Azathoth by Micah Stone: https://lovecraft.fandom.com/wiki/File:Azathoth_(1).jpg Nyarlathotep by Jens Heimdahl: https://en.wikipedia.org/wiki/File:The_Black_Man.jpg Shoggoth by Nottsuo: https://en.wikipedia.org/wiki/File:Shoggoth_by_Nottsuo.jpg Rhan-Tegoth, Cyäegha, & Cthugha by EldreshSaenz: https://imgur.com/gallery/lNxsr Star Vampire by Chase Norton: https://www.flickr.com/photos/150863707@N06/33154876152/in/photostream/ Hastur by Chase Norton: https://www.flickr.com/photos/150863707@N06/31609393814/in/photostream/ ## Slide 170 https://codepen.io/websanity/bQXZNm Cthulhu by Danelo Neira: https://dibujando.net/dib/cthulhu-96836 Randolph Carter by Mark Foster: http://hplovecraftart.blogspot.com/2014/01/lovecraftian-characters.html Shub-Nigguarth by Michael Bukowski: http://yog-blogsoth.blogspot.com/2013/07/shub-niggurath.html Tsathaggua by Chase Norton: https://www.flickr.com/photos/150863707@N06/31885230880/in/photostream/ Abdul Alhazred by Mark Foster: https://hplovecraftart.blogspot.com/2013/12/hp-lovecrafts-mad-arab-abdul-alhazred.html Yog-Sothoth by Richard Luong: https://www.etsy.com/listing/168884701/yog-sothoth-limited-edition-lithograph?ref=shop_home_active_5 Azathoth by Micah Stone: https://lovecraft.fandom.com/wiki/File:Azathoth_(1).jpg Nyarlathotep by Jens Heimdahl: https://en.wikipedia.org/wiki/File:The_Black_Man.jpg Shoggoth by Nottsuo: https://en.wikipedia.org/wiki/File:Shoggoth_by_Nottsuo.jpg Rhan-Tegoth, Cyäegha, & Cthugha by EldreshSaenz: https://imgur.com/gallery/lNxsr Star Vampire by Chase Norton: https://www.flickr.com/photos/150863707@N06/33154876152/in/photostream/ Hastur by Chase Norton: https://www.flickr.com/photos/150863707@N06/31609393814/in/photostream/ ## Slide 171 https://codepen.io/websanity/bQXZNm Cthulhu by Danelo Neira: https://dibujando.net/dib/cthulhu-96836 Randolph Carter by Mark Foster: http://hplovecraftart.blogspot.com/2014/01/lovecraftian-characters.html Shub-Nigguarth by Michael Bukowski: http://yog-blogsoth.blogspot.com/2013/07/shub-niggurath.html Tsathaggua by Chase Norton: https://www.flickr.com/photos/150863707@N06/31885230880/in/photostream/ Abdul Alhazred by Mark Foster: https://hplovecraftart.blogspot.com/2013/12/hp-lovecrafts-mad-arab-abdul-alhazred.html Yog-Sothoth by Richard Luong: https://www.etsy.com/listing/168884701/yog-sothoth-limited-edition-lithograph?ref=shop_home_active_5 Azathoth by Micah Stone: https://lovecraft.fandom.com/wiki/File:Azathoth_(1).jpg Nyarlathotep by Jens Heimdahl: https://en.wikipedia.org/wiki/File:The_Black_Man.jpg Shoggoth by Nottsuo: https://en.wikipedia.org/wiki/File:Shoggoth_by_Nottsuo.jpg Rhan-Tegoth, Cyäegha, & Cthugha by EldreshSaenz: https://imgur.com/gallery/lNxsr Star Vampire by Chase Norton: https://www.flickr.com/photos/150863707@N06/33154876152/in/photostream/ Hastur by Chase Norton: https://www.flickr.com/photos/150863707@N06/31609393814/in/photostream/ ## Slide 173 https://codepen.io/websanity/full/bQXZNm ## Slide 175 http://codepen.io/websanity/pen/dDafC?editors=110 ## Slide 178 http://codepen.io/websanity/pen/Frklb?editors=110 ## Slide 179 http://codepen.io/websanity/pen/Frklb?editors=110 ## Slide 180 https://codepen.io/websanity/pen/WNvzrgB?editors=1100 ## Slide 181 https://codepen.io/websanity/pen/WNvzrgB?editors=1100 ## Slide 182 https://codepen.io/websanity/pen/Ivxft?editors=0100 ## Slide 183 https://codepen.io/websanity/pen/Ivxft?editors=1000 ## Slide 185 “Sting” sound: Sting.ogg, by PiAndWhippedCream. https://en.wikipedia.org/wiki/File:Sting.ogg. 31 July 2006. ## Slide 188 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context ## Slide 189 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context ## Slide 193 https://codepen.io/websanity/pen/abdqGPd?editors=1100 ## Slide 194 https://codepen.io/websanity/pen/abdqGPd?editors=1100 ## Slide 195 https://codepen.io/websanity/pen/abdqGPd?editors=1100 ## Slide 198 https://codepen.io/websanity/pen/LgBVNa?editors=1000 ## Slide 199 https://codepen.io/websanity/pen/LgBVNa?editors=1000 ## Slide 200 https://codepen.io/websanity/pen/LgBVNa?editors=1000 ## Slide 202 https://codepen.io/websanity/pen/bmWEBG?editors=1100 ## Slide 203 https://codepen.io/websanity/pen/bmWEBG?editors=1100 ## Slide 204 https://codepen.io/websanity/pen/bmWEBG?editors=1100 ## Slide 208 Note: Strictly speaking, these are block-level boxes AND a block box ## Slide 209 http://codepen.io/websanity/pen/hlmsu ## Slide 211 https://codepen.io/websanity/pen/NOMQJd?editors=1000 ## Slide 212 https://codepen.io/websanity/pen/GOpQWJ?editors=1100 ## Slide 213 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 215 https://codepen.io/websanity/pen/gZwLyz?editors=1100 ## Slide 216 https://codepen.io/websanity/pen/jXMVjR?editors=1100 ## Slide 220 http://codepen.io/websanity/pen/dztpu?editors=110 ## Slide 223 http://codepen.io/websanity/pen/gasHG?editors=110 ## Slide 229 https://codepen.io/websanity/pen/ZqMBPR?editors=1100 ## Slide 232 http://codepen.io/websanity/pen/ecAnh?editors=110 ## Slide 237 http://codepen.io/websanity/pen/KdEvz?editors=110 ## Slide 238 http://codepen.io/websanity/pen/KdEvz?editors=110 ## Slide 240 http://codepen.io/websanity/pen/KdEvz?editors=110 ## Slide 242 border can be set if a parent has border-collapse: border, but this is extremely rare ## Slide 243 http://codepen.io/websanity/pen/oJujv?editors=110 ## Slide 246 https://www.w3.org/TR/CSS22/tables.html#border-conflict-resolution ## Slide 247 https://cdpn.io/websanity/debug/MWKdPvL & https://codepen.io/websanity/pen/MWKdPvL?editors=1100 ## Slide 249 http://codepen.io/websanity/pen/qpvin?editors=110 ## Slide 250 http://codepen.io/websanity/pen/qpvin?editors=110 ## Slide 251 http://codepen.io/websanity/pen/qpvin?editors=110 ## Slide 252 http://codepen.io/websanity/pen/qpvin?editors=110 ## Slide 253 http://codepen.io/websanity/pen/qpvin?editors=110 ## Slide 257 Diagram by Scott Granneman & Jans Carton ## Slide 259 Diagrams by Scott Granneman & Jans Carton https://www.w3.org/TR/css-grid-1/ ## Slide 260 Diagrams by Scott Granneman & Jans Carton https://www.w3.org/TR/css-grid-1/ ## Slide 262 Jans add Contexts Contexts * Formatting (Layout) * Positioning * Stacking ## Slide 265 http://codepen.io/websanity/pen/Jqsph?editors=110 ## Slide 269 http://codepen.io/websanity/pen/hrGwq ## Slide 272 https://codepen.io/websanity/pen/GYrovp?editors=1100 ## Slide 273 https://codepen.io/websanity/pen/GYrovp?editors=1100 ## Slide 274 https://codepen.io/websanity/pen/GYrovp?editors=1100 ## Slide 275 https://codepen.io/websanity/pen/GYrovp?editors=1100 ## Slide 278 http://codepen.io/websanity/pen/uempC ## Slide 279 http://codepen.io/websanity/pen/uempC ## Slide 283 http://codepen.io/websanity/pen/aCkjz ## Slide 284 http://codepen.io/websanity/pen/aCkjz ## Slide 287 http://html5-demos.appspot.com/static/css/sticky.html ## Slide 289 http://codepen.io/websanity/pen/aOJVOy?editors=110 ## Slide 290 http://codepen.io/websanity/pen/aOJVOy?editors=110 ## Slide 291 http://codepen.io/websanity/pen/aOJVOy?editors=110 ## Slide 292 http://codepen.io/websanity/pen/aOJVOy?editors=110 ## Slide 293 http://codepen.io/websanity/pen/aOJVOy?editors=110 ## Slide 294 http://codepen.io/websanity/pen/aOJVOy?editors=110 ## Slide 295 The last heading doesn’t go to the top. Solution: extra padding on the bottom http://codepen.io/websanity/pen/aOJVOy?editors=110 ## Slide 297 http://codepen.io/websanity/pen/NqpwWQ?editors=110 Example based on http://jsfiddle.net/daker/ecpTw/light/ ## Slide 298 http://codepen.io/websanity/pen/NqpwWQ?editors=110 Example based on http://jsfiddle.net/daker/ecpTw/light/ ## Slide 299 http://codepen.io/websanity/pen/NqpwWQ?editors=110 Example based on http://jsfiddle.net/daker/ecpTw/light/ ## Slide 300 http://codepen.io/websanity/pen/NqpwWQ?editors=110 Example based on http://jsfiddle.net/daker/ecpTw/light/ ## Slide 301 position: static means it is not positioned ## Slide 302 https://caniuse.com/#search=absolute https://caniuse.com/#search=fixed https://caniuse.com/#search=sticky (updated 2020-07-13) ## Slide 304 https://developer.mozilla.org/en-US/docs/Web/CSS/inset ## Slide 308 http://codepen.io/websanity/pen/EhFuC?editors=110 ## Slide 314 “Traditionally, Korean was written in columns, from top to bottom, right to left, but it is now usually written in rows, from left to right, top to bottom.” Accessed 2020-07-10. “The Old Uyghur script and its descendants — Traditional Mongolian, Oirat Clear, Manchu, and Buryat are the only known vertical scripts written from left to right.” <[^https://en.wikipedia.org/w/index.php?title=Horizontal_and_vertical_writing_in_East_Asian_scripts&oldid=960999243]> Accessed 2020-07-10. ## Slide 316 Diagrams created by Jans Carton & Scott Granneman ## Slide 317 Diagrams created by Jans Carton & Scott Granneman ## Slide 318 Diagrams created by Jans Carton & Scott Granneman ## Slide 319 Diagrams created by Jans Carton & Scott Granneman ## Slide 320 Definition of physical: https://drafts.csswg.org/css-writing-modes-4/#physical ## Slide 321 https://account.microsoft.com/account/Account?lang=en-US ## Slide 322 https://account.microsoft.com/account/Account?lang=he-IL ## Slide 325 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties ## Slide 331 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment ## Slide 332 https://codepen.io/websanity/pen/WNrzyYV?editors=1100 ## Slide 333 For more, see references to I18n (internationalization) throughout these presentations ## Slide 337 https://developer.mozilla.org/en-US/docs/Web/CSS/column-width ## Slide 338 https://developer.mozilla.org/en-US/docs/Web/CSS/column-width ## Slide 339 https://developer.mozilla.org/en-US/docs/Web/CSS/column-count ## Slide 340 https://developer.mozilla.org/en-US/docs/Web/CSS/columns ## Slide 341 https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap ## Slide 342 https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule ## Slide 343 https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-color https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-style https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-width ## Slide 344 https://codepen.io/websanity/pen/qdeIm?editors=1100 ## Slide 345 https://codepen.io/websanity/pen/Fejgm?editors=1100 ## Slide 346 https://codepen.io/websanity/pen/Fejgm?editors=1100 Why 3×40px? Because there were 3 columns on the previous slide ## Slide 347 https://codepen.io/websanity/pen/Fejgm?editors=1100 Why 2×40px? Because there were 2 columns on the previous slide ## Slide 348 https://codepen.io/websanity/pen/Fejgm?editors=1100 ## Slide 349 https://developer.mozilla.org/en-US/docs/Web/CSS/column-span ## Slide 350 https://developer.mozilla.org/en-US/docs/Web/CSS/column-fill ## Slide 351 https://developer.mozilla.org/en-US/docs/Web/CSS/column-fill ## Slide 352 https://codepen.io/websanity/pen/yLexKMr ## Slide 353 http://codepen.io/websanity/pen/Fejgm?editors=110 ## Slide 354 https://caniuse.com/#feat=mdn-css_properties_column-count https://caniuse.com/#feat=mdn-css_properties_column-width https://caniuse.com/#feat=mdn-css_properties_columns https://caniuse.com/#feat=mdn-css_properties_column-gap_multicol_context https://caniuse.com/#feat=mdn-css_properties_column-rule https://caniuse.com/#feat=mdn-css_properties_column-span https://caniuse.com/#feat=mdn-css_properties_column-fill ## Slide 355 Move/copy to CSS - Layout in multi-column part ## Slide 362 https://codepen.io/websanity/pen/Fejgm?editors=1100 ## Slide 363 http://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after.html ## Slide 365 Still from Oliver! (1968) ## Slide 366 The Merry Widow (1907): https://www.lubranomusic.com/pages/books/32051/franz-lehar/the-merry-widow-piano-vocal-score Orphans of the Storm (1921): https://www.imdb.com/title/tt0012532/?ref_=fn_al_tt_1 ## Slide 369 From H.P. Lovecraft’s “Dagon”: http://www.hplovecraft.com/writings/texts/fiction/d.aspx ## Slide 371 From H.P. Lovecraft’s “Dagon”: http://www.hplovecraft.com/writings/texts/fiction/d.aspx ## Slide 375 https://caniuse.com/#search=widows https://caniuse.com/#search=orphans ## Slide 382 https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_mode dev.w3.org/csswg/css-flexbox/ ## Slide 383 WD = Working Draft, the 1st stage, so 4 more to go! LC = Last Call, the 2nd stage, so 3 more to go! Positioned both changes the layout mode of the positioned box AND it changes the box’s positioning scheme http://www.w3.org/Style/CSS/current-work https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_mode https://www.w3.org/TR/css-flexbox-1/ ## Slide 384 WD = Working Draft, the 1st stage, so 4 more to go! LC = Last Call, the 2nd stage, so 3 more to go! Positioned both changes the layout mode of the positioned box AND it changes the box’s positioning scheme http://www.w3.org/Style/CSS/current-work https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_mode https://www.w3.org/TR/css-flexbox-1/ ## Slide 385 WD = Working Draft, the 1st stage, so 4 more to go! LC = Last Call, the 2nd stage, so 3 more to go! Positioned both changes the layout mode of the positioned box AND it changes the box’s positioning scheme http://www.w3.org/Style/CSS/current-work https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_mode https://www.w3.org/TR/css-flexbox-1/ ## Slide 390 http://codepen.io/websanity/pen/xigle?editors=110