This content originally appeared on Bram.us and was authored by Bramus!
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) →
This content originally appeared on Bram.us and was authored by Bramus!
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Bramus! | Sciencx (2021-03-19T23:14:50+00:00) Building a Settings Component. Retrieved from https://www.scien.cx/2021/03/19/building-a-settings-component-2/
" » Building a Settings Component." Bramus! | Sciencx - Friday March 19, 2021, https://www.scien.cx/2021/03/19/building-a-settings-component-2/
HARVARDBramus! | Sciencx Friday March 19, 2021 » Building a Settings Component., viewed ,<https://www.scien.cx/2021/03/19/building-a-settings-component-2/>
VANCOUVERBramus! | Sciencx - » Building a Settings Component. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/03/19/building-a-settings-component-2/
CHICAGO" » Building a Settings Component." Bramus! | Sciencx - Accessed . https://www.scien.cx/2021/03/19/building-a-settings-component-2/
IEEE" » Building a Settings Component." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2021/03/19/building-a-settings-component-2/. [Accessed: ]
rf:citation » Building a Settings Component | Bramus! | Sciencx | https://www.scien.cx/2021/03/19/building-a-settings-component-2/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.