In this episode of GUI Challenges, Adam Argyle builds a Settings Component with sliders and checkboxes.
In this post I want to share thinking on building a Settings component for the web that is responsive, supports multiple device inputs, and works across browsers.
Tons of CSS-knowledge in there:
- CSS Nesting
- CSS Grid
- Custom Properties for easy theming
- LCH Colors
- Use of
:focus-within - Easily respecting the
prefers-reduced-motionpreference by using Custom Properties - etc.
Building a Settings Component (Demo) →Building a Settings Component (Writeup) →