sseeeedd
sseeeedd copied to clipboard
ffoodd
Seed for front-end culture :)
Inspired by @hakimel's [demonstration video on Twitter](https://twitter.com/hakimel/status/1132932935399673857), I think we could improve the hit area using pure CSS :) And keep progressive enhancement in mind, obviously
Using a single custom properties to handle *ratio*, we could handle the whoel typographic scale with `calc()`. See [modularscale.com](https://www.modularscale.com/).
By using custom properties, we may ease contextual variants for components. An example: sizing a component in `em` would be muc, much easier with things like `font-size: calc( 1em *...
Would be nice to handle base styles for `iframe` beyond normalization: could be really fun to display a browser tab around, with navigation bar showing URL and title, and OS...
There's a lot to try here: * read the [Content Slider post on Inclusive Components](https://inclusive-components.design/a-content-slider/) by @Heydon; * more about [CSS s croll snap point on MDN](https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Scroll_Snap_Points); * also a...
Finally, styling SVGs inlined through `` can be a thing thanks to custom properties: - https://codepen.io/petebarr/pen/oNjLebr - https://filamentgroup.netlify.app/images/includespost/customizesvgembed.html
`pointer` media query allows to know pointer accuracy. We can use it to increase interactive elements' sizing if a low accuracy pointer is used, for example. I'm pretty sure there's...
Try to implement WCAG's contrast algorithm. [Facundo Corradini wrote an example implementation on CSS-Tricks](https://css-tricks.com/switch-font-color-for-different-backgrounds-with-css/#article-header-id-6). This would require to move from `hsl()` to `rgb()`. Needs to think about it: what do...