New patterns

I'm excited to share many new web.dev patterns! These additions are from the show GUI Challenges where I share my strategies on how to build various components and common interface needs, then collect user submissions for the same tasks and help us all grow our perspectives on how to solve them.

Turns out GUI Challenges fit nicely into patterns:

{% CodePattern 'animation/interactive-words' %}

Now they can be embedded into posts (like above), aggregated for easy browsing and inspiration, and also have added new categories for other contributors to add their patterns to. Take a look around, take some code: it's all there for you.

Overview

Three new pattern categories:

1. Components
2. Animations
3. Theming

Plus, five new patterns added to the existing Layout patterns.

Components

{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/J2QtGMJ3e1cJkHFrQ2K3.svg", alt="Supporting graphic which has colorful prototyped components in a grid layout.", width="360", height="240" %}

View the component patterns landing page or check each out individually:

1. Breadcrumbs
2. Buttons
3. Carousel
4. Dialog
5. Game Menu
6. Loading Bar
7. Media Scroller
8. Multi-Select
9. Settings
10. Sidenav
11. Split Buttons
12. Stories
13. SVG Favicon
14. Switch
15. Tabs
16. Toast

Here's a preview of the split button pattern:

{% CodePattern 'components/split-buttons' %}

Animations

{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/KL7dFk9XKx5PVUzXT2hb.svg", alt="Supporting graphic which has a ball in motion down a curve.", width="360", height="240" %}

View the animation patterns landing page or check each out individually:

1. Animated Letters
2. Animated Words
3. Interactive Letters
4. Interactive Words

Here's a preview of the animated letters pattern:

{% CodePattern 'animation/animated-letters' %}

{% Aside %} These patterns only split the text and animate if a user's system hasn't indicated reduced motion. {% endAside %}

Theming

{% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/X2nU3op9YZAqzox7FDgN.svg", alt="Supporting graphic with two layers of a dashboard, one is pink and the other is blue.", width="360", height="240" %}

View the theming patterns landing page or check each out individually:

1. Color Schemes
2. Theme Switch

One pattern is for building a client side theme switch so users can indicate their preference without it being directly tied to their system preference. The other is for creating a theming design system with CSS custom properties.

Here's a preview of the color schemes pattern:

{% CodePattern 'theming/color-schemes' %}

New layout patterns on centering

View the layout patterns landing page or check each out individually:

1. Autobot
2. Content Center
3. Fluffy Center
4. Gentle Flex
5. Pop n' Plop

Each demo features a grab handle to resize the container and a button to add a child to the layout. These, as explained in the article, are to help you feel the strengths and weaknesses of various centering techniques the web offers. Plus, they have fun names.

Here is the article determined "winner" of the centering exploration, the Gentle Flex:

{% CodePattern 'layout/gentle-flex' %}

Wrap up

I hope these new patterns help teach you new techniques, inspire you, provide insights into accessibility and overall keep you hyped on building UI. Stay tuned for more patterns as the Chrome Team continues adding to these collections.

• Post hero images generated from George Francis' fantastic Codepen