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