Logo
    Search

    html elements

    Explore "html elements" with insightful episodes like "Use The Platform!" and "Hasty Treat - Stylin the Unstylables" from podcasts like ""Syntax - Tasty Web Development Treats" and "Syntax - Tasty Web Development Treats"" and more!

    Episodes (2)

    Use The Platform!

    Use The Platform!

    In this episode of Syntax, Wes and Scott talk about the benefits of sticking to the web platform that is available to you through APIs you may not know about.

    Prismic - Sponsor

    Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.

    Sanity - Sponsor

    Sanity.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 - Sponsor

    LogRocket 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

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats

    Hasty Treat - Stylin the Unstylables

    Hasty Treat - Stylin the Unstylables

    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 - Sponsor

    Sanity.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 - Sponsor

    LogRocket 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? Solutions

    04: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

    Tweet us your tasty treats!