Thinking on ways to solve TOASTS
Channel: Chrome for Developers
Date: 2021-12-08

In today's GUI Challenge, @AdamArgyleInk 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 - F.L.I.P.
14:18 - Outro

Resources:
Read along → https://goo.gle/3GghBfI 
Try a demo → https://goo.gle/3EHsuXG 
Get the source → https://goo.gle/3oykceU 
FLIP →  https://goo.gle/3oz8P6D 
Paul Lewis (from SuperCharged) → https://goo.gle/31IOFy0 

Watch more GUI Challenges → https://goo.gle/GUIchallenges
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs 

#GUIchallenges #CSS #ChromeDeveloper