Thinking on ways to solve TOASTS

In today’s GUI Challenge, @Adam Argyle shares thinking on a way to build toasts, a non-interactive and passive component for UI to provide user feedback. Explore the [output] element, CSS grid, animations and the FLIP technique which helps build an adaptive and accessible component. Chapters: 0:00 - Introduction 0:23 - Overview 2:02 - [output] 3:00 - Layout 4:41 - Animation 5:50 - JavaScript Part 1 6:55 - Reduced Motion 7:43 - Keyframes 8:09 - JavaScript Part 2 10:48 - . 14:18 - Outro Resources: Read along → Try a demo → Get the source → FLIP → Paul Lewis (from SuperCharged) → Watch more GUI Challenges → Subscribe to Google Chrome Developers → #GUIchallenges #CSS #ChromeDeveloper