Hasty Treat - Stylin the Unstylables
Syntax - Tasty Web Development Treats
English - May 17, 2021 13:00 - 21 minutes - 23.3 MB - ★★★★★ - 935 ratingsTechnology News Tech News css html html5 javascript webdevelopment Homepage Download Apple Podcasts Google Podcasts Overcast Castro Pocket Casts RSS feed
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) border08: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 overlap14:13 - Re-implement the UI with JavaScript
Video / Audio HUGE rabbit hole of things to code Very important to maintain accessibility15:46 - Use a UI Library
Bootstrap Foundation Ant Design Carbon Design Fast Lightning Design System Material Design Chakra17:20 - Open UI
Documenting all the different types of web UI controls https://open-ui.org/ https://twitter.com/stubbornella/status/1384889551924121605 Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets