Bricks: Build-Your-Own Fluid Typography Framework
HTML-код
- Опубликовано: 27 сен 2024
- Get your free PDF cheatsheet, visual reference, and extra code here:
davefoy.link/b...
-- The extra code also includes line heights AND means you don't have to set ANY typography up in Bricks Theme Style at all.
Take my FREE Bricks masterclass-learn the real key to faster builds, effortless future maintenance, and more profitable projects:
www.davefoy.co...
Learn a corresponding spacing framework in my Build With Bricks course:
davefoy.link/b...
In this video, you’ll learn how to easily create your own fluidly responsive typography framework in Bricks Builder.
It’ll automatically set perfectly sized and proportioned font sizes for you, at every possible screen size.
Your typography will require zero mental overhead, zero decision making about font sizes, you’ll have a much wider range of type sizes to play with when building your sites, not just body copy and headings.
And you’ll set it up just ONCE and use it on every Bricks site you build from now on.
ACSS: davefoy.link/acss (aff link)
OxyProps: davefoy.link/o...
Core Framework: davefoy.link/c...
Advanced Themer: davefoy.link/a...
TEXT SIZE SCALE URL
www.fluid-type...
*HEADING SIZE SCALE URL*
www.fluid-type...
I never did like the way font sizes jumped between breakpoints. This was a very satisfying tutorial. I feel very organized. Thank you sir.
You’re very welcome.
This tutorial along with Kevin Geary’s tut on fluid typography are the best I’ve watched here on YT and upped my game tremendously. Thank you, Dave! I love Bricks and this actually gave me a good idea on how to implement it in Elementor through their global fonts settings.
Oh wow, thank you! And… I have a video coming next week showing how to do all this in Elementor. :)
Excited to see it!
Yeah, but Kevin Geary to explain all these things the video would be 4 hours and 39 minutes of which 93% of the time he would be talking without explaining anything. Only 7% of his content is tutorial, 93% is conversations and his personal opinions about some nonsense sh*t.
@@Kirolmh I disagree. Maybe Kevin gives too much information (which is not necessarily a bad thing) but definitely not 93% nonsense.
@@Kirolmh He needs to anchor the audience in from an amateur teaspoon level so he'll get everyone understanding it and on board.
It actually works, even though it could be more 'juice'. But he doesn't leave anything out. But I get that you feel the 'nonsense' are filler words.
Not for amateur me. I love it. And need it badly.
Proud to be your channel subscriber. One of the most important videos for me on the YT
Very kind! Thank you sir.
You have no idea how much time you just saved me! Thank you so much. In a nutshell my "DEDICATED DAYS" of text updates are over! Thank you Dave!
Wooo hoooo!! Mission accomplished. 🙏
i was writing the same :) Thanks Brad, huuu Dave sorry You look so much alike!
Lol, Brad who? Never been told I look like Brad anyone before.
@@DaveFoy :) it was about the joke about him (Brad Pitt) and you in this video, or it was perhaps in another one of yours ;)
@@adamu6941Of course! Doh. 🤦♂😂
Not really your target audience, Dave, but your videos are a work of art.
You are seriously one of the greatest teachers ever. Your pace is perfect, pronunciation super sharp, upbeat and nice. Just smooth and wonderful to listen to. Easy to learn. And what an amazing production quality. Congrtatulations!
*Subscribe and like...
I'm using Elementor, bought Bricks but are "terrefied" to switch, and don't know how. And are currently using H1,H2,H3 etc. in wordpress visual editor. It's a nightmare.
Do you have a video on switching from Elementor to Bricks? And how can woocommerce be edited within bricks?
I'll tell you it's hard to be an amateur haha. But you make it easy. Thank you thank you thank you.
Wow, thanks Audun. This is a seriously nice review! I don't have a RUclips video about switching from Elementor, but I do have an entire course helping Elementor users switch: www.davefoy.com/p/build-with-bricks/ I'm about to completely remake it from scratch as version 2.0, but people who enroll in this version get 2.0 for free :)
Prefect tutorial and explanation. This saves so much time and frustration. Thanks 🙏
Glad it helped :)
Perfect. Now fluid spacing :)
Indeed!
Woooooooow! Thank you very much for making this video. I've been smiling throughout the tutorial. Nice sense of humour, and awesome presentation. The approach to fluid typography is new to me. What a time-saver!
Glad you enjoyed it!
Very cool! Thank you so much! Just watched Kevins video a couple of days ago and together with this one it all comes to life now. Maybe could have managed somehow without, but will be saving me so much time and brainpower. And the calculator is absolutely amazing...
Having a typography framework in place really is a game changer. Glad you like it. 👍
Very nice indeed. Love your style of instruction, and how you know your stuff. Your videos are very well organized, making them easy to understand, and adding your touches of humor make them fun as well as educational. I know that takes a lot of extra effort to produce such quality, so thanks for your hard work.
Side note: Although I know it's a very popular thing to do, I don't understand why Thomas made the default for html font size 62.5%. in Bricks. I've read that even though it is convenient for pixel to rem conversions in your head, it can mess up accessibility for people who change their default font size. There are other reasons as well. As you say, people can choose to change it if they wish, but I think it's better if a page builder is set to the default web standard; then the choice to move away form that standard is up to the user of that builder.
Really glad you liked it! I don't like the 62.5% hack and yeah, really don't know why it's the default. Something that should be a definite choice.
This. Is. Perfection. You're a master, Dave.
British modesty doesn’t permit me to agree with you…. but I’m very delighted you think so dude. Thank you 🙏🏼
Thank you for your video, it's extremely helpful. A quick question: at 13:00, you mentioned that the Max screen width should match the Container width in Bricks, can you explain that in more detail? I don't see a clear connection between them. Because if I'm not mistaken, Max Screen Width is the width of the entire device screen (from one edge to the other). Whereas, Container Width in Bricks is simply limiting the width of the content on the website.
Yes, that's right, they're both targeting different widths. The calculator's max width is the browser screen width, and Bricks is the max width of the content. The reason they're connected is because as your layout stops 'growing' (for example, at 1280px wide), you also want your fluidly responsive type sizes to stop growing as well. Otherwise, at the point your layout effectively stops being responsive, your type sizes will just keep getting bigger and bigger, which wouldn't look good. The only reason we have progressively bigger type sizes at progressively bigger screens is so the type sizes are appropriate for the design. As soon as the design stops growing, the type sizes should to. Make sense?
@@DaveFoy Wow, now I understand clearly, thank you for the excellent explanation.
Absolutely nailed it with this one sir!!! You need to do something similar for the spacing scale.
Nice one man. 🙌 Yeah, I cover this in my Bricks course. ;) I may do a RUclips version too.
@@DaveFoy Din’t know you had a bricks course (just the old Elementor one).
@@AyDeeSandra Yeah I stopped supporting the Elementor course (No Stress WordPress) about 3 years ago now. Been running the Bricks course since early 2023. Loving it. :)
Thanks a lot Mr.Dave. You are the best tutorial maker I've seen so far. Still thinking about buying your course, and I will soon.
You're the only one tutor that I can watch all day long full focus. Everything is perfect on your videos. KEEP POSTING!
BEAUTIFUL feedback. That really means a lot. Thank you.
When i watch stuff like that i feel like we are in the very begining of webdesign. So strange that no wordpress builder thought of that claiming beeing responsive. Strange.
I think Kadence might have something like this built in.
Excellent! Very clear and easy to understand. I'm actually going to apply the code to Breakdance, not Bricks. How does line height come into the equation here? Or maybe it doesn't!? Thanks.
Thanks Dan. Glad you liked it. Sure it'd translate easily to Breakdance.
Line height actually should come into the equation, yes. I just left it out to keep things simple. But you could add a line height value into the utility classes. I wouldn't try and make it fluidly responsive though. I tend to go with something like 1.05 for H1, 1.1 for H2, 1.2 for H3, and 1.3 for H4.
ok excellent - makes sense. And for the various text sizes?@@DaveFoy
1.05 REM?@@DaveFoy
No, just 1.05. Always set line heights without a unit. I tend to have the smallest at 1.6, body at 1.5, and the larger ones at 1.4. I'm going to update my cheatsheet and the extra code today with these line heights. Thanks for the tip!
Get your free PDF cheatsheet, visual reference, and extra code here:
davefoy.link/bricks-typography
-- The extra code also includes line heights AND means you don't have to set ANY typography up in Bricks Theme Style at all.
Take my FREE Bricks masterclass-learn the real key to faster builds, effortless future maintenance, and more profitable projects:
www.davefoy.com/l/bwb-mc01-reg/
this thing is good for font size... in bricks we can't add global font style like we can do with elementor. we have to go there and select line height and font-weight. etc.
Especially handy now that bricks supports variables natively.
Thanks a lot for this detailed explanation.
Thanks, Dave. A great, concise solution. Nobody has covered it as easily and comprehensively as this. A query on a detail: In text-xs and h6, you end up with the Min greater than the Max. For example, text-xs Min is 12.64px, Max is 12.5px, so the text won't ever scale down to 12.5px, let alone hit 12.5 as a max. Similar for h6 (which you say you don't use). Does this suggest an adjustment of some kind? A larger range or a smaller scaling factor?
Ah, interesting. Especially as I've never noticed this. :) That's mainly because, as you said, I never use H6, nor text-xs either.
I'll experiment a bit and get back to you, Paul. Thanks for the tip-off.
Yep - it's to do with rates of growth (which is logical, actually).
minRatio: 1.125
maxRatio: 1.2
The max ratio of 1.2 is going to grow, and shrink, faster than the min ratio 1.125. Which is why it flips at the bottom end of the scale.
I don't think it matters too much in practice anyway, because at those very small sizes the difference in size is negligible anyway. I'm happy to ignore it. But... it might be one of those thing you'd need to manually adjust the generated values slightly, or even just make them both the same REM value at both ends in those cases.
Thanks again for spotting it and bringing this up, Paul.
Thanks for looking into it. Yes, I agree it will make virtually no visible difference at those small sizes.
Great one as always Dave!!! Thanks a lot!
Thanks buddy!
Dave love the bleep on the dev tools I want that 🙂
I'll let you find the secret setting. 😉
Awesome, thank you!!!
You're very welcome.
Hi Dave, thank you for the video, very useful and implemented in my site. I have a question related to space between components. As we are using different Scale ratio for Headings and base text. What scale ratio should I use to separate my website components and being consistent?
I mean, we are using Major Second/Minor Third for text size and Major Third/Perfect Fourth for Headers. This leads my to build two separated typgraphy sets in Core Framework.
Which scale ratio should be using for Margins, Padding & Gaps between components in my site? As both sets have different font size, which font size (text/headers) should I take as reference of my scale ratio for spacing?
Thank you for your time and attention
Liking this, no more blip, blip, blip. Im currently using ACSS w Frames, I wonder how it will play with this. Cheers Erik Z
Thanks Erik 🙏🏼 you don’t need this if you use ACSS. It’s all handled for you and much more. :)
Duh, well in that case I just learned what it's all about - didn't even know all this time.
Watching on RUclips is really convenient for people with poor English like me. I want to buy your full course but I don't know if it will also be offered via RUclips or not? Because I need a video with subtitles (automatic translation from english to my native language like youtube did)
I already replied to your email, but just to say here too in case anyone else is wondering: some parts of my Build With Bricks course are subtitled but some are not (I'm not proud of this - all my previous courses have been 100% subtitled). The new version 2 remake in 2024 will be 100% subtitled.
I am trying to shift from elementor, and the way they built the global fonts and typography gives you more room (in my noob understanding of Bricks) to create more customized options for selecting which font to load on each element. for example, i create a font called page title, select the family, size, etc, and whenever you want to insert a page title go to element style and select the font you created from global fonts and it will popup directly; same goes for product. and whenever you want to change the font styling you just edit the Global fonts and they will change everywhere on the website. Again, i am new to Bricks and trying to figure out how to migrate an existing built from elementor. Thank you for the great explanation.
Elementor’s global typography system is actually pretty good. But ultimately still limiting, because you’re still stuck with the styling options they give you, though I know you can create as many named font styles as you like. With Bricks instead you create classes. A class is just a set of styles that you give a name to, a bit like a preset. But the difference with Bricks is you can do that for literally anything, they can have whatever styles you like. It’s so much more powerful and flexible.
@DesignBuildWeb thanks for the reply. I am still trying to figure out how bricks work, still need to redesign the templates to make it all work as desired. Hope this will not break my designs.
This video tutorial is very best... danke....Dave.
Bitte!
Works beautifully.
One question though: Your headingy & text elements all have a margin/padding below to create distance to the next element. Where did you set that?
Good point! In this particular instance I'm using Flex row gap to set a consistent gap between each element. That sometimes works well, but in some cases it doesn't look great - like with articles and blog posts, where you need to suggest more typographical hierarchy. In those cases I'll use different amount of margin (set in ems) on elements instead. So basically, I use one of two different methods, depending on the context. Waaaaay too much to go into in this video. :) I might make another video on this, but I cover it in my Bricks course.
@@DaveFoyA video on this would be great!
Thanks for the cheat sheet.
I was able to create the variable and use in the theme styles but utility classes were not created.
Please can you help to understand that how can we create utility classes from your code. The utility classes is not working.
The first time you want to use a utility class you have to add it to Bricks, in the classes field on the element. Once you've added it to Bricks' database, then the class will appear in the classes dropdown menu from now on. Bricks doesn't automatically pull them in from the CSS code, you have to add them first.
Dave - if I currently have an h1 with a 1rem gutter, and as I scale the screen size down, the text never wraps but always just scales down to fit, would you still use CALC?
I'm not sure I understand. Do you mean you already have fluid typography in place with clamp and your h1 isn't wrapping? I think I'd need to see it in action.
39:55 - Can you tell me why, despite adding utility classes as you show .text-m + .text-l etc., they do not load when editing the page in bricks builder? --var work perfectly, but the utility classes do not load (I type text-m and there is no such utility class). I thought that if you add all the values via code snippet, utility classes such as .text-m will be automatically available in bricks builder when creating the website. Thank you in advance for your help!
No they're not automatically available. Bricks only knows about classes you created inside Bricks. So you have to first add the class in Bricks the first time you want to use it. It'll be in the dropdown from then on. It's caught a few people out, not just you. :)
@@DaveFoy Thank you very much for your answer. I checked and it is true, everything works perfect😀
@@DaveFoy Thank you very much for your answer. I checked and it is true, everything works perfect :)
Any real-world feedback on how fluid typography affects accessibility?
This is as close as I can get, Brent. www.smashingmagazine.com/2023/11/addressing-accessibility-concerns-fluid-type/ And I have to say, the maths behind this is over my head.
Hey Dave, why cant I have a 100vw type on Bricks? It doesn't work. Any workarounds?
You mean you're setting a font size in vw and it's not working?
@@DaveFoy not as expected, 100vw does not fit in the screen width, it's much bigger
Thanks for your grate tutorial ❤
You're welcome 😊
How I wish this features become native in bricks at some point
I think it will be at some point. The new components feature coming soon is similar, except it won't allow your components to be used in Gutenberg. I know from one of the Bricks team that this feature is on their radar, but not yet.
Or you can use Bulma the modern CSS framework. 😀
Does anyone have a discount code for Bricks unlimited package? 😅
There are never any discount codes for Bricks.
@@DaveFoy, thanks for noting. I was wondering because on the checkout there is a field for adding a discount code. LOL 😂
@@iliyasiliev9103 Ah! Yeah, I can see the confusion.
Wow, Bob's your uncle 😁
😁
I wonder if this is similar to divi presets
Haven’t used Divi in a very very long time.
Wash your mouth out with soap! 😀
@@nicomorgan ?
English joked. Divi is horrible and bloated.@@therankingworld7627
This is suburb! I am wondering why you would use a extra plugin when Bricks has a really native way to implement CSS though? Hmm...
Incredible useful. Thank you very much 👍
Thank you 🙏
Im excited for this. New to bricks and on install body font size is 15px (pixels!) And html is set to 62.5%.
I loterally wrnt into the frontend.min.css and manually had to change that 15px , and figure out why my appearamce-> customize -> custom css stylesheet where i was putting clamp on the html and referemcing variables with a few clamps , wasnt overriding. Ive just been creating classes for things like `.hero-heading` or `.footer-menu-text`.
Quick question, what do you recommend for spacing, between elements, has anyone covered this? using root vars? ty
Do you mean like a spacing framework? If so, I also built a basic spacing framework using Utopia's fluid space calculator: utopia.fyi/space/calculator/ I'd advise using the space value pairs though, cos the standard space values (the first on the page) don't have enough contrast between smallest and largest for my liking.
@@DaveFoy yes, a way to automatically have all the components standardised to match a design system, that would be a huge time saver.
@@DaveFoy this resource you linked is really interesting!
Pretty cool introductory course on fluid typography. I watched till the end. You've got talent. I'd say, though, that there are still quite a few accessibility issues with fluid typography, despite being around for many years now. (I remember Chris Coyier experimenting with it back in 2012). People can't zoom, the user loses control, all of which goes against basic accessibility principles. Google does not like that, either. It also does a terrible job with complex designs - simply because a website can't be 100% fluid , unless you keep it super simple. It requires a fairly good knowledge of css to find fixes. The irony being that you end up writing specific queries applied to elements in your design - container queries - with custom properties and odd units like cqi and cqw to tame the beast. To cope with font size interpolation, the calculator becomes your best friend. It is so tedious. Font pairing can also turn into an ugly mess. Hence the reason why pros still stick to responsive typography 99,99% of the time. Great for experimentation and simple websites, though.
But you're right, it is probably the best way to work with typography in Bricks, with proper scales, as it is much faster to write media queries by hand than to set them up with Bricks. I do have some reservations about Bricks, I must say. The concept is nice, definitely deserves a try, the developers are quite smart and rigorous, but overall it is alas still buggy. I would not trust it yet for a production website. It should work for simple projects, though.
I don't quite get its reputation for being a developper oriented tool. Despite being open to advanced concepts, it is pretty straightforward to use and must be quite rewarding for first-timers looking for a hands-on experience. As a matter of fact, the community seems to be one of hobbyists building their first websites. I've checked quite a few from the showcase category in the Bricks forums, oh my ... There's nothing wrong with being a complete beginner, quite the contrary, but still... a collection of "Don't", all the way. Most get a terrible PageSpeed Insights score - not Bricks' fault, for certain. One thing is sure, they certainly need you and Bricks, thanks to its rigorous approach, could be a fantastic learning tool. I wish you the best with this new series of tutorials.
what camera are you using? you look more clearer than when i look at myself in the mirror wtf
Lol. It's nothing special. Sony ZV-E10. I think Sony bill it as a vlogging camera. The lens is decent though, Sigma 16mm F1.4.
Bricks has it's own custom CSS tab under "Settings" > "Custom Code". Why add extra bloat to your installation when you can use that?
Other than that, great tutorial!
I did say you can add your CSS wherever you like. I just find trying to write and edit CSS in that tiny text box a bit of a PITA. and a code snippet plugin is hardly extra bloat. If I was worried about that I’d write/edit my CSS in a file on the server in a child theme. Glad you liked the tutorial!
Thank you!
I had this going in Oxygen but when I started using Bricks I thought should at least give the default workflow a chance. But typography in themes is a no go! Thank you so much for this!
YEEEAAAHHHH!! 🙌
Wow, the math comment made us comment. What an analogy!
Really good video Dave, wasn't looking for this subject but watched it all!
Haven't watched yet - was curious if your process works for Elementor as well before I invest the time, as I currently only use Elementor. Thanks!
It does, yes! I do have an idea to make a version of this video for Elementor, actually. It's definitely doable, I tested it. :)
Superbly explained… love it
Thanks Kevin. I appreciate that.
Hi Dave, I recall on some of your videos, the Bricks Editor shows different colored outline for each elements that you're hovering. For example orange outline for sections, blue outline for container and green for text elements. But I cannot find that within Bricks setting. How can I do that please?
@@hathanh119x They changed the colours since, there are no settings to change them to what you like, unfortunately.
Absolutely phenomenal tutorial, Dave! One of the best I've ever seen on any topic. Just implemented this and it's working like a charm. Thanks very much for posting this!
Aww thank you Charlie. Comments like this make it all worthwhile. I’m about to post an email update to people who requested the extra code etc with an improved solution too. 👍
Great Job, you nailed it. Thanks for sharing, liked and subscribed.
Awesome, thank you!
Great video Dave, the first time I've watched your channel but it definitely wont be the last.
Thanks Toby! Glad you enjoyed.
This must be one of the most useful tutorials I've listened to. Cheers to you!!
Thank you, Grace! Nice of you to say.
oh i didnt know you did a video on this, nice! i'm trying to get this working in gutenberg as well (dont ask )
Good luck, my friend ;)
Well done 👍🏻 I am an ACSS user, but will adapt this method for EL 🙈 sites I have created in the past. I know other tutorials on fluid typography, but yours is very descriptive - and the calculator is one of the best I've seen so far.
Glad you liked it, Jan-Hinrich! And yes, this is pretty easy to adapt to Elementor, especially now you can add your own custom values. I'm planning a matching Elementor type framework video soon as well.
@@DaveFoy I think that would be a great help for many Elementor users.
@@DaveFoy Hej Dave, are you still planning to create the Elementor video version? ツ
This will be work with English language, but not with else...
It works in any language if you change the variable names to whatever language you like, no?
Hudge thanks Dave, a nice gift!
Glad you enjoyed!
Hi dave what is worng if i use for examle this css code? Because your procedure doesn't work for me when I start with mobile first and this code works perfectly {
font-size: clamp(2rem, 5vw, 5rem);
} Thanks mate😊
Hmm. Not sure! Do you have a URL to see it in action?
it's all working now thanks mate, but for some reason when i put this code to custom css looks like it's shrinks nicer.
body {
font-size: clamp(1rem, 2vw, 1.925rem);
}
h1 {
font-size: clamp(2rem, 5vw, 4rem);
}
h2 {
font-size: clamp(1.75rem, 4vw, 3rem);
}
h3 {
font-size: clamp(1.5rem, 3vw, 2.5rem);
}
h4 {
font-size: clamp(1.25rem, 2.5vw, 2rem);
}
h5 {
font-size: clamp(1.125rem, 2vw, 1.75rem);
}
h6 {
font-size: clamp(1rem, 1.5vw, 1.5rem);
}
Nice job
Thanks!
Hello, I love your videos, I recently came across a new page builder called DROIP. Please can you have a look at it make review video for us or a tutorial on onboarding this new builder. Thanks
I’ve never heard of it but I’ll check it out.
@@DaveFoy Thank you. I will be looking for it. I really appreciate your response.