To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/JackHerrington/ . The first 200 of you will get 20% off Brilliant’s annual premium subscription.
Vanilla Extract + Token Studio for Figma = the way to build a type-safe design system with design to build consistency guaranteed 🙌 I've found this combo to be hugely productive, so worth the initial setup effort
This is awesome! You have a new subscriber! It’d be cool to see a video with a shared component library and not just shared styles, while still using this mono repo approach
Good to see some Vanilla Extract video! I used mantine and in the upcoming alpha v7 version, it also uses VE as it's core. Vanilla Extract is a really great tool
For anyone wondering: The main benefit of using this over Tailwind is that you have more control over your design system and you have full type safety. It lets you do really cool things with your style logic, but obviously Tailwind is better for getting up and running faster if you don't care about doing fancy stuff, or don't have complex style logic.
Will try and see how I can toy with It. Wondering what that generates when It builds. Will It generate CSS for each of the applications specific to each application (repeating the Design System styles for each application) or does It generate a deployable "styles bundle"... I take if you change some values in the design system's tokens, you would have to re-build all applications? Also wondering if It's feasible to create a federated package that lives separately from all the apps that can be hot-swaped to an updated version that gets reflected on all deployed applications using this design system (I know It could break stuff if you change layout tokens, but for small token changes like branding colours, It can be really useful or even adding new themes to a white-label solution).
@@jherr great video as always rather than using vanilla extract is there a way to use tailwind I’ll like to get your response on that and maybe a video also but loooking forward to the course I really hope it’s something affordable 🙏🏾🙏🏾🙏🏾
I dont understand - why do we need js library to define shared styles? This can be done by using raw css files without additional overhead. And further improved by using css modules for components and preprocessor for entire style system. What is benefit of this library that preprocessor + modules do not have?
That package to manage css seems a worst idea than just use normal CSS or CSS modules It is like you want to generate CSS in a for loop, but don't know how to use SASS I had this issue with one of my coworkers who for some reason says that generating CSS using Javascript is a good idea, I made the same thing using SCSS and Tailwind, but he still not convinced And with tailwind you can generate CSS using typescript and the vscode extension can show it
@@jherrI like that you showed that way to us, but it is not one way that I would recommend to anyone Unless it shows some benefit, because right now it seems to only increase complexity and build step bad performance
Cool concept but ist there a simple way to do it ( old school way haha ). I recently built a dynamic DS with Storybook, Design Tokens with module SCSS and theme switching based upon CSS vars. No context for Theming.
This is easier than jss imho. It would allow someone to extract the design system from an app or component library, is that was a useful thing for someone 🤷 A use case I've run into is applying design system styles to a previously independently branded app, we just duplicated the css rather than extracted it 🤪
Why didn't you use PandaCSS instead of VE ? More performant, began to being more and more used by the community and fixes some problems that VE had. But great video otherwise, good job 👍 !
Because as he said VE compiles to a css file, and as I see PandaCSS is CSS-in-js Compile to a CSS is better for production and avoid FOUC Just wondering which type of problems that VE has that PandaCSS solves?
Panda-CSS does work, I just found the setup more difficult than with VE. That being said, that setup is a one time cost. So if Panda suits your model then that works too.
@@andreilucasgoncalves1416PandaCSS was tried first in VE, the problem that VE have is that if you intend to do something advanced with Sprinkles API (example try to recreate ChakraUI type of css as component attributes) you will be hit with almost 1mb or more of CSS (one of the creators of PandaCSS build a package of VE called Box-Extractor to fix this in VE, but it doesn't support all bundlers, only Vite), usually because VE don't purge unused CSS, they give you the ability to only define the CSS you wanna use, so you need to be careful. PandaCSS like VE also generate CSS Modules, so I don't know what you're talking about. Usually PandaCSS solve the Sprinkles API to be better, and the start fase and more perfomant because it purge unused CSS, in VE could be tedious to define everything, you need to define what are the allowed properties on flex css property for example, and be careful to not grow too much CSS file. Usually PandaCSS is faster in development, but VE have some more advanced cases, and maybe more useful when you skip the part of define everything and build everything from scratch.
To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/JackHerrington/ . The first 200 of you will get 20% off Brilliant’s annual premium subscription.
Vanilla Extract + Token Studio for Figma = the way to build a type-safe design system with design to build consistency guaranteed 🙌 I've found this combo to be hugely productive, so worth the initial setup effort
This is awesome! You have a new subscriber! It’d be cool to see a video with a shared component library and not just shared styles, while still using this mono repo approach
Good to see some Vanilla Extract video! I used mantine and in the upcoming alpha v7 version, it also uses VE as it's core.
Vanilla Extract is a really great tool
Always love me a little vanilla extract, great job as always Jack. Quite enjoyed this one! 😘👌
Nice to see Arthur Weasley teaching muggles some computer magic
For anyone wondering: The main benefit of using this over Tailwind is that you have more control over your design system and you have full type safety. It lets you do really cool things with your style logic, but obviously Tailwind is better for getting up and running faster if you don't care about doing fancy stuff, or don't have complex style logic.
Jack your content is priceless ❤
Great stuff! We are facing this exact problem at work
Love this content! Thank you! You are the best
What terminal settings do you use? captivated by that :)
It could be really cool to exports JSX Components directly from the package/design-system… and not classes. Sprinkles, recipes etc. Do the rest.
Nice to hear that about your next js course. is it paid or free course
This seems really nice; I'm just wondering how it handles deploying the application(s) somewhere, are there any extra things we need to take care of?
No because it integrates with the compiler so it becomes css at build time
Can't wait to buy the course You mentioned 😃
By the way, it seems You forgot to include the link in the description.
does it work with vanilla html css js files
Will try and see how I can toy with It.
Wondering what that generates when It builds. Will It generate CSS for each of the applications specific to each application (repeating the Design System styles for each application) or does It generate a deployable "styles bundle"...
I take if you change some values in the design system's tokens, you would have to re-build all applications?
Also wondering if It's feasible to create a federated package that lives separately from all the apps that can be hot-swaped to an updated version that gets reflected on all deployed applications using this design system (I know It could break stuff if you change layout tokens, but for small token changes like branding colours, It can be really useful or even adding new themes to a white-label solution).
Thanks for this nice video. One question regarding Nextjs pro will it be with typescript and how to use it with nextjs? Thanks
It’s typescript and it’s a course.
@@jherr amazing thanks for your reply
@@jherr great video as always rather than using vanilla extract is there a way to use tailwind I’ll like to get your response on that and maybe a video also but loooking forward to the course I really hope it’s something affordable 🙏🏾🙏🏾🙏🏾
Hi sir, what theme of zsh that you used ? Thank :D
I dont understand - why do we need js library to define shared styles? This can be done by using raw css files without additional overhead. And further improved by using css modules for components and preprocessor for entire style system. What is benefit of this library that preprocessor + modules do not have?
That package to manage css seems a worst idea than just use normal CSS or CSS modules
It is like you want to generate CSS in a for loop, but don't know how to use SASS
I had this issue with one of my coworkers who for some reason says that generating CSS using Javascript is a good idea, I made the same thing using SCSS and Tailwind, but he still not convinced
And with tailwind you can generate CSS using typescript and the vscode extension can show it
There are multiple ways to do this. This is just one.
@@jherrI like that you showed that way to us, but it is not one way that I would recommend to anyone
Unless it shows some benefit, because right now it seems to only increase complexity and build step bad performance
@@andreilucasgoncalves1416 Fair enough. Thank you for offering a different approach.
@@andreilucasgoncalves1416scss wtf bro this isn’t 2013
@@PanosPitsi It still works fine and it is very stable, you can try these new projects, but if it has a bug you are f
We’re just starting using Figma tokens… they look badass
Cool concept but ist there a simple way to do it ( old school way haha ).
I recently built a dynamic DS with Storybook, Design Tokens with module SCSS and theme switching based upon CSS vars. No context for Theming.
@jherr Nice video :) One question though, how can we easily override certains properties of the style ?
You can use `style` in each application to have application specific styling overrides.
@@jherr Thank you :)
let's redo this with panda panda panda
Excellent video!
Why is Angular not an option for this setup?
Angular is kind of a hassle to set up, honestly. IMHO.
@@jherrbut it's doable, right? Kinda like "a hassle to setup at first, but then it runs smoothly?"
@@roncanfil Definitely doable, Angular in a monorepo is fine. NX is particularly good for that.
just when you think modern web development can't get anymore complicated...
This is easier than jss imho. It would allow someone to extract the design system from an app or component library, is that was a useful thing for someone 🤷
A use case I've run into is applying design system styles to a previously independently branded app, we just duplicated the css rather than extracted it 🤪
Agree 🤣 reusable code can be highly overrated 😅
Its like this because HTML CSS JS was not designed with high programmatic interactivity in mind
what if React is using css in js?
Tailwind
Burger
You can just use css-modules with generation of their types. To be safe when you are importing it.
Do you have a guide or demo repo? Or is it *that* easy?
I don’t go back to naming things…thank you but i stay with tailwind
Having a shared stylesheet is not even close to having a real Design System. This is more of a tutorial how to use VE on multiple frameworks/libs.
Why didn't you use PandaCSS instead of VE ? More performant, began to being more and more used by the community and fixes some problems that VE had. But great video otherwise, good job 👍 !
Because as he said VE compiles to a css file, and as I see PandaCSS is CSS-in-js
Compile to a CSS is better for production and avoid FOUC
Just wondering which type of problems that VE has that PandaCSS solves?
Panda-CSS does work, I just found the setup more difficult than with VE. That being said, that setup is a one time cost. So if Panda suits your model then that works too.
@@jherr Yes I assume that you used VE because of that 😄 (and that it showcasing VE was not the priority). Have a nice day/evening 😉
@@ImMystou Thanks! Yeah, I did a Panda video just last month. Gotta change it up. :)
@@andreilucasgoncalves1416PandaCSS was tried first in VE, the problem that VE have is that if you intend to do something advanced with Sprinkles API (example try to recreate ChakraUI type of css as component attributes) you will be hit with almost 1mb or more of CSS (one of the creators of PandaCSS build a package of VE called Box-Extractor to fix this in VE, but it doesn't support all bundlers, only Vite), usually because VE don't purge unused CSS, they give you the ability to only define the CSS you wanna use, so you need to be careful. PandaCSS like VE also generate CSS Modules, so I don't know what you're talking about. Usually PandaCSS solve the Sprinkles API to be better, and the start fase and more perfomant because it purge unused CSS, in VE could be tedious to define everything, you need to define what are the allowed properties on flex css property for example, and be careful to not grow too much CSS file. Usually PandaCSS is faster in development, but VE have some more advanced cases, and maybe more useful when you skip the part of define everything and build everything from scratch.
Or just use lit
But in reality they should all just be using Svelte an Daisy UI and stick to the core web fundamentals.