02. Advanced Webflow tutorial: WEBFLOW STYLEGUIDE SETUP
HTML-код
- Опубликовано: 4 окт 2024
- Hey fellow Webflowers, this is part 002 of our advanced Webflow tutorial series: SETTING UP THE WEBFLOW STYLEGUIDE
###
See the result: getmilestone.w...
Get the clonable: webflow.grsm.i... *
Figma-file: www.figma.com/...
Get our 8xflow styleguide and spacing system: webflow.com/ma...
Font size calculator: wizardry-techn...
###
Follow me on other platforms:
Twitter: / felix_brodbeck
LinkedIn: / ui-ux-webflow-felix-br...
###
Work with my studio:
www.designbase...
#webflow #8xFlow #figma #webdesign #designbase #tutorial #stepbystep
affiliate link
I have been using your style guide on every project i have been working on for about a year now. Thank you so much for putting it together, it saves me a lot of time plus its just that good.
Love to hear that. Currently we are working on an update with variables
Awesome, waiting for the second part👍
You provide very cool Staff!
I'm your new Susbcriber, keep up! 👌
Nice video. Please keep it coming
Thanks! You are welcome.
Super valuable, thanks!
Finally, Thank you so much for uploading 👍🔥.
Hi, regarding the EM issue at 9:00, using EM instead of REM still offers the possibility of resizing via the browser. EM calculates size in relation of the element or it's nearest parent that uses a fixed size. So if all your font sizes are EM or REM, an element using EM will act as REM since the nearest parent with a fixed size will be the root element. EM is great for line-height or letter-spacing but for fixed font sizes you'd be better off switching to pixels like Apple does on their website. Loved the style guide, thank you for your work!
I switched to use clamps on font sizes nowadays. Very flexible, responsive and it can be overwritten by the browser settings.
Hello, thanks for these guides and tutorial, does that mean we should specificaly use Sora's font?
I'm trying it with Open Sans right now, but I'm not sure wether or not all calculations works with any font?
Some fonts have minor differences in their sizes but in general it should work. Just try it 😀
Thanks for the video! Why you are not using client-first and cf styleguide or relume?
You're welcome Nicola! 8xflow is utility first instead of client first. Compared to relume it uses global classes where possible to keep the project dry. Hope this answers the question.
Hey,
Can you share your Figma file for the website we are building? It would be a huge help. Thanks!
Hey there, sorry for the late reply. I just added the Figma link to all video descriptions.
@@designbasestudio thank you
font-size: clamp();
Using it all the time nowadays
It would be better if you could setup the project's styleguide from scratch. You have already done many things before so it's kind of difficult to understand for beginners
The styleguide is a template I reuse everytime so I don’t need to set it up from scratch everytime.
But I have another video on styleguides check it out