Notes for CSS - Layout By Scott Granneman & Jans Carton Find the presentation at http://www.granneman.com/presentations/ ## Slide 4 https://codepen.io/websanity/pen/ZEQxVLj?editors=1100 ## Slide 5 https://codepen.io/websanity/pen/PoZRXEp?editors=1100 ## Slide 9 https://developer.mozilla.org/en-US/docs/Web/CSS/display ## Slide 14 Deveria, Alexis [@Fyrd]. “CSS property: display: Multi-keyword values”. Can I use…, 22 Apr 2022, https://caniuse.com/mdn-css_properties_display_multi-keyword_values. Accessed 22 Apr 2022. MDN contributors. “display”. MDN Web Docs, 17 Apr 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/display. Accessed 22 Apr 2022. ## Slide 18 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 19 The Render Tree also adds things that weren’t in the DOM, like list item marker boxes or anonymous block boxes The browser processing pipeline is covered in the CSS Overview presentation Diagram by Scott Granneman & Jans Carton ## Slide 20 CSS Display Module Level 3 W3C Candidate Recommendation, 28 August 2018 https://www.w3.org/TR/css-display-3/#intro ## Slide 21 CSS Display Module Level 3 W3C Candidate Recommendation, 28 August 2018 https://www.w3.org/TR/css-display-3/#intro ## Slide 25 https://codepen.io/websanity/pen/LgrXvj?editors=1100 ## Slide 26 https://codepen.io/websanity/pen/LgrXvj?editors=1100 ## Slide 27 https://codepen.io/websanity/pen/LgrXvj?editors=1100 ## Slide 28 https://codepen.io/websanity/pen/LgrXvj?editors=1100 ## Slide 31 Chinese Porcelain Vase by design56, licensed from Can Stock Photo, 2014-08-04 http://www.canstockphoto.com/chinese-porcelain-vase-10824229.html ## Slide 32 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 33 Giftwrapped by Lightreign, licensed from Can Stock Photo, 2014-08-04 http://www.canstockphoto.com/giftwrapped-1395457.html ## Slide 39 WebSanity. “CSS: box-sizing: content-box”. CodePen, 30 Mar 2023, https://codepen.io/websanity/pen/mdOaKG?editors=1100. Accessed 30 Mar 2023. ## Slide 40 WebSanity. “CSS: box-sizing: content-box”. CodePen, 30 Mar 2023, https://codepen.io/websanity/pen/mdOaKG?editors=1100. Accessed 30 Mar 2023. ## Slide 44 FIXME add example of width & percentage ## Slide 49 https://developer.mozilla.org/en-US/docs/Web/CSS/border-width ## Slide 50 https://developer.mozilla.org/en-US/docs/Web/CSS/border-width ## Slide 51 https://developer.mozilla.org/en-US/docs/Web/CSS/border-width ## Slide 61 FIXME show example of blockquote border on left ## Slide 64 https://developer.mozilla.org/en-US/docs/Web/CSS/margin ## Slide 65 https://developer.mozilla.org/en-US/docs/Web/CSS/margin ## Slide 66 https://developer.mozilla.org/en-US/docs/Web/CSS/margin FIXME this is repetitive with 2 slides earlier; same with padding & border ## Slide 68 http://codepen.io/websanity/pen/kejHu?editors=110 FIXME get an easier example! ## Slide 69 http://codepen.io/websanity/pen/kejHu?editors=110 ## Slide 70 MDN contributors. “margin”. MDN Web Docs, 21 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/margin. Accessed 2 Apr 2023. ## Slide 71 WebSanity. “CSS: Centering Blocks”. CodePen, 20 Mar 2023, https://codepen.io/websanity/pen/GRoJeB?editors=1100. Accessed 30 Mar 2023. ## Slide 72 WebSanity. “CSS: Centering Blocks”. CodePen, 20 Mar 2023, https://codepen.io/websanity/pen/GRoJeB?editors=1100. Accessed 30 Mar 2023. ## Slide 73 WebSanity. “CSS: Centering Blocks”. CodePen, 20 Mar 2023, https://codepen.io/websanity/pen/GRoJeB?editors=1100. Accessed 30 Mar 2023. ## Slide 74 WebSanity. “CSS: Centering Blocks”. CodePen, 20 Mar 2023, https://codepen.io/websanity/pen/GRoJeB?editors=1100. Accessed 30 Mar 2023. ## Slide 75 WebSanity. “CSS: Centering Blocks”. CodePen, 20 Mar 2023, https://codepen.io/websanity/pen/GRoJeB?editors=1100. Accessed 30 Mar 2023. ## Slide 78 http://codepen.io/websanity/pen/AmIJr?editors=110 ## Slide 80 http://codepen.io/websanity/pen/fwLhC FIXME: add slide showing * {box-sizing: border-box;} ## Slide 82 http://codepen.io/websanity/pen/EqrxH ## Slide 83 https://caniuse.com/#feat=css3-boxsizing ## Slide 84 FIXME: add margin:0 for body & explain why ## Slide 86 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 87 https://codepen.io/websanity/pen/mzMXzy ## Slide 88 https://codepen.io/websanity/pen/mzMXzy ## Slide 89 https://codepen.io/websanity/pen/EdXoGb?editors=1100 ## Slide 90 https://codepen.io/websanity/pen/EdXoGb?editors=1100 ## Slide 91 https://codepen.io/websanity/pen/mzMXzy?editors=1100 ## Slide 92 https://codepen.io/websanity/pen/mzMXzy?editors=1100 ## Slide 94 https://drafts.csswg.org/css-sizing-3/#width-height-keywords ## Slide 95 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 96 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 97 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 98 Current hack, which Bootstrap has implemented padding-bottom: 50% aspect-ratio property https://drafts.csswg.org/css-sizing-4/#aspect-ratio & https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio & https://css-tricks.com/aspect-ratio-boxes/ FIXME https://css-examples.wizardzines.com/#padding-bottom-trick ## Slide 103 http://codepen.io/websanity/pen/sljbJ?editors=110 ## Slide 104 http://codepen.io/websanity/pen/sljbJ?editors=110 ## Slide 105 http://codepen.io/websanity/pen/sljbJ?editors=110 ## Slide 106 http://codepen.io/websanity/pen/sljbJ?editors=110 ## Slide 108 http://codepen.io/websanity/pen/cwGtx?editors=110 ## Slide 109 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 112 Unlike visibility: hidden, which hides the element but leaves it in flow as though it were still there ## Slide 113 http://codepen.io/websanity/pen/Lzrie?editors=110 ## Slide 114 Sub-menus are hidden by display: none until the mouse hovers over them http://www.stlzoo.org ## Slide 115 MDN contributors. “aria-hidden”. MDN Web Docs, 13 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden. Accessed 2 Nov 2022. ## Slide 117 https://codepen.io/websanity/pen/dgjbjP?editors=1100 ## Slide 118 https://codepen.io/websanity/pen/dgjbjP?editors=1100 ## Slide 119 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 122 WebSanity. “CSS Layout: Block Layout”. CodePen, 14 July 2020, https://codepen.io/websanity/full/pxePLQ/. Accessed 27 Sep 2022. ## Slide 123 WebSanity. “CSS Layout: Inline Layout”. CodePen, 5 July 2020, https://codepen.io/websanity/full/wYJdgr/. Accessed 14 Jan 2024. ## Slide 124 WebSanity. “CSS Layout: Inline Layout with floats”. CodePen, 5 July 2020, https://codepen.io/websanity/pen/LYGQmQN?editors=1100. Accessed 15 Jan 2024. ## Slide 125 https://codepen.io/websanity/pen/MWKQGQx?editors=1100 ## Slide 128 WebSanity. “CSS Layout: Inline Layout”. CodePen, 5 July 2020, https://codepen.io/websanity/full/wYJdgr/. Accessed 14 Jan 2024. ## Slide 130 WebSanity. “CSS Layout: Inline Layout with floats”. CodePen, 5 July 2020, https://codepen.io/websanity/pen/LYGQmQN?editors=1100. Accessed 15 Jan 2024. ## Slide 132 WebSanity. “CSS Layout: Inline Layout”. CodePen, 5 July 2020, https://codepen.io/websanity/full/wYJdgr/. Accessed 14 Jan 2024. ## Slide 135 https://codepen.io/websanity/pen/GOpQWJ?editors=1100 ## Slide 136 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 138 http://codepen.io/websanity/pen/dztpu?editors=110 ## Slide 139 https://codepen.io/websanity/pen/ePjYNo?editors=1100 ## Slide 140 https://codepen.io/websanity/pen/ePjYNo?editors=1100 ## Slide 143 WebSanity. “CSS Layout: Block Layout”. CodePen, 14 July 2020, https://codepen.io/websanity/full/pxePLQ/. Accessed 27 Sep 2022. ## Slide 144 WebSanity. “CSS Layout: Block Layout”. CodePen, 14 July 2020, https://codepen.io/websanity/full/pxePLQ/. Accessed 27 Sep 2022. ## Slide 145 WebSanity. “CSS Layout: Block Layout”. CodePen, 14 July 2020, https://codepen.io/websanity/full/pxePLQ/. Accessed 27 Sep 2022. ## Slide 150 http://codepen.io/websanity/pen/zcqFK?editors=110 ## Slide 151 http://codepen.io/websanity/pen/vgHJa?editors=010 ## Slide 152 http://codepen.io/websanity/pen/fbDwc?editors=110 ## Slide 153 The

has value of block, so therefore the anonymous block boxes are needed for the layout From H.P. Lovecraft’s “The Shadow Out of Time”, 1936 ## Slide 155 Sneddon, Sam & Tantek Çelik. “9.5. Floats”. CSS 2 Editor’s Draft, 24 Feb 2022, https://drafts.csswg.org/css2/#floats. Accessed 3 May 2022. MDN contributors. “float”. MDN Web Docs, 5 Apr 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/float. Accessed 3 May 2022. ## Slide 156 Sneddon, Sam & Tantek Çelik. “9.5.1. Positioning the float: the float property”. CSS 2 Editor’s Draft, 24 Feb 2022, https://drafts.csswg.org/css2/#float-position. Accessed 3 May 2022. MDN contributors. “float”. MDN Web Docs, 5 Apr 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/float. Accessed 3 May 2022. ## Slide 157 WebSanity. “CSS Layout: Block & Inline Layout with floats”. CodePen, 5 July 2020, https://codepen.io/websanity/pen/MWKQGQx?editors=1100. Accessed 3 May 2022. ## Slide 158 WebSanity. “CSS Layout: Block & Inline Layout with floats”. CodePen, 5 July 2020, https://codepen.io/websanity/pen/MWKQGQx?editors=1100. Accessed 3 May 2022. ## Slide 159 WebSanity. “CSS Layout: Block & Inline Layout with floats”. CodePen, 5 July 2020, https://codepen.io/websanity/pen/MWKQGQx?editors=1100. Accessed 3 May 2022. ## Slide 160 WebSanity. “CSS Layout: Block & Inline Layout with floats”. CodePen, 5 July 2020, https://codepen.io/websanity/pen/MWKQGQx?editors=1100. Accessed 3 May 2022. ## Slide 161 Sneddon, Sam & Tantek Çelik. “9.5.1. Positioning the float: the float property”. CSS 2 Editor’s Draft, 24 Feb 2022, https://drafts.csswg.org/css2/#float-position. Accessed 3 May 2022. MDN contributors. “float”. MDN Web Docs, 5 Apr 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/float. Accessed 3 May 2022. ## Slide 162 Sneddon, Sam & Tantek Çelik. “9.5.1. Positioning the float: the float property”. CSS 2 Editor’s Draft, 24 Feb 2022, https://drafts.csswg.org/css2/#float-position. Accessed 3 May 2022. MDN contributors. “float”. MDN Web Docs, 5 Apr 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/float. Accessed 3 May 2022. ## Slide 163 WebSanity. “CSS: float”. CodePen, 23 July 2020, http://codepen.io/websanity/pen/veJdq?editors=110. Accessed 3 May 2022. FIXME - show entire CSS ## Slide 164 WebSanity. “CSS: float”. CodePen, 23 July 2020, http://codepen.io/websanity/pen/veJdq?editors=110. Accessed 3 May 2022. FIXME previous slide should show image without margin! ## Slide 166 WebSanity. “CSS: float multiple boxes”. CodePen, 12 Mar 2020, http://codepen.io/websanity/pen/Ivxft?editors=100. Accessed 3 May 2022. ## Slide 167 WebSanity. “CSS: float multiple boxes”. CodePen, 12 Mar 2020, http://codepen.io/websanity/pen/Ivxft?editors=100. Accessed 3 May 2022. 3 elements, all floated right ## Slide 168 WebSanity. “CSS: quick & dirty image gallery using float”. CodePen, 12 Mar 2020, https://codepen.io/websanity/full/bQXZNm. Accessed 3 May 2022. ## Images Cthulhu: Neira, Danelo [dano]. “Cthulhu”. Dibujando, 20 Apr. 2015, https://dibujando.net/dib/cthulhu-96836. Accessed 21 Feb 2017. Licensed CC BY-SA 3.0: https://creativecommons.org/licenses/by-sa/3.0/deed.es. Randolph Carter: Foster, Mark [Mark W]. “Lovecraftian characters”. HP Lovecraft Art, 11 Jan 2014, https://web.archive.org/web/20181013123339/http://hplovecraftart.blogspot.com/2014/01/. Accessed 21 Feb 2017. Fair use. Modified by cropping. Shub-Nigguarth: Bukowsi, Michael. “SHUB-NIGGURATH”. Yog-Blogsoth, 19 July 2013, http://yog-blogsoth.blogspot.com/2013/07/shub-niggurath.html. Accessed 21 Feb 2017. Modified by cropping. Tsathaggua: Norton, Chase. “Tsathaggua”. Flickr, 11 Jan 2017, https://www.flickr.com/photos/150863707@N06/31885230880/in/photostream/. Accessed 6 Dec 2018. Licensed CC BY 2.0: https://creativecommons.org/licenses/by/2.0/. Modified by cropping. Abdul Alhazred: Foster, Mark [Mark W]. “HP Lovecraft's mad-arab, Abdul Alhazred, the creator of the Necronomicon”. HP Lovecraft Art, 19 Dec 2013, https://web.archive.org/web/20181013145904/https://hplovecraftart.blogspot.com/2013/12/hp-lovecrafts-mad-arab-abdul-alhazred.html. Accessed Fair use. Modified by cropping. Yog-Sothoth: Luong, Richard. “Yog Sothoth Limited Edition Lithograph Art Print Signed and Numbered”. Etsy, https://www.etsy.com/listing/168884701/yog-sothoth-limited-edition-lithograph?ref=shop_home_active_5. Accessed Fair use. Modified by cropping. Azathoth: Stone, Micah. “Azathoth (1)”. The H. P. Lovecraft Wiki, https://lovecraft.fandom.com/wiki/File:Azathoth_(1).jpg. Accessed 21 Feb 2017. Fair use. Nyarlathotep: Jens Heimdahl - Facebook : Art of Jens Heimdahl. “File:The Black Man.jpg”. Wikipedia, 25 Sep 1999, https://en.wikipedia.org/wiki/File:The_Black_Man.jpg. Accessed 21 Feb 2017. Licensed CC BY-SA 4.0: https://creativecommons.org/licenses/by-sa/4.0/. Modified by cropping. Shoggoth: Nottsuo - nottsuo.deviantart - www.pixiv.net - twitter.com/nottsuo. “File:Shoggoth by Nottsuo.jpg”. Wikipedia, 31 Jan 2017, https://en.wikipedia.org/wiki/File:Shoggoth_by_Nottsuo.jpg. Accessed 6 Dec 2018. Licensed CC BY 3.0: https://creativecommons.org/licenses/by/3.0/. Rhan-Tegoth: EldreshSaenz. “Entities of the Lovecraft Mythos: Part 2” Imgur, 27 Mar 2015, https://imgur.com/gallery/lNxsr. Accessed 7 Dec 2018. Fair use. Modified by cropping. Cyäegha: nightserpent. “Cyaegha”. DeviantArt, 20 May 2011, https://www.deviantart.com/nightserpent/art/Cyaegha-209584704. Accessed 7 Dec 2018. Fair use. Modified by cropping. Cthugha: douzen. “Cthugha”. DeviantArt, 16 Oct 2012, https://www.deviantart.com/douzen/art/Cthugha-332693208. Accessed 27 Mar 2015. Fair use. Modified by cropping. Star Vampire. Norton, Chase. “Star Vampire”. Flickr, 20 Mar. 2017, https://www.flickr.com/photos/150863707@N06/33154876152/in/photostream/. Accessed Licensed CC BY 2.0: https://creativecommons.org/licenses/by/2.0/. Modified by cropping. Hastur: Norton, Chase. “Hastur”. Flickr, 20 Jan 2017, https://www.flickr.com/photos/150863707@N06/31609393814/in/photostream/. Accessed Licensed CC BY 2.0: https://creativecommons.org/licenses/by/2.0/. Modified by cropping. ## Slide 169 FIXME show CSS! WebSanity. “CSS: quick & dirty image gallery using float”. CodePen, 12 Mar 2020, https://codepen.io/websanity/full/bQXZNm. Accessed 3 May 2022. ## Images Cthulhu: Neira, Danelo [dano]. “Cthulhu”. Dibujando, 20 Apr. 2015, https://dibujando.net/dib/cthulhu-96836. Accessed 21 Feb 2017. Licensed CC BY-SA 3.0: https://creativecommons.org/licenses/by-sa/3.0/deed.es. Randolph Carter: Foster, Mark [Mark W]. “Lovecraftian characters”. HP Lovecraft Art, 11 Jan 2014, https://web.archive.org/web/20181013123339/http://hplovecraftart.blogspot.com/2014/01/. Accessed 21 Feb 2017. Fair use. Modified by cropping. Shub-Nigguarth: Bukowsi, Michael. “SHUB-NIGGURATH”. Yog-Blogsoth, 19 July 2013, http://yog-blogsoth.blogspot.com/2013/07/shub-niggurath.html. Accessed 21 Feb 2017. Modified by cropping. Tsathaggua: Norton, Chase. “Tsathaggua”. Flickr, 11 Jan 2017, https://www.flickr.com/photos/150863707@N06/31885230880/in/photostream/. Accessed 6 Dec 2018. Licensed CC BY 2.0: https://creativecommons.org/licenses/by/2.0/. Modified by cropping. Abdul Alhazred: Foster, Mark [Mark W]. “HP Lovecraft's mad-arab, Abdul Alhazred, the creator of the Necronomicon”. HP Lovecraft Art, 19 Dec 2013, https://web.archive.org/web/20181013145904/https://hplovecraftart.blogspot.com/2013/12/hp-lovecrafts-mad-arab-abdul-alhazred.html. Accessed Fair use. Modified by cropping. Yog-Sothoth: Luong, Richard. “Yog Sothoth Limited Edition Lithograph Art Print Signed and Numbered”. Etsy, https://www.etsy.com/listing/168884701/yog-sothoth-limited-edition-lithograph?ref=shop_home_active_5. Accessed Fair use. Modified by cropping. Azathoth: Stone, Micah. “Azathoth (1)”. The H. P. Lovecraft Wiki, https://lovecraft.fandom.com/wiki/File:Azathoth_(1).jpg. Accessed 21 Feb 2017. Fair use. Nyarlathotep: Jens Heimdahl - Facebook : Art of Jens Heimdahl. “File:The Black Man.jpg”. Wikipedia, 25 Sep 1999, https://en.wikipedia.org/wiki/File:The_Black_Man.jpg. Accessed 21 Feb 2017. Licensed CC BY-SA 4.0: https://creativecommons.org/licenses/by-sa/4.0/. Modified by cropping. Shoggoth: Nottsuo - nottsuo.deviantart - www.pixiv.net - twitter.com/nottsuo. “File:Shoggoth by Nottsuo.jpg”. Wikipedia, 31 Jan 2017, https://en.wikipedia.org/wiki/File:Shoggoth_by_Nottsuo.jpg. Accessed 6 Dec 2018. Licensed CC BY 3.0: https://creativecommons.org/licenses/by/3.0/. Rhan-Tegoth: EldreshSaenz. “Entities of the Lovecraft Mythos: Part 2” Imgur, 27 Mar 2015, https://imgur.com/gallery/lNxsr. Accessed 7 Dec 2018. Fair use. Modified by cropping. Cyäegha: nightserpent. “Cyaegha”. DeviantArt, 20 May 2011, https://www.deviantart.com/nightserpent/art/Cyaegha-209584704. Accessed 7 Dec 2018. Fair use. Modified by cropping. Cthugha: douzen. “Cthugha”. DeviantArt, 16 Oct 2012, https://www.deviantart.com/douzen/art/Cthugha-332693208. Accessed 27 Mar 2015. Fair use. Modified by cropping. Star Vampire. Norton, Chase. “Star Vampire”. Flickr, 20 Mar. 2017, https://www.flickr.com/photos/150863707@N06/33154876152/in/photostream/. Accessed Licensed CC BY 2.0: https://creativecommons.org/licenses/by/2.0/. Modified by cropping. Hastur: Norton, Chase. “Hastur”. Flickr, 20 Jan 2017, https://www.flickr.com/photos/150863707@N06/31609393814/in/photostream/. Accessed Licensed CC BY 2.0: https://creativecommons.org/licenses/by/2.0/. Modified by cropping. ## Slide 170 WebSanity. “CSS: quick & dirty image gallery using float”. CodePen, 12 Mar 2020, https://codepen.io/websanity/full/bQXZNm. Accessed 3 May 2022. ## Images Cthulhu: Neira, Danelo [dano]. “Cthulhu”. Dibujando, 20 Apr. 2015, https://dibujando.net/dib/cthulhu-96836. Accessed 21 Feb 2017. Licensed CC BY-SA 3.0: https://creativecommons.org/licenses/by-sa/3.0/deed.es. Randolph Carter: Foster, Mark [Mark W]. “Lovecraftian characters”. HP Lovecraft Art, 11 Jan 2014, https://web.archive.org/web/20181013123339/http://hplovecraftart.blogspot.com/2014/01/. Accessed 21 Feb 2017. Fair use. Modified by cropping. Shub-Nigguarth: Bukowsi, Michael. “SHUB-NIGGURATH”. Yog-Blogsoth, 19 July 2013, http://yog-blogsoth.blogspot.com/2013/07/shub-niggurath.html. Accessed 21 Feb 2017. Modified by cropping. Tsathaggua: Norton, Chase. “Tsathaggua”. Flickr, 11 Jan 2017, https://www.flickr.com/photos/150863707@N06/31885230880/in/photostream/. Accessed 6 Dec 2018. Licensed CC BY 2.0: https://creativecommons.org/licenses/by/2.0/. Modified by cropping. Abdul Alhazred: Foster, Mark [Mark W]. “HP Lovecraft's mad-arab, Abdul Alhazred, the creator of the Necronomicon”. HP Lovecraft Art, 19 Dec 2013, https://web.archive.org/web/20181013145904/https://hplovecraftart.blogspot.com/2013/12/hp-lovecrafts-mad-arab-abdul-alhazred.html. Accessed Fair use. Modified by cropping. Yog-Sothoth: Luong, Richard. “Yog Sothoth Limited Edition Lithograph Art Print Signed and Numbered”. Etsy, https://www.etsy.com/listing/168884701/yog-sothoth-limited-edition-lithograph?ref=shop_home_active_5. Accessed Fair use. Modified by cropping. Azathoth: Stone, Micah. “Azathoth (1)”. The H. P. Lovecraft Wiki, https://lovecraft.fandom.com/wiki/File:Azathoth_(1).jpg. Accessed 21 Feb 2017. Fair use. Nyarlathotep: Jens Heimdahl - Facebook : Art of Jens Heimdahl. “File:The Black Man.jpg”. Wikipedia, 25 Sep 1999, https://en.wikipedia.org/wiki/File:The_Black_Man.jpg. Accessed 21 Feb 2017. Licensed CC BY-SA 4.0: https://creativecommons.org/licenses/by-sa/4.0/. Modified by cropping. Shoggoth: Nottsuo - nottsuo.deviantart - www.pixiv.net - twitter.com/nottsuo. “File:Shoggoth by Nottsuo.jpg”. Wikipedia, 31 Jan 2017, https://en.wikipedia.org/wiki/File:Shoggoth_by_Nottsuo.jpg. Accessed 6 Dec 2018. Licensed CC BY 3.0: https://creativecommons.org/licenses/by/3.0/. Rhan-Tegoth: EldreshSaenz. “Entities of the Lovecraft Mythos: Part 2” Imgur, 27 Mar 2015, https://imgur.com/gallery/lNxsr. Accessed 7 Dec 2018. Fair use. Modified by cropping. Cyäegha: nightserpent. “Cyaegha”. DeviantArt, 20 May 2011, https://www.deviantart.com/nightserpent/art/Cyaegha-209584704. Accessed 7 Dec 2018. Fair use. Modified by cropping. Cthugha: douzen. “Cthugha”. DeviantArt, 16 Oct 2012, https://www.deviantart.com/douzen/art/Cthugha-332693208. Accessed 27 Mar 2015. Fair use. Modified by cropping. Star Vampire. Norton, Chase. “Star Vampire”. Flickr, 20 Mar. 2017, https://www.flickr.com/photos/150863707@N06/33154876152/in/photostream/. Accessed Licensed CC BY 2.0: https://creativecommons.org/licenses/by/2.0/. Modified by cropping. Hastur: Norton, Chase. “Hastur”. Flickr, 20 Jan 2017, https://www.flickr.com/photos/150863707@N06/31609393814/in/photostream/. Accessed Licensed CC BY 2.0: https://creativecommons.org/licenses/by/2.0/. Modified by cropping. ## Slide 172 WebSanity. “CSS: quick & dirty image gallery using float”. CodePen, 12 Mar 2020, https://codepen.io/websanity/full/bQXZNm. Accessed 3 May 2022. ## Images Cthulhu: Neira, Danelo [dano]. “Cthulhu”. Dibujando, 20 Apr. 2015, https://dibujando.net/dib/cthulhu-96836. Accessed 21 Feb 2017. Licensed CC BY-SA 3.0: https://creativecommons.org/licenses/by-sa/3.0/deed.es. Randolph Carter: Foster, Mark [Mark W]. “Lovecraftian characters”. HP Lovecraft Art, 11 Jan 2014, https://web.archive.org/web/20181013123339/http://hplovecraftart.blogspot.com/2014/01/. Accessed 21 Feb 2017. Fair use. Modified by cropping. Shub-Nigguarth: Bukowsi, Michael. “SHUB-NIGGURATH”. Yog-Blogsoth, 19 July 2013, http://yog-blogsoth.blogspot.com/2013/07/shub-niggurath.html. Accessed 21 Feb 2017. Modified by cropping. Tsathaggua: Norton, Chase. “Tsathaggua”. Flickr, 11 Jan 2017, https://www.flickr.com/photos/150863707@N06/31885230880/in/photostream/. Accessed 6 Dec 2018. Licensed CC BY 2.0: https://creativecommons.org/licenses/by/2.0/. Modified by cropping. Abdul Alhazred: Foster, Mark [Mark W]. “HP Lovecraft's mad-arab, Abdul Alhazred, the creator of the Necronomicon”. HP Lovecraft Art, 19 Dec 2013, https://web.archive.org/web/20181013145904/https://hplovecraftart.blogspot.com/2013/12/hp-lovecrafts-mad-arab-abdul-alhazred.html. Accessed Fair use. Modified by cropping. Yog-Sothoth: Luong, Richard. “Yog Sothoth Limited Edition Lithograph Art Print Signed and Numbered”. Etsy, https://www.etsy.com/listing/168884701/yog-sothoth-limited-edition-lithograph?ref=shop_home_active_5. Accessed Fair use. Modified by cropping. Azathoth: Stone, Micah. “Azathoth (1)”. The H. P. Lovecraft Wiki, https://lovecraft.fandom.com/wiki/File:Azathoth_(1).jpg. Accessed 21 Feb 2017. Fair use. Nyarlathotep: Jens Heimdahl - Facebook : Art of Jens Heimdahl. “File:The Black Man.jpg”. Wikipedia, 25 Sep 1999, https://en.wikipedia.org/wiki/File:The_Black_Man.jpg. Accessed 21 Feb 2017. Licensed CC BY-SA 4.0: https://creativecommons.org/licenses/by-sa/4.0/. Modified by cropping. Shoggoth: Nottsuo - nottsuo.deviantart - www.pixiv.net - twitter.com/nottsuo. “File:Shoggoth by Nottsuo.jpg”. Wikipedia, 31 Jan 2017, https://en.wikipedia.org/wiki/File:Shoggoth_by_Nottsuo.jpg. Accessed 6 Dec 2018. Licensed CC BY 3.0: https://creativecommons.org/licenses/by/3.0/. Rhan-Tegoth: EldreshSaenz. “Entities of the Lovecraft Mythos: Part 2” Imgur, 27 Mar 2015, https://imgur.com/gallery/lNxsr. Accessed 7 Dec 2018. Fair use. Modified by cropping. Cyäegha: nightserpent. “Cyaegha”. DeviantArt, 20 May 2011, https://www.deviantart.com/nightserpent/art/Cyaegha-209584704. Accessed 7 Dec 2018. Fair use. Modified by cropping. Cthugha: douzen. “Cthugha”. DeviantArt, 16 Oct 2012, https://www.deviantart.com/douzen/art/Cthugha-332693208. Accessed 27 Mar 2015. Fair use. Modified by cropping. Star Vampire. Norton, Chase. “Star Vampire”. Flickr, 20 Mar. 2017, https://www.flickr.com/photos/150863707@N06/33154876152/in/photostream/. Accessed Licensed CC BY 2.0: https://creativecommons.org/licenses/by/2.0/. Modified by cropping. Hastur: Norton, Chase. “Hastur”. Flickr, 20 Jan 2017, https://www.flickr.com/photos/150863707@N06/31609393814/in/photostream/. Accessed Licensed CC BY 2.0: https://creativecommons.org/licenses/by/2.0/. Modified by cropping. ## Slide 174 WebSanity. “CSS: float multiple boxes without room”. CodePen, 7 Dec 2018, http://codepen.io/websanity/pen/dDafC?editors=110. Accessed 3 May 2022. ## Slide 175 Sneddon, Sam & Tantek Çelik. “9.5.2. Controlling flow next to floats: the clear property”. CSS 2 Editor’s Draft, 24 Feb 2022, https://drafts.csswg.org/css2/#flow-control. Accessed 3 May 2022. MDN contributors. “clear”. MDN Web Docs, 5 Apr 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/clear. Accessed 3 May 2022. ## Slide 176 Sneddon, Sam & Tantek Çelik. “9.5.2. Controlling flow next to floats: the clear property”. CSS 2 Editor’s Draft, 24 Feb 2022, https://drafts.csswg.org/css2/#flow-control. Accessed 3 May 2022. MDN contributors. “clear”. MDN Web Docs, 5 Apr 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/clear. Accessed 3 May 2022. ## Slide 177 http://codepen.io/websanity/pen/Frklb?editors=110 ## Slide 178 http://codepen.io/websanity/pen/Frklb?editors=110 ## Slide 179 WebSanity. “CSS: float & clear properties for new sections”. CodePen, 12 Mar 2020, https://codepen.io/websanity/pen/WNvzrgB?editors=1100. Accessed 3 May 2022. ## Slide 180 WebSanity. “CSS: float & clear properties for new sections”. CodePen, 12 Mar 2020, https://codepen.io/websanity/pen/WNvzrgB?editors=1100. Accessed 3 May 2022. ## Slide 181 WebSanity. “CSS: float multiple boxes”. CodePen, 12 Mar 2020, http://codepen.io/websanity/pen/Ivxft?editors=100. Accessed 3 May 2022. ## Slide 182 WebSanity. “CSS: float multiple boxes”. CodePen, 12 Mar 2020, http://codepen.io/websanity/pen/Ivxft?editors=100. Accessed 3 May 2022. ## Slide 184 FIXME add! ## Slide 187 Float: Deveria, Alexis [@Fyrd]. “CSS property: float”. Can I use…, 1 May 2022, https://caniuse.com/mdn-css_properties_float. Accessed 3 May 2022. MDN contributors. “float”. MDN Web Docs, 5 Apr 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/float. Accessed 3 May 2022. Clear: Deveria, Alexis [@Fyrd]. “CSS property: clear”. Can I use…, 1 May 2022, https://caniuse.com/mdn-css_properties_clear. Accessed 3 May 2022. MDN contributors. “clear”. MDN Web Docs, 5 Apr 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/clear. Accessed 3 May 2022. ## Slide 188 “Sting” sound: Sting.ogg, by PiAndWhippedCream. https://en.wikipedia.org/wiki/File:Sting.ogg. 31 July 2006. ## Slide 191 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context ## Slide 192 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context ## Slide 196 https://codepen.io/websanity/pen/abdqGPd?editors=1100 ## Slide 197 https://codepen.io/websanity/pen/abdqGPd?editors=1100 ## Slide 198 https://codepen.io/websanity/pen/abdqGPd?editors=1100 ## Slide 201 https://codepen.io/websanity/pen/LgBVNa?editors=1000 ## Slide 202 https://codepen.io/websanity/pen/LgBVNa?editors=1000 ## Slide 203 https://codepen.io/websanity/pen/LgBVNa?editors=1000 ## Slide 205 https://codepen.io/websanity/pen/bmWEBG?editors=1100 ## Slide 206 https://codepen.io/websanity/pen/bmWEBG?editors=1100 ## Slide 207 https://codepen.io/websanity/pen/bmWEBG?editors=1100 ## Slide 211 Note: Strictly speaking, these are block-level boxes AND a block box ## Slide 212 http://codepen.io/websanity/pen/hlmsu ## Slide 214 https://codepen.io/websanity/pen/NOMQJd?editors=1000 ## Slide 215 https://codepen.io/websanity/pen/GOpQWJ?editors=1100 ## Slide 216 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 218 https://codepen.io/websanity/pen/gZwLyz?editors=1100 ## Slide 219 https://codepen.io/websanity/pen/jXMVjR?editors=1100 ## Slide 223 http://codepen.io/websanity/pen/dztpu?editors=110 ## Slide 226 http://codepen.io/websanity/pen/gasHG?editors=110 ## Slide 232 https://codepen.io/websanity/pen/ZqMBPR?editors=1100 ## Slide 235 http://codepen.io/websanity/pen/ecAnh?editors=110 ## Slide 240 http://codepen.io/websanity/pen/KdEvz?editors=110 ## Slide 241 http://codepen.io/websanity/pen/KdEvz?editors=110 ## Slide 243 http://codepen.io/websanity/pen/KdEvz?editors=110 ## Slide 245 border can be set if a parent has border-collapse: border, but this is extremely rare ## Slide 246 http://codepen.io/websanity/pen/oJujv?editors=110 ## Slide 249 https://www.w3.org/TR/CSS22/tables.html#border-conflict-resolution ## Slide 250 https://cdpn.io/websanity/debug/MWKdPvL & https://codepen.io/websanity/pen/MWKdPvL?editors=1100 ## Slide 252 http://codepen.io/websanity/pen/qpvin?editors=110 ## Slide 253 http://codepen.io/websanity/pen/qpvin?editors=110 ## Slide 254 http://codepen.io/websanity/pen/qpvin?editors=110 ## Slide 255 http://codepen.io/websanity/pen/qpvin?editors=110 ## Slide 256 http://codepen.io/websanity/pen/qpvin?editors=110 ## Slide 260 Diagram by Scott Granneman & Jans Carton ## Slide 262 Diagrams by Scott Granneman & Jans Carton https://www.w3.org/TR/css-grid-1/ ## Slide 263 Diagrams by Scott Granneman & Jans Carton https://www.w3.org/TR/css-grid-1/ ## Slide 265 FIXME Jans add Contexts Contexts * Formatting (Layout) * Positioning * Stacking ## Slide 268 http://codepen.io/websanity/pen/Jqsph?editors=110 ## Slide 271 http://codepen.io/websanity/pen/hrGwq ## Slide 275 https://codepen.io/websanity/pen/GYrovp?editors=1100 ## Slide 276 https://codepen.io/websanity/pen/GYrovp?editors=1100 ## Slide 277 https://codepen.io/websanity/pen/GYrovp?editors=1100 ## Slide 278 https://codepen.io/websanity/pen/GYrovp?editors=1100 ## Slide 281 http://codepen.io/websanity/pen/uempC ## Slide 282 http://codepen.io/websanity/pen/uempC ## Slide 286 http://codepen.io/websanity/pen/aCkjz ## Slide 287 http://codepen.io/websanity/pen/aCkjz ## Slide 290 http://html5-demos.appspot.com/static/css/sticky.html ## 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 http://codepen.io/websanity/pen/aOJVOy?editors=110 ## Slide 296 http://codepen.io/websanity/pen/aOJVOy?editors=110 ## Slide 297 http://codepen.io/websanity/pen/aOJVOy?editors=110 ## Slide 298 The last heading doesn’t go to the top. Solution: extra padding on the bottom http://codepen.io/websanity/pen/aOJVOy?editors=110 ## Slide 300 http://codepen.io/websanity/pen/NqpwWQ?editors=110 Example based on http://jsfiddle.net/daker/ecpTw/light/ ## Slide 301 http://codepen.io/websanity/pen/NqpwWQ?editors=110 Example based on http://jsfiddle.net/daker/ecpTw/light/ ## Slide 302 http://codepen.io/websanity/pen/NqpwWQ?editors=110 Example based on http://jsfiddle.net/daker/ecpTw/light/ ## Slide 303 http://codepen.io/websanity/pen/NqpwWQ?editors=110 Example based on http://jsfiddle.net/daker/ecpTw/light/ ## Slide 304 position: static means it is not positioned ## Slide 305 https://caniuse.com/#search=absolute https://caniuse.com/#search=fixed https://caniuse.com/#search=sticky (updated 2020-07-13) ## Slide 307 https://developer.mozilla.org/en-US/docs/Web/CSS/inset ## Slide 309 FIXME: explain stacking context ## Slide 313 http://codepen.io/websanity/pen/EhFuC?editors=110 ## Slide 315 FIXME demo this: “Notice that the element with z-index: 8 is below the element with z-index: 1 even though it has a higher z-index.” ## Slide 316 FIXME demo this: “Notice that the element with z-index: 8 is below the element with z-index: 1 even though it has a higher z-index.” ## Slide 320 “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 322 Diagrams created by Jans Carton & Scott Granneman ## Slide 323 Diagrams created by Jans Carton & Scott Granneman ## Slide 324 Diagrams created by Jans Carton & Scott Granneman ## Slide 325 Diagrams created by Jans Carton & Scott Granneman ## Slide 326 Definition of physical: https://drafts.csswg.org/css-writing-modes-4/#physical ## Slide 327 https://account.microsoft.com/account/Account?lang=en-US ## Slide 328 https://account.microsoft.com/account/Account?lang=he-IL ## Slide 331 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties ## Slide 338 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment ## Slide 339 https://codepen.io/websanity/pen/WNrzyYV?editors=1100 ## Slide 340 For more, see references to I18n (internationalization) throughout these presentations ## Slide 344 https://developer.mozilla.org/en-US/docs/Web/CSS/column-width ## Slide 345 https://developer.mozilla.org/en-US/docs/Web/CSS/column-width ## Slide 346 https://developer.mozilla.org/en-US/docs/Web/CSS/column-count ## Slide 347 https://developer.mozilla.org/en-US/docs/Web/CSS/columns ## Slide 348 https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap ## Slide 349 https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule ## Slide 350 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 351 https://codepen.io/websanity/pen/qdeIm?editors=1100 ## Slide 352 https://codepen.io/websanity/pen/Fejgm?editors=1100 ## Slide 353 https://codepen.io/websanity/pen/Fejgm?editors=1100 Why 3×40px? Because there were 3 columns on the previous slide ## Slide 354 https://codepen.io/websanity/pen/Fejgm?editors=1100 Why 2×40px? Because there were 2 columns on the previous slide ## Slide 355 https://codepen.io/websanity/pen/Fejgm?editors=1100 ## Slide 356 https://developer.mozilla.org/en-US/docs/Web/CSS/column-span ## Slide 357 https://developer.mozilla.org/en-US/docs/Web/CSS/column-fill ## Slide 358 https://developer.mozilla.org/en-US/docs/Web/CSS/column-fill ## Slide 359 https://codepen.io/websanity/pen/yLexKMr ## Slide 360 http://codepen.io/websanity/pen/Fejgm?editors=110 ## Slide 361 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 362 Move/copy to CSS - Layout in multi-column part ## Slide 369 https://codepen.io/websanity/pen/Fejgm?editors=1100 ## Slide 370 http://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after.html ## Slide 372 Still from Oliver! (1968) ## Slide 373 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 376 From H.P. Lovecraft’s “Dagon”: http://www.hplovecraft.com/writings/texts/fiction/d.aspx ## Slide 378 From H.P. Lovecraft’s “Dagon”: http://www.hplovecraft.com/writings/texts/fiction/d.aspx ## Slide 382 https://caniuse.com/#search=widows https://caniuse.com/#search=orphans ## Slide 391 https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_mode dev.w3.org/csswg/css-flexbox/ ## Slide 392 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 393 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 394 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 399 http://codepen.io/websanity/pen/xigle?editors=110