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.
0:00 - Introduction
0:23 - Overview
2:02 - [output]
3:00 - Layout
4:41 - Animation
6:55 - Reduced Motion
7:43 - Keyframes
10:48 - F.L.I.P.
14:18 - Outro
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
#GUIchallenges #CSS #ChromeDeveloper