Notes for CSS - Layout By Scott Granneman & Jans Carton Find the presentation at http://www.granneman.com/presentations/ ## Slide 6 https://developer.mozilla.org/en-US/docs/Web/CSS/display ## Slide 11 https://developer.mozilla.org/en-US/docs/Web/CSS/display ## Slide 15 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 16 The browser processing pipeline is covered in the CSS - Overview slide deck https://hpbn.co/primer-on-web-performance/#dom-cssom-and-javascript ## Slide 17 CSS Display Module Level 3 W3C Candidate Recommendation, 28 August 2018 https://www.w3.org/TR/css-display-3/#intro ## Slide 18 CSS Display Module Level 3 W3C Candidate Recommendation, 28 August 2018 https://www.w3.org/TR/css-display-3/#intro ## Slide 22 https://codepen.io/websanity/pen/LgrXvj?editors=1100 ## Slide 23 https://codepen.io/websanity/pen/LgrXvj?editors=1100 ## Slide 24 https://codepen.io/websanity/pen/LgrXvj?editors=1100 ## Slide 25 https://codepen.io/websanity/pen/LgrXvj?editors=1100 ## Slide 26 https://codepen.io/websanity/pen/LgrXvj?editors=1100 ## Slide 29 Chinese Porcelain Vase by design56, licensed from Can Stock Photo, 2014-08-04 http://www.canstockphoto.com/chinese-porcelain-vase-10824229.html ## Slide 30 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 31 Giftwrapped by Lightreign, licensed from Can Stock Photo, 2014-08-04 http://www.canstockphoto.com/giftwrapped-1395457.html ## Slide 63 https://developer.mozilla.org/en-US/docs/Web/CSS/margin ## 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 67 http://codepen.io/websanity/pen/kejHu?editors=110 ## Slide 68 http://codepen.io/websanity/pen/kejHu?editors=110 ## Slide 69 https://developer.mozilla.org/en-US/docs/Web/CSS/margin ## Slide 70 https://codepen.io/websanity/pen/adjvD?editors=1100 ## Slide 73 http://codepen.io/websanity/pen/AmIJr?editors=110 ## Slide 75 http://codepen.io/websanity/pen/fwLhC ## Slide 77 http://codepen.io/websanity/pen/EqrxH ## Slide 78 https://caniuse.com/#feat=css3-boxsizing ## Slide 81 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 82 https://codepen.io/websanity/pen/mzMXzy ## Slide 83 https://codepen.io/websanity/pen/mzMXzy ## Slide 84 https://codepen.io/websanity/pen/EdXoGb?editors=1100 ## Slide 85 https://codepen.io/websanity/pen/EdXoGb?editors=1100 ## Slide 86 https://codepen.io/websanity/pen/mzMXzy?editors=1100 ## Slide 87 https://codepen.io/websanity/pen/mzMXzy?editors=1100 ## Slide 89 https://drafts.csswg.org/css-sizing-3/#width-height-keywords ## Slide 90 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 91 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 92 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 93 Current hack, which Bootstrap has implemented aspect-ratio property ## Slide 98 http://codepen.io/websanity/pen/sljbJ?editors=110 ## Slide 99 http://codepen.io/websanity/pen/sljbJ?editors=110 ## Slide 100 http://codepen.io/websanity/pen/sljbJ?editors=110 ## Slide 101 http://codepen.io/websanity/pen/sljbJ?editors=110 ## Slide 103 http://codepen.io/websanity/pen/cwGtx?editors=110 ## Slide 104 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 107 Unlike visibility: hidden, which hides the element but leaves it in flow as though it were still there ## Slide 108 http://codepen.io/websanity/pen/Lzrie?editors=110 ## Slide 109 Sub-menus are hidden by display: none until the mouse hovers over them http://www.stlzoo.org ## Slide 111 https://codepen.io/websanity/pen/dgjbjP?editors=1100 ## Slide 112 https://codepen.io/websanity/pen/dgjbjP?editors=1100 ## Slide 113 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 116 https://codepen.io/websanity/full/pxePLQ/ ## Slide 117 https://codepen.io/websanity/full/wYJdgr/ ## Slide 118 https://codepen.io/websanity/pen/LYGQmQN?editors=1100 ## Slide 119 https://codepen.io/websanity/pen/MWKQGQx?editors=1100 ## Slide 122 https://codepen.io/websanity/full/wYJdgr/ ## Slide 124 https://codepen.io/websanity/full/wYJdgr/ ## Slide 126 https://codepen.io/websanity/full/wYJdgr/ ## Slide 130 https://codepen.io/websanity/pen/GOpQWJ?editors=1100 ## Slide 131 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 133 http://codepen.io/websanity/pen/dztpu?editors=110 ## Slide 134 https://codepen.io/websanity/pen/ePjYNo?editors=1100 ## Slide 135 https://codepen.io/websanity/pen/ePjYNo?editors=1100 ## Slide 138 https://codepen.io/websanity/full/pxePLQ/ ## Slide 139 https://codepen.io/websanity/full/pxePLQ/ ## Slide 140 https://codepen.io/websanity/full/pxePLQ/ ## Slide 145 http://codepen.io/websanity/pen/zcqFK?editors=110 ## Slide 146 http://codepen.io/websanity/pen/vgHJa?editors=010 ## Slide 147 http://codepen.io/websanity/pen/fbDwc?editors=110 ## Slide 152 https://codepen.io/websanity/pen/MWKQGQx?editors=1100 ## Slide 153 https://codepen.io/websanity/pen/MWKQGQx?editors=1100 ## Slide 154 https://codepen.io/websanity/pen/MWKQGQx?editors=1100 ## Slide 155 https://codepen.io/websanity/pen/MWKQGQx?editors=1100 ## Slide 158 http://codepen.io/websanity/pen/veJdq?editors=110 ## Slide 159 http://codepen.io/websanity/pen/veJdq?editors=110 ## Slide 161 http://codepen.io/websanity/pen/Ivxft?editors=100 ## Slide 162 http://codepen.io/websanity/pen/Ivxft?editors=110 3 elements, all floated right ## Slide 163 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 164 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 165 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 167 https://codepen.io/websanity/full/bQXZNm ## Slide 169 http://codepen.io/websanity/pen/dDafC?editors=110 ## Slide 172 http://codepen.io/websanity/pen/Frklb?editors=110 ## Slide 173 http://codepen.io/websanity/pen/Frklb?editors=110 ## Slide 174 https://codepen.io/websanity/pen/WNvzrgB?editors=1100 ## Slide 175 https://codepen.io/websanity/pen/WNvzrgB?editors=1100 ## Slide 176 https://codepen.io/websanity/pen/Ivxft?editors=0100 ## Slide 177 https://codepen.io/websanity/pen/Ivxft?editors=1000 ## Slide 179 “Sting” sound: Sting.ogg, by PiAndWhippedCream. https://en.wikipedia.org/wiki/File:Sting.ogg. 31 July 2006. ## Slide 182 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context ## Slide 183 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context ## Slide 187 https://codepen.io/websanity/pen/abdqGPd?editors=1100 ## Slide 188 https://codepen.io/websanity/pen/abdqGPd?editors=1100 ## Slide 189 https://codepen.io/websanity/pen/abdqGPd?editors=1100 ## Slide 192 https://codepen.io/websanity/pen/LgBVNa?editors=1000 ## Slide 193 https://codepen.io/websanity/pen/LgBVNa?editors=1000 ## Slide 194 https://codepen.io/websanity/pen/LgBVNa?editors=1000 ## Slide 196 https://codepen.io/websanity/pen/bmWEBG?editors=1100 ## Slide 197 https://codepen.io/websanity/pen/bmWEBG?editors=1100 ## Slide 198 https://codepen.io/websanity/pen/bmWEBG?editors=1100 ## Slide 202 Note: Strictly speaking, these are block-level boxes AND a block box ## Slide 203 http://codepen.io/websanity/pen/hlmsu ## Slide 205 https://codepen.io/websanity/pen/NOMQJd?editors=1000 ## Slide 206 https://codepen.io/websanity/pen/GOpQWJ?editors=1100 ## Slide 207 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 209 https://codepen.io/websanity/pen/gZwLyz?editors=1100 ## Slide 210 https://codepen.io/websanity/pen/jXMVjR?editors=1100 ## Slide 214 http://codepen.io/websanity/pen/dztpu?editors=110 ## Slide 217 http://codepen.io/websanity/pen/gasHG?editors=110 ## Slide 223 https://codepen.io/websanity/pen/ZqMBPR?editors=1100 ## Slide 226 http://codepen.io/websanity/pen/ecAnh?editors=110 ## Slide 231 http://codepen.io/websanity/pen/KdEvz?editors=110 ## Slide 232 http://codepen.io/websanity/pen/KdEvz?editors=110 ## Slide 234 http://codepen.io/websanity/pen/KdEvz?editors=110 ## Slide 236 border can be set if a parent has border-collapse: border, but this is extremely rare ## Slide 237 http://codepen.io/websanity/pen/oJujv?editors=110 ## Slide 239 http://codepen.io/websanity/pen/qpvin?editors=110 ## Slide 240 http://codepen.io/websanity/pen/qpvin?editors=110 ## Slide 241 http://codepen.io/websanity/pen/qpvin?editors=110 ## Slide 242 http://codepen.io/websanity/pen/qpvin?editors=110 ## Slide 243 http://codepen.io/websanity/pen/qpvin?editors=110 ## Slide 247 Diagram by Scott Granneman & Jans Carton ## Slide 249 Diagrams by Scott Granneman & Jans Carton https://www.w3.org/TR/css-grid-1/ ## Slide 250 Diagrams by Scott Granneman & Jans Carton https://www.w3.org/TR/css-grid-1/ ## Slide 252 Jans add Contexts Contexts * Formatting (Layout) * Positioning * Stacking ## Slide 255 http://codepen.io/websanity/pen/Jqsph?editors=110 ## Slide 259 http://codepen.io/websanity/pen/hrGwq ## Slide 263 https://codepen.io/websanity/pen/GYrovp?editors=1100 ## Slide 264 https://codepen.io/websanity/pen/GYrovp?editors=1100 ## Slide 265 https://codepen.io/websanity/pen/GYrovp?editors=1100 ## Slide 266 https://codepen.io/websanity/pen/GYrovp?editors=1100 ## Slide 269 http://codepen.io/websanity/pen/uempC ## Slide 273 http://codepen.io/websanity/pen/aCkjz ## Slide 274 http://codepen.io/websanity/pen/aCkjz ## Slide 277 http://html5-demos.appspot.com/static/css/sticky.html ## Slide 279 http://codepen.io/websanity/pen/aOJVOy?editors=110 ## Slide 280 http://codepen.io/websanity/pen/aOJVOy?editors=110 ## Slide 281 http://codepen.io/websanity/pen/aOJVOy?editors=110 ## Slide 282 http://codepen.io/websanity/pen/aOJVOy?editors=110 ## Slide 283 http://codepen.io/websanity/pen/aOJVOy?editors=110 ## Slide 284 http://codepen.io/websanity/pen/aOJVOy?editors=110 ## Slide 285 The last heading doesn’t go to the top. Solution: extra padding on the bottom http://codepen.io/websanity/pen/aOJVOy?editors=110 ## Slide 287 http://codepen.io/websanity/pen/NqpwWQ?editors=110 Example based on http://jsfiddle.net/daker/ecpTw/light/ ## Slide 288 http://codepen.io/websanity/pen/NqpwWQ?editors=110 Example based on http://jsfiddle.net/daker/ecpTw/light/ ## Slide 289 http://codepen.io/websanity/pen/NqpwWQ?editors=110 Example based on http://jsfiddle.net/daker/ecpTw/light/ ## Slide 290 http://codepen.io/websanity/pen/NqpwWQ?editors=110 Example based on http://jsfiddle.net/daker/ecpTw/light/ ## Slide 291 position: static means it is not positioned ## Slide 292 https://caniuse.com/#search=absolute https://caniuse.com/#search=fixed https://caniuse.com/#search=sticky (updated 2020-07-13) ## Slide 294 https://developer.mozilla.org/en-US/docs/Web/CSS/inset ## Slide 298 http://codepen.io/websanity/pen/EhFuC?editors=110 ## Slide 304 “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 306 Diagrams created by Jans Carton & Scott Granneman ## Slide 307 Diagrams created by Jans Carton & Scott Granneman ## Slide 308 Diagrams created by Jans Carton & Scott Granneman ## Slide 309 Diagrams created by Jans Carton & Scott Granneman ## Slide 310 Definition of physical: https://drafts.csswg.org/css-writing-modes-4/#physical ## Slide 311 https://account.microsoft.com/account/Account?lang=en-US ## Slide 312 https://account.microsoft.com/account/Account?lang=he-IL ## Slide 315 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties ## Slide 321 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment ## Slide 322 https://codepen.io/websanity/pen/WNrzyYV?editors=1100 ## Slide 323 For more, see references to I18n (internationalization) throughout these presentations ## Slide 327 https://developer.mozilla.org/en-US/docs/Web/CSS/column-width ## Slide 328 https://developer.mozilla.org/en-US/docs/Web/CSS/column-width ## Slide 329 https://developer.mozilla.org/en-US/docs/Web/CSS/column-count ## Slide 330 https://developer.mozilla.org/en-US/docs/Web/CSS/columns ## Slide 331 https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap ## Slide 332 https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule ## Slide 333 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 334 https://codepen.io/websanity/pen/qdeIm?editors=1100 ## Slide 335 https://codepen.io/websanity/pen/Fejgm?editors=1100 ## Slide 336 https://codepen.io/websanity/pen/Fejgm?editors=1100 Why 3×40px? Because there were 3 columns on the previous slide ## Slide 337 https://codepen.io/websanity/pen/Fejgm?editors=1100 Why 2×40px? Because there were 2 columns on the previous slide ## Slide 338 https://codepen.io/websanity/pen/Fejgm?editors=1100 ## Slide 339 https://developer.mozilla.org/en-US/docs/Web/CSS/column-span ## Slide 340 https://developer.mozilla.org/en-US/docs/Web/CSS/column-fill ## Slide 341 https://developer.mozilla.org/en-US/docs/Web/CSS/column-fill ## Slide 342 https://codepen.io/websanity/pen/yLexKMr ## Slide 343 http://codepen.io/websanity/pen/Fejgm?editors=110 ## Slide 344 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 345 Move/copy to CSS - Layout in multi-column part ## Slide 352 http://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after.html ## Slide 354 Still from Oliver! (1968) ## Slide 357 From H.P. Lovecraft’s “Dagon”: http://www.hplovecraft.com/writings/texts/fiction/d.aspx ## Slide 359 From H.P. Lovecraft’s “Dagon”: http://www.hplovecraft.com/writings/texts/fiction/d.aspx ## Slide 363 https://caniuse.com/#search=widows https://caniuse.com/#search=orphans ## Slide 370 https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_mode dev.w3.org/csswg/css-flexbox/ ## Slide 371 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 372 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 373 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 378 http://codepen.io/websanity/pen/xigle?editors=110