Styleframe

Should we tree-shake recipes next? 🚀

We've just released styleframe@3.7.0! 🎉 What's new: · Variable and utility usage detection and purging for much leaner outputs · Unified fluid and static font size design tokens · Named Props types exported from the virtual module · Rewritten 15min guide, new Elements docs, and a framework switcher

Our documentation now features a select menu to choose from @reactjs, @vuejs and vanilla @typescript in the code examples. Which framework would you like to see next? #opensource #foss #webdev

We're welcoming contributions from all of our community! 💚 We've added a complete CONTRIBUTING.md guide to help you get started: github.com/styleframe-dev… #opensource #foss

Styleframe now has a playground! Write type-safe CSS in your browser and see it render instantly. No install, no config. Just try it live: play.styleframe.dev #typescript #css #webdev

Your design tokens shouldn't live in two places. The `pnpx styleframe dtcg export` command emits spec-conformant W3C DTCG JSON. Figma reads it. Style Dictionary reads it. Tokens Studio reads it. Bidirectional. Free. No limits.

Designers, how are you handling design token updates from your dev team right now? Manual edits? A plugin? Pretending it's not a problem? Tokens should live in code and land in @figma without anyone retyping a hex value. Forever free → styleframe.dev/figma

Tailwind JIT scans your templates. So does Styleframe, except every utility is a factory function you registered. Don't like .bg-primary? Swap functions and you've got ._background:primary. Same transpiler, your naming. Complete control. #webdev #tailwindcss #typescript #css

The Styleframe recipe runtime is ~1.4KB ESM, dependency-free, and only ships if you actually define a recipe. No recipes = static CSS, zero JS in the bundle. ⚡ #webdev #css #typescript

@heyblake styleframe.dev

Fork it Drop your landing page URL I'll give 1 piece of advice to as many of you as I can

Imagine every pixel on your screen, streamed live directly from a model. No HTML, no layout engine, no code. Just exactly what you want to see. @eddiejiao_obj, @drewocarr and I built a prototype to see how this could actually work, and set out to make it real. We're calling it Flipbook. (1/5)

We're working on an update to allow DESIGN.md to be used to generate a styleframe configuration. It'll be the best of both worlds: a design system with the look and feel you want to reproduce, but with the constraints and high quality you're used to from us. #PutAStopToTheSlop #ui #ux #dx #typescript

@_davideast We're working on an update to allow DESIGN.md to be used to generate a styleframe configuration. It'll be the best of both worlds: a design system with the look and feel you want to reproduce, but with the constraints and high quality you're used to from us. #PutAStopToTheSlop

What DESIGN.md is and isn't. ISN'T - A rendering syntax - A replacement for CSS - An opinionated design system format - A component library IS - Describes design intent - Captures descions "why we use this grid" - Reasoning of design concepts, "minimalist layouts" or "editorial headings" - Establishes an aesthetic with latent associations, "cream stationary" surfaces and "ink" text - Documents positive and negative constraints. "Use all caps for headings" or "Never use pure white #fff for surfaces" This creates a documented visual identity for humans to read and persistent contextual memory to ground agents.

We’re one step closer to building high quality Design Systems in a matter of minutes. And no, you don’t even need AI to do it. 🚫🤖 We shipped 12 hand-tuned, highly configurable Styleframe recipes for components in the past two weeks. #css #typescript #designsystem #ui #ux

We just shipped Styleframe v3.3.0 🎉 Introducing the first recipes for our default theme: a big step toward a fully composable design system. - Badge & Button components with beautiful defaults - Scalable theming bit.ly/47lQ6kU #TypeScript #CSS #DesignSystems

Styleframe v3.2.0 is live! 🎉 The `@variablename` syntax is now widely supported for safely referencing variables in other variables, refs, selectors, utilities and recipes. #TypeScript #CSS #DesignSystems

Styleframe v3.1.0 is live! 🎉 ✅ 68 utility modifier composables (hover, focus, aria-*, dark, rtl, open & more) ✅ Deterministic hashing for arbitrary CSS values ✅ 8 new e2e test specs Type-safe. Production-ready. #WebDev #TypeScript #CSS #DesignSystems

Styleframe v3.0.0 is live! 🎉 • Global Styleframe instance with extension files • Scanner plugin with Tailwind-like utility support - write utility classes in markup and auto-generate the styles Read more: github.com/styleframe-dev… #DesignSystems #TypeScript #CSS #WebDev