There are so many new tools coming out, does it make sense to chase them all? Is it too early to learn CSS Grid? What happens if it changes? Wouldn't it be safer to wait until things settle down? Jen talks about the struggles to keep up and why it is, indeed, a safe time to invest effort into learning CSS Grid. Jeremy Keith, presented the ideas about Materials vs Tools at An Event Apart 2018, in a talk titled “The Way Of The Web”. The slides listing materials and tools are his. You can see more of his talks at: https://noti.st/adactio, and find all his work at https://adactio.com.

It's easy to make lots of mistakes with a new technology, especially something that's as big of a change from the past as CSS Grid. Jen lists the 9 Biggest Mistakes she sees people making when using CSS Grid, with advice and tips for avoiding these pitfalls and old habits. Mistake 1: Thinking CSS Grid is Everything “Flexbox vs. CSS Grid — Which is Better?”: https://youtu.be/hs3piaN4b5I “Using Flexbox & Grid Together”: https://youtu.be/dQHtT47eH0M “Obliterate Boxiness with CSS Shapes”: https://youtu.be/pOB75oTNhw0 Mistake 2: Using Only Percents for Sizing “Min & Max Content Sizing in CSS Grid”: https://youtu.be/lZ2JX_6SGNI “FR Units in CSS Grid“: https://youtu.be/ZPtpzuRajzM “MinMax in CSS Grid”: https://youtu.be/mVQiNpqXov8 Mistake 3 : Assuming You Need Breakpoints “Incredibly Easy Layouts with CSS Grid”: https://youtu.be/tFKrK4eAiUQ Mistake 4: Getting Confused by Numbering “Innovative & Practical Graphic Design with CSS Grid”: https://youtu.be/-hmOZU7Zk10 “Basics of CSS Grid: The Big Picture”: https://youtu.be/FEnRpy9Xfes Mistake 5: Always Using 12-columns Jen talks about this towards the end of “FR Units in CSS Grid“: https://youtu.be/ZPtpzuRajzM?t=5m52s Mistake 6: Ignoring the Power of Rows “Flexibility & The Fold”: https://youtu.be/EEOJZy_Gge4 “Whitespace on The Web”: https://youtu.be/YfIjFeBLhyA Mistake 7: Reaching for a Framework Mistake 8: Waiting for IE11 to Die “Internet Explorer + CSS Grid?”: https://youtu.be/7msERxu7ivg 7-part Series on Writing Resilient CSS that works in all browsers: https://www.youtube.com/playlist?list=PLbSquHt1VCf1kpv9WRGMCA9_Nn4vCLZ9Y Mistake 9: Hesitating, Instead of Playing “Responsive Mondrian”: https://youtu.be/qNtJ5p3h2A4 “CSS Grid like you are Jan Tschichold”: https://youtu.be/OxrsO4aIjyc

Sometimes margins smash together. Sometimes they stay separate. This is called "margin collapsing". It can be confusing. Some people wish the web never had such a thing. Well, with CSS Grid, you can make margin collapsing go away. Jen will show you how. Links: The Demo: https://codepen.io/jensimmons/pen/pVxrMK The Tweet: https://twitter.com/jensimmons/status/996811135226695680 Firefox CSS Grid Inspector: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts MDN article on margin collapsing: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing Bert Bos and Håkon Lie at CSS Day: https://vimeo.com/237192358

Jen takes a look at the evolution of the printing press and typesetting technology — from letterpress and the Linotype machine, to photo-based paste-up techniques — and how these advances radically changed graphic design. History has taught us that big changes to the underlying technologies can open up new communication possibilities. This is happening again, now, on the web. Today, with CSS Grid, Flexbox and all the pieces of Intrinsic Web Design, we have the freedom to place anything anywhere on the page. What can similar transitions in the past teach us about our future?

We can define tracks in CSS Grid using `minmax`. What does that mean and how can we best combine it with other ways of measuring space? Jen presents the beginnings of Intrinsic Web Design here, showing how this new technology provides multiple stages of flexibility and gets us even further away from ideas of 'pixel perfect'. Demos: • https://labs.jensimmons.com/2017/01-003C.html • https://labs.jensimmons.com/2017/01-016.html

What is an "fr" (aka fractional) unit anyway? Why are they a million times better than percents? How can we mix them with other sized tracks? Jen explains how to intuitively use FR units in CSS Grid. http://gridsetapp.com http://alistapart.com/article/content-out-layout

CSS Grid changes the way flexibility works on the web. When there is more or less space available, Grid allows us to precisely design how content moves. Using simple percent-based widths is not the only option anymore. In the first of a three-part series, Jen explains how to use min-content and max-content to size Grid tracks. Demos: • Der Film — https://labs.jensimmons.com/2017/02-004.html • Jan Tschichold — https://labs.jensimmons.com/2017/01-007.html

The web is a medium that has a viewport. What does it mean to truly be designing for the web — a medium that reveals the page slowly, from inside a viewport frame? Examples: http://labs.jensimmons.com/2017/03-008.html http://labs.jensimmons.com/2017/01-006.html http://labs.jensimmons.com/2017/01-008C.html http://labs.jensimmons.com/2017/01-010.html To see more clips, or order the whole series of Hollywood Camera Work's Master Class in High End Blocking & Staging: https://www.hollywoodcamerawork.com/the-master-course-in-high-end-blocking-and-staging.html

If we want to create a layout where we specify both the height and width of an image, creating a flexible layout, we can use `object-fit` to crop the image. Demos: • Simple photos: http://labs.jensimmons.com/2016/examples/object-fit-photos.html or on CodePen: http://codepen.io/jensimmons/pen/jqKNxg?editors=1100 • Article w/ header layout: https://labs.jensimmons.com/2016/examples/grace-hopper-page.html or on CodePen: http://codepen.io/jensimmons/pen/wGXwNb?editors=1100 • Samples of options for Object Fit: http://labs.jensimmons.com/2016/examples/object-fit.html or on CodePen: http://codepen.io/jensimmons/pen/ZWRzjQ?editors=1100 MDN Web Docs: • Object Fit: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit • Object Position: https://developer.mozilla.org/en-US/docs/Web/CSS/object-position

How can you use new CSS units — viewport units — to size content that changes in response to the viewport size? Jen introduces you to how vw, vh, vmin, vmax can be used in creative ways. Demos: • http://labs.jensimmons.com/2017/01-010.html • http://labs.jensimmons.com/2016/examples/coversheet-3.html

Designers have struggled for years to do robust drop caps on the web. We've tried a series of techniques, but in the end, the enlarged letter usually ends up mis-aligned with the content surrounding it. What's the deal? Well, now we have a new CSS property, Initial Letter, that will make it easy to create a drop cap, an enlarged cap, an initial letter that lines up in every browser. When or why would you want to use a drop cap? How can you do it using new CSS? Examples: http://labs.jensimmons.com/2016/examples/initial-letter.html http://labs.jensimmons.com/2016/examples/initial-letter-2.html http://labs.jensimmons.com/2017/03-002.html

CSS Grid makes it easy to create overlap in our designs and opens up a world of new possibilities in graphic design on the web. For decades, we wanted to create these kinds of designs, but didn't have the tools. We trained each other to stop being creative and stop wanting to make such layouts. It's time to shake these old habits up and explore what's now possible. Jen walks you through an example of how items can overlap, be fully responsive, robust and resilient. Examples at: http://labs.jensimmons.com/2017/01-003E.html http://labs.jensimmons.com/2017/01-018.html http://labs.jensimmons.com/2017/01-002.html http://labs.jensimmons.com/2017/02-001.html

Everything on the web is a rectangle, but it doesn't have to be. Use the Clip Path property to alter elements in your layouts to be polygons, circles, triangles, and more. My simple clip-path demo: http://labs.jensimmons.com/2016/examples/clip-path.html Wide Hive: http://www.widehive.com Clip path on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path Support for clip-path on Can I Use: https://caniuse.com/#feat=css-clip-path Don't forget to use a `-webkit-` prefix to get `clip-path` to work in Safari and other webkit browsers.

with Jen Simmons

In the last of the Resilient CSS series, Jen explains when you can't use a newer CSS property. It all depends on whether or not that property will fail well. Thanks to Jeremy Keith for this idea of understanding if something “fails well” being key in deciding whether or not it's a good idea to use it. He has a great talk about this, Evaluating Technology: https://www.youtube.com/watch?v=wAekLOUpMB4