Awwww this is great. I have been building with containers, etc. and I finally get the token application better. Been doing builds slightly wrong. Thanks for the great video.
"Following the project, I'm hoping it grows into a real alternative to WebFlow and WordPress. However, I wonder why Webstudio uses different names for well-established concepts in web development. Why call 'Classes' 'tokens'? And why refer to DIVs as 'Box'? Additionally, why not simplify the workflow by offering the four preformatted variations of a DIV-such as Section, Container, Block, and Div-directly on the toolbar, instead of making users manually format each one, including defining the semantic name for each in the DOM?"
- We don't use Tokens for classes, tokens are higher level than classes, they fix all specificity issues: docs.webstudio.is/university/foundations/design-tokens#introduction - Box refers to all the layout html tags, you can choose the tag in the settings panel, div is used by default - "the four preformatted variations of a DIV-such as Section, Container, Block" - because there are not just four, there are 10 most popular once supported from the box tag select and there are more in general - " instead of making users manually format each one" do you mean adding Box, then selecting tag in the settings is a problem? this will be faster with cmd+k search/commands.
Hi, What's the difference between the tokens and classes? And also is there any similarities with components (reuseable components) in other systems? And any plan for reuseable components?
Thanks for that! Just out of curiosity... Why do you call the ID level styles "local" and the classes "token"? Wouldnt it be easier to stick to the common namings?
These are not id level styles or classes. All style tokens get merged into a single style rule or atomic style rules which is the default, but in the end its all classes docs.webstudio.is/university/foundations/design-tokens
wow this is cool less stresful but then how do i locate the grid display instead of the flex most especially when i need to use it for my cards for example grid template column (3, 1fr)
![เปิดบ้าน โคตรสวย ป๋องกพล รู้จักตั้งนาน เพิ่งรู้ว่ารวย!!! l [Nickynachat]](http://i.ytimg.com/vi/tmgCF_2HfYI/mqdefault.jpg)
Flex-wrap was a mindblowing moment for me. Looks much easier than to look up custom css grid.
Great!! Always good to see best practises from others, very valuable info
Awwww this is great. I have been building with containers, etc. and I finally get the token application better. Been doing builds slightly wrong. Thanks for the great video.
Glad it helped!
Nice! Thanks. Looking into Web Studio. Gonna wait till I see animations and interactions come to the platform though.
Great video, Webstudio looks really nice!
webstudio is a hidden gem
Somebody please unhide us 🤣
"Following the project, I'm hoping it grows into a real alternative to WebFlow and WordPress. However, I wonder why Webstudio uses different names for well-established concepts in web development. Why call 'Classes' 'tokens'? And why refer to DIVs as 'Box'? Additionally, why not simplify the workflow by offering the four preformatted variations of a DIV-such as Section, Container, Block, and Div-directly on the toolbar, instead of making users manually format each one, including defining the semantic name for each in the DOM?"
- We don't use Tokens for classes, tokens are higher level than classes, they fix all specificity issues: docs.webstudio.is/university/foundations/design-tokens#introduction
- Box refers to all the layout html tags, you can choose the tag in the settings panel, div is used by default
- "the four preformatted variations of a DIV-such as Section, Container, Block" - because there are not just four, there are 10 most popular once supported from the box tag select and there are more in general
- " instead of making users manually format each one" do you mean adding Box, then selecting tag in the settings is a problem? this will be faster with cmd+k search/commands.
@@getwebstudio Okay, thanks for the prompt response. I’ll check the article about tokens.
Hi, What's the difference between the tokens and classes? And also is there any similarities with components (reuseable components) in other systems? And any plan for reuseable components?
docs.webstudio.is/university/foundations/design-tokens
Components are not specific to design, they allow reusing and parametrising the entire instance, while tokens are reusable containers for styles only.
Thanks for that! Just out of curiosity... Why do you call the ID level styles "local" and the classes "token"? Wouldnt it be easier to stick to the common namings?
These are not id level styles or classes. All style tokens get merged into a single style rule or atomic style rules which is the default, but in the end its all classes docs.webstudio.is/university/foundations/design-tokens
Question... how do you make a card clickable? In WebFlow you can wrap a div in a 'link block' and it can have nested elements.. is there a workaround?
Use the link component. You can drag your other components into it.
wow this is cool
less stresful
but then how do i locate the grid display instead of the flex
most especially when i need to use it for my cards
for example
grid template column (3, 1fr)
Through the advanced properties in the style panel for now
nice. what screen recorder was used for this?
www.tella.tv/ I've been really liking it
@@getwebstudiosick thx