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