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.
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
"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.
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)
Great!! Always good to see best practises from others, very valuable info
Great video, Webstudio looks really nice!
webstudio is a hidden gem
Somebody please unhide us 🤣
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.
Flex-wrap was a mindblowing moment for me. Looks much easier than to look up custom css grid.
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
"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.
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.
nice. what screen recorder was used for this?
www.tella.tv/ I've been really liking it
@@getwebstudiosick thx
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