@openprops Profile picture

Open Props

@openprops

Supercharged CSS variables.

Similar User
Malte Ubl photo

@cramforce

🦋 @vitest.dev photo

@vitest_dev

Turso photo

@tursodatabase

CSS by T. Afif photo

@ChallengesCss

Astro photo

@astrodotbuild

Jonas Schmedtmann photo

@jonasschmedtman

Deno photo

@deno_land

Turbo photo

@turborepo

Builder.io photo

@builderio

fks photo

@FredKSchott

trash photo

@trashh_dev

Anthony Fu 🦋 @antfu.me photo

@antfu7

MadeWithSvelte photo

@MadeWithSvelte

Sage ⚡️ photo

@thesegunadebayo

Bramus photo

@bramus

Open Props Reposted

Check out how you can enhance focus by applying visual effects to the snapped element using Scroll Snap Events in this slider demo! Built with @openprops 🔥 CodePen: codepen.io/mobalti/full/X… #CSS #webdev @CodePen


Open Props Reposted

It’s a UI built on top of CSS vars… no abstractions so you can use existing CSS variable libraries like @openprops (the recommended starting point in Webstudio).


Open Props Reposted

Headless, boneless, skinless & lifeless UI This blog post is interested in the layered abstractions the front-end community is using so they can compose the layers themselves #CSS #UI #componentsnerdy.dev/headless-bonel…


Open Props Reposted

CSS variables are live and they are POWERFUL. Now Live on Product Hunt 🚀 producthunt.com/posts/webstudi… ➡️ Create a design system "So you can stay consistent and build much quicker." Define global styles like colors, gradients, sizes, and box shadows. ➡️ Use your variables…


Open Props Reposted

Got inspired by the "Mini Web Machines" series by @argyleink to build this tabbed interface! Using :has to manage the visual state and transition-behavior for smooth transitions. Built with @openprops Check it out on CodePen: codepen.io/mobalti/full/j… #CSS @CodePen #webdev


Open Props Reposted

"We read the CSS spec so you didn't have to" On this new @badatcss episode: Eric Meyer and Estelle Weyl wrote the (1,126 page) book on CSS and they answer our questions.


Open Props Reposted

Here is the technology stack I used in the creation of TileDocs (tiledocs.com): Vite - Leveraged this blazing-fast build tool to power my Progressive Web App React Router v6 - Implemented seamless page routing functionality @shoelace_style - Incorporated these…


Open Props Reposted

Sticky Slider CTA Cards Uses: - Scroll-Driven Animations - Container Queries Built with @openprops CodePen: codepen.io/mobalti/full/x… @CodePen #CSS #WebDev


Open Props Reposted

Charge Up Button uses: - @property for gradient transition - light-dark() for adaptive highlight colors - 2 conic gradients - individual scale transform - reduced motion - @OpenProps for the spring/easings codepen.io/argyleink/full…


Open Props Reposted

Check out this storefront demo using the latest web APIs: Scroll-Driven Animations, Container Queries, CSS Nesting, and Popovers for nested sidebars. Built with @astrodotbuild & @openprops Live demo link in the reply! #CSS #WebDevelopment #WebDev


Open Props Reposted

🆕 font props in @openprops courtesy of modernfontstacks.com and github.com/Jothsa - nothing to load - cross OS stack of fallbacks - lots of variety See them for yourself here! codepen.io/argyleink/pen/…

Tweet Image 1
Tweet Image 2
Tweet Image 3
Tweet Image 4

Open Props Reposted

If you're ready to seriously up your #CSS game, check out this rundown on @openprops by @flakolefluk! thisdot.co/blog/exploring…

Tweet Image 1

Open Props Reposted

The fact that scroll-driven animations will transform the way we experience the web is undeniable. Check out this example on @codepen, where each scroll introduces a new character, built with @openprops #CSS @bramus @argyleink #webdev (Link in the first comment)


Open Props Reposted

I've never built anything with a rich #CSS gradient before. So, the fact that @argyleink's Open Props project comes with 30 hand-crafted, sassy gradients was enough to make me prop-curious. I used #AlpineJS to create a small #JavaScript design playground. bennadel.com/4651

Tweet Image 1
Tweet Image 2
Tweet Image 3
Tweet Image 4

Open Props Reposted

neat #CSS trick‽ transition `border-image-outset` I'd normally reach for `box-shadow` for expandos like this, but then you can't use gradients or control direction much with this, I can expand to any size or side and use gradients, yeeee 🤓 src ⤷ codepen.io/argyleink/pen/…


Open Props Reposted

Image compression doesn't do justice to the vibrance of these colors. 😍 Thanks to @argyleink for the awesome quotes and the @openprops gradients 😜

Tweet Image 1

Open Props Reposted

In the Open Props video that @argyleink did with @jlengstorf, he mentioned that he uses `:where()` in his design system so as to create base styles with a #CSS specificity of `0`. This blew my mind 🤯 and I had to try it out for myself. So freakin' clever! bennadel.com/4645

Tweet Image 1

Loading...

Something went wrong.


Something went wrong.