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. Try the demo.
If you prefer video, or want a UI/UX preview of what we’re building, here’s a shorter walkthrough on YouTube:
- 1 Overview #
- 2 Layouts #
- 3 Color #
- 4 Custom range #
- 5 Custom Checkbox #
- 6 Accessibility #
- 8 Conclusion #
I’ve broken out the aspects of this component into the following sections:
The CSS snippets below assume PostCSS with PostCSS Preset Env. Intent is to practice early and often with syntax in early drafts or experimentally available in browsers. Or as the plugin likes to say, “Use tomorrow’s CSS today”.
This is the first GUI Challenge demo to be all CSS Grid! Here’s each grid highlighted with the Chrome DevTools for grid:
To highlight your grid layouts:
- Open Chrome DevTools with
- Select the Layout tab next to the Styles tab.
- Under the Grid layouts section, check on all the layouts.
- Change the colors of all layouts.
Just for gap #
The most common layout:
I call this layout “just for gap” because it only uses grid to add gaps between blocks.
Five layouts use this strategy, here’s all of them displayed:
fieldset element, which contains each input group (
.fieldset-item), is using
gap: 1px to create the hairline borders between elements. No tricky border solution!
Natural grid wrapping #
The most complex layout ended up being the macro layout, the logical layout system between