Webstudio
Log in

Join the Webstudio community

Updated 3 months ago

Copy & Paste HTML Template

At a glance

The community member is interested in the possibility of importing HTML templates for Bootstrap and Tailwind into WebStudio in the future. They also saw that Tailwind integration is on the roadmap and would like to use any CSS framework they prefer. Another community member suggests that using random CSS frameworks may not work as expected, as WebStudio uses design tokens instead of classes. They recommend creating design tokens in Figma and syncing them with WebStudio. The community members discuss the upcoming feature of token sync, import, and export, which is currently in development.

Useful resources
ccmdaltctr
·
I was wondering if this is possible to implement in WebStudio in the future. I have many HTML templates for Bootstrap and Tailwind. I'd like to copy these and paste them into some kind of code editor in WebStudio. This would make our workflow 5

Secondly, I saw on the roadmap for future Tailwind integration. I actually like Bootstrap tbh. Is it possible in the future to use any CSS framework flavours we want?

I really like the idea what LiveCanvas did to Bootstrap for WordPress.
O
c
5 comments
OOleg Isonen
here is an issue to follow https://github.com/webstudio-is/webstudio/issues/2651
OOleg Isonen
Having random css with all sorts of frameworks won't work the way you imagine it to be, just like you are using them in the code, once you import you are going to be using webstudio primitives for css, which is tokens, not classes, so even if we import

Generally css classes are hard to maintain and tokens are super composable and have no specificity issues. So I think you are thinking about webstudio from your past experience and you need to get over it.
ccmdaltctr
In this sense, we are looking at creating design tokens in Figma and setting up variables there and have them over webstudio.
ccmdaltctr
I can imagine this work effectively if I want to have my design system to work seamlessly with my frontend.
For now, is there a way I can import my tokens that I build elsewhere or do I need to manually create them in the builder?

I found this info about the token sync, import export as coming soon:

https://docs.webstudio.is/university/foundations/design-tokens
OOleg Isonen
wa def. want to enable syncing the tokens, just haven't come to do that yet
Add a reply
Sign up and join the conversation on Discord