Fluid Typography in Breakdance Builder | WordPress Tutorial
Vložit
- čas přidán 13. 09. 2024
- Learn how to set up fluid typography with a fallback in Breakdance Visual Builder by leveraging on the powerful preset system and type scale feature.
Get Breakdance - A record breaking visual builder for WordPress
breakdance.com...
Breakdance Builder | Bricks Builder | Oxygen Builder | WordPress | Tutorial
#breakdancebuilder #oxygen #oxygenbuilder #wordpress #bricksbuilder #bricks
FACEBOOK GROUP: / designwithcracka
FOLLOW ON TWITTER: / udoroessien
GET AUTOMATIC.CSS - A time saving utility class for WordPress websites
automaticcss.c...
--------------------------------------------------------------
GET MOTION.PAGE - Interact & animate any WordPress site
motion.page/go...
--------------------------------------------------------------
GET RECODA WORKSPACE - Advance workspace for Oxygen Builder
recoda.me/work...
--------------------------------------------------------------
GET 20% OFF HOSTING PLAN FROM HOSTINGER
hostinger.com/...
DISCLAIMER: This video or description contains affiliate links, which means that if you click on one of the product links, you'll be supporting the channel, and I’ll receive a small commission.
=============================================
BOOK A 1-HOUR CONSULATION
calendly.com/d...
=============================================
BUSINESS ENQUIRY: udoroessien@gmail.com
=============================================
Note: Where I used 1.8 for the ratio was a mistake, what I had in mind was 1.18.
Yes, actually, i was screaming it loud at the Screen while watching, but you didnt listen. 😃
@@jangirndt5843 hahaha... I can relate!
You sir, are a gift to the community! Thanks :)
Very appreciated!
really helpful
Thanks for this tutorial, very helpful. Are you able to do one on how you can add floating buttons on mobile view only. I want to add two floating buttons at the bottom of the screen on mobile view only. One to call the company, another to book that links to their booking page. So no matter where someone is on a website, they can take action and call or book. Thanks
I watched a lot of fluid typography tutorials. This one I really understood. Thank you very much Udoro.
Glad it was helpful!
Love the new videos Cracka. I may be the only one but I like placing a face to the voice😄😄
Damn bro
Im a beginner in wordpress
Have some knowledge of html and css
And desided to use Breakdance
I thought there are no good tutorials due to the young age but damn ..
This is fire 🔥🔥🔥
More tutorials coming!
This was exactly what I needed to level up. Thanks so much! I'm still unclear as to how you arrive at 62.5% for the font-size syle and how you determine the min-max numbers. Are there formulae for determining these?
62.5% is the percentage that will make 1rem equal 10px. It's for ease of use of the rem unit. The min-max numbers is determined by you, what is the max font size you need for desktop and the min font size for mobile devices.
Very nice! To save time it would be Nice make some fast way to implement This on other sites when its Done on one, without doing it on every site manualy. Some suggestion to so that?
You can export and import global settings.
Is that what I do if I "Export your Settings, Preferences, and Icon Sets to a JSON file." in the backend-settings? Or how to do it?@@DesignwithCracka
Hi, thank you for this really helpful guide. How can I save/export these preset for setting up other website I have? or do I need to set this manually for each website?
In Breakdance Version 2.0 you can import and export global settings. Version 2.0 is still in Alpha, hopefully it will be released soon.
How would you handle fluid line height in breakdance? My font size is scaling well but I don't like how the line height is responding. Smaller font sizes need more line height and larger font sizes need less. Thanks!
Use em as line height unit. Em scales with font size. E.g 0.025em
Thank you! But why do we additionally need to use the „Ratio“ button in that context? Can explain that point?
The ratio is responsible for the responsiveness of the typography fallback.
Thank you . Is it necessary to do the same responsiveness for margin and padding?
Yes it is, if you don’t want to change the values at each breakpoint.
Why you went with min-max instead of clamp? I'm personally using clamp (with Kevin's calculator, it outputs cleaner formula), and was wondering why you are using min-max instead.
Both are okay. Min-max has a slight edge; support for a very little percent of older browsers, but overall it doesn’t make much difference since it’s almost negligible.
@@DesignwithCracka okay, valid point. I just tested these three methods, and the results are the same. Just looking different in terms of the code.
Would i do the same thing for the body font
No need, the body font can remain the same for both desktop and mobile (18px or 16px), except for rare cases, but the body font should never be smaller than 16px
@@DesignwithCracka Oh ok, got it. Thanks bro
1st