Styleframe v3.8.0 is out! ๐
Smaller output, smarter scanning, and a tighter Figma workflow.
โข Build-time class name shortening
โข Dynamic utilities for unmatched CSS properties
โข Figma specific export/import via CLI
โข Recipe-level tree-shaking
โข Now on Vite 8 w/ Rolldown + oxc
Shipped another huge DX win for @styleframe_dev! Utility classes are now minified automatically at build time.
_color:primary -> _c:p
Write utility classes in natural CSS-like syntax during development. Ship smaller HTML and CSS than Tailwind (-15% gzipped), zero loss of DX.
We've just released [email protected]! ๐
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
We're welcoming contributions from all of our community! ๐
We've added a complete CONTRIBUTING.md guide to help you get started: https://t.co/lS2Hajf8c0
#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: https://t.co/YZcGpi8PRK
#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 โ https://t.co/8zBK05nRIy
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
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
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.
@_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
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
https://t.co/qmP42yesgq
#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