使用Player FM应用程序离线!
Hasty Treat - Stylin the Unstylables
Manage episode 292705636 series 1469447
In this Hasty Treat, Scott and Wes talk about the different kinds of things that are difficult to style, how you can style them, and some future tech to look out for!
Sanity - SponsorSanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
LogRocket - SponsorLogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes Can it be styled? Solutions04:28 - Just style the defaults
- Most elements can be styled, though some elements are really just multiple elements grouped together into the shadow dom and are hard to style.
- This leads to us having to re-create the visual UI, and often is a point of making inaccessible UIs.
- Select
- Input - number, date, etc.
- Very hard to style
- Often need appearance: none; for mobile
- Checkbox / Radio
- Generally speaking, these CSS Properties can be applied to all inputs:
- font-size
- color
- padding
- margin
- background / images
- outline (remember focus)
- border
08:20 - Overlap with more dom elements, set background images
- Checkbox / Radio / Toggle buttons
- Often used :before and :after along with labels — e.g. label + input:checked
- Select can have element overlap
14:13 - Re-implement the UI with JavaScript
- Video / Audio
- HUGE rabbit hole of things to code
- Very important to maintain accessibility
15:46 - Use a UI Library
17:20 - Open UI
- Documenting all the different types of web UI controls
- https://open-ui.org/
- https://twitter.com/stubbornella/status/1384889551924121605
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
766集单集
Manage episode 292705636 series 1469447
In this Hasty Treat, Scott and Wes talk about the different kinds of things that are difficult to style, how you can style them, and some future tech to look out for!
Sanity - SponsorSanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
LogRocket - SponsorLogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes Can it be styled? Solutions04:28 - Just style the defaults
- Most elements can be styled, though some elements are really just multiple elements grouped together into the shadow dom and are hard to style.
- This leads to us having to re-create the visual UI, and often is a point of making inaccessible UIs.
- Select
- Input - number, date, etc.
- Very hard to style
- Often need appearance: none; for mobile
- Checkbox / Radio
- Generally speaking, these CSS Properties can be applied to all inputs:
- font-size
- color
- padding
- margin
- background / images
- outline (remember focus)
- border
08:20 - Overlap with more dom elements, set background images
- Checkbox / Radio / Toggle buttons
- Often used :before and :after along with labels — e.g. label + input:checked
- Select can have element overlap
14:13 - Re-implement the UI with JavaScript
- Video / Audio
- HUGE rabbit hole of things to code
- Very important to maintain accessibility
15:46 - Use a UI Library
17:20 - Open UI
- Documenting all the different types of web UI controls
- https://open-ui.org/
- https://twitter.com/stubbornella/status/1384889551924121605
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
766集单集
Tutti gli episodi
×欢迎使用Player FM
Player FM正在网上搜索高质量的播客,以便您现在享受。它是最好的播客应用程序,适用于安卓、iPhone和网络。注册以跨设备同步订阅。