festival
festival copied to clipboard
Design principles of a front-end system 🎉
Some components need to have a reference to a DOM element created by their consumers. For example, a `Popover` component needs to know its `target`'s DOM element's position to render...
Web Styling (Draft) - CSS - Convention: SMACSS, BEM, OOCSS - Framework: Bootstrap, Foundation, Bulma, Tachyons - Generator: Tailwinds - Shadow DOM - CSS-in-JS - Run-time: Styled Components, Emotion -...
https://anduin.design/core/#display https://codepen.io/dvkndn/pen/wmQmbm
10px vs 8px vs 12px
Don't use @apply. They are unnecessarily complicated and can be solved easier with native solution: CSS variables. For example: ```css :root { --color-red: #123456 } ``` to use in tailwinds:...
Can you guess what's the color of this without looking at browser: ```jsx ``` It depends on CSS's definition order, which is not guaranteed by Tailwind (and that's a good...
This is a valid usage, but can you guess what will be the background color of the Button: ```jsx ``` In general, inheriting class names, although common, is not a...
https://davidwalsh.name/sass-color-variables-dont-suck https://css-tricks.com/what-do-you-name-color-variables/