We're a place where coders share, stay up-to-date and grow their careers.
css vars are awesome. Here's some cool things i've been using them for.
Flexible container widths without having to overwrite the rule:
:root { --container-sm: 60rem; --container-md: 110rem; --container-lg: 126rem; } .g-container { max-width: var(--container-width, var(--container-md)); width: calc(100% - var(--container-gap, 2rem)); margin-left: auto; margin-right: auto; } ... <article class="c-supportPlans g-container"> ... .c-supportPlans { --container-width: var(--container-xl); ... }
Font styles management:
--muli-1: 800 1.6rem/1.25 'Muli', sans-serif; --muli-2: 700 1.4rem/1.25 'Muli', sans-serif; --muli-3: 400 1.2rem/2 'Muli', sans-serif; --open-sans-1: 800 3.2rem/1.375 'Open Sans', sans-serif; --open-sans-2: 400 2.4rem/1.167 'Open Sans', sans-serif; --open-sans-3: 800 2rem/1.4 'Open Sans', sans-serif; ... .c-supportPlans-plan h2 { font: var(--open-sans-3); }
and declarative simple animations:
@keyframes fromTo { from { transform: var(--from); } to { transform: var(--to); } } .c-industriesBanner-list { --from: translateX(0); --to: translateX(calc(-100% + -3rem)); animation: linear 20s fromTo infinite; display: grid; grid-gap: 3rem; gap: 3rem; grid-auto-flow: column; grid-auto-columns: 15rem; }
codepen.io/dillonbheadley/pen/oNXNyPa
fun stuff!
Thanks for sharing this @dillonheadley . Awesome work! It's always so helpful to see how people implement the tech in their own project. Let me link this in the code notes 👏
Here's one more to manage buttons with vars: codepen.io/dillonbheadley/pen/PoqWqxq
For sure! 👍🏼 Love your posts btw!
css vars are awesome. Here's some cool things i've been using them for.
Flexible container widths without having to overwrite the rule:
Font styles management:
and declarative simple animations:
codepen.io/dillonbheadley/pen/oNXNyPa
fun stuff!
Thanks for sharing this @dillonheadley . Awesome work! It's always so helpful to see how people implement the tech in their own project. Let me link this in the code notes 👏
Here's one more to manage buttons with vars: codepen.io/dillonbheadley/pen/PoqWqxq
For sure! 👍🏼 Love your posts btw!