I can see yourself evolving along with us, I remember the days when in Oxygen Builder you were throwing classes left and right from OxyNinja or the early days of ACSS. I think that with time, creating ACSS you realized how important are the things you are giving us now such as variables and functions. I'm glad that you don't keep this knowledge only for yourself but immediately share it, making our lives easier and we won't have to live in ignorance and make the same mistakes.
Correct. I was building based on the limitation of the tools I was using. By creating ACSS, and with builders supporting things like variables, those limitations are lifted and now we can exercise our full anti-chump power in the sites we build :)
He won't admit he's been evolving. The examples on his agency website show all the bad practices he's been preaching others shouldn't do. But he knows them so well because he's done them first hand. Many of his older videos show what he knew then versus what he knows now. But the best way to learn something is to teach it so it makes him a better developer and allows him to teach it to others. I wish he would quit acting like this is all something he has always done instead of what he has evolved into doing over the past few years.
that calc function is really neat. I had been using a framework but when I needed to override a font size I had been setting it using stuff like 5svh, switching to using calc with the established variable for each heading then adding the multiplier. Very cool!
I cannot express my gratitude enough for what you have taught me here. I didn't learn these things in paid course that I have taken for web development. Thank you. I just started an agency and I've been struggling to meet my expenses but despite that I just signed up for your inner circle because I am confident that what you'll teach me is going to be more than just valuable enough for me to be able to cover up for it. Thank you again Kevin
I was so excited to wake up and see the email that this course had been released. What has my life become haha. I'm another newbie whose brain is now in overload but just so grateful for your incredibly valuable lessons and soaking up as much as I can
These lessons are pure gold. I've been using tokens a lot since watching your videos, the last part lost me a bit, I mean I get the principle of it, but I will need more practice using variables in calc functions. I'm busy with a new site now where I'm using calc functions, but I can see I need to "clean up" my implementation for easier management. Awesome stuff again, Kevin, the community salutes you :)
"You're going to fall in love with CSS variables" Oh my God indeed ! It's like I'm learning everything I thought I knew from start again. Thanks so much for sharing your knowledge.
Great course Kevin, as a total novice my head is in a daze but will go back over the course and hopefully it will just click. Thank you so much for giving up your time to teach us all the correct way of doing things.
Revisited this right now, this was fabulous. Learnt so much. Looking forward to power through the next few this week. Thanks a million for this series Kevin. It is just amazing to have this value available from someone like you online.
You explained that so well, Kevin. As a beginner, I am still getting my head around basic css but I understood everything you said in this video. I'm not saying I am ready to start applying these principles but the fact that I understand them, and can clearly see their importance, is huge. I am currently a GP/GB user and while I still believe that is a good, well thought out, program I am so close to switching to Bricks. As soon as I do you will also see me in your Inner Circle (if you'll have me). Than you for all you do.
I didn't phrase my comment correctly. I will be switching, I just want to get a better understanding of Bricks and the principles you are espousing in this course before I do so.@@Gearyco
Intrinsic design, often regarded as the successor to responsive design, is fundamentally built upon variable design principles that prioritize flexibility and adaptability. This approach empowers design elements to "know" how to behave or adjust themselves according to different screen widths and viewing contexts, ensuring a seamless user experience across various devices and platforms. While classical responsive design relies heavily on media queries to establish breakpoints and make "jumps" between different layouts, intrinsic design takes a more fluid and dynamic approach, allowing design elements to adapt to their surroundings more organically. This not only improves the visual appeal of a website or application, but also enhances its overall functionality and usability, catering to the ever-evolving landscape of digital devices and user preferences. By embracing intrinsic design, developers can create more versatile, resilient, and scalable solutions that better serve the needs of a diverse audience, while also ensuring that their creations remain future-proof.
I was utilizing a JavaScript function, coupled with MutationObserver, to dynamically set properties such as scroll position and element dimensions as CSS variables on the :root element, as that has the potential to significantly enhance the adaptability and responsiveness of a design. This approach allows for real-time updates to design elements based on user interactions and screen changes, providing a more engaging and fluid user experience. It also allows for container width-based solutions… but if you do things like that you need to make sure that it degrades gracefully.
Dang Bro, I've been using Divi and I can tell you for those who never used a shitty builder that this stuff he's saying is pure magic. He I am at 3am watching thinking why it took me so long to get to the right place where you build website that you don't feel like you've hacked them together (because that's the only way to do it in divi). And start building something that's stable, repeatable and functional beyond how most sites are build. Thanks a lot
Just watched one of your other video's yesterday on codebox used your link and got wpcode box, more wpcode box video's please, this is awesome I only have one problem with your video "I wish one was out daily" Great work and thank you.
It was a great lesson, and I can appreciate the merit of this approach, however, it felt like a fork in the road, wherein a person must have a coding background to utilise these best practices to their full potential. For people without a coding background, no-code tools like Webflow, Elementor, and the like, enable them to achieve their goal of building websites but through a longer path. You might rightfully call that longer path a path through Chumpvillle, but that’s a perspective of an seasoned coder. Your principles are sound and I wish there was an easier No-code way to bake those principles within the builder. Kudos again to a great lesson and a fresh approach.
You either decide to go with a professional approach, or an amateur approach. Ofcourse utilizing pro solutions requires you to learn, but it’s a very worthy “tradeoff”. You have to decide for yourself what’s important to you.. ease of use, or doing something the best it can be done.
I see you're using the Mac OS calculator (at 29:40). Just in case you don't know it already, the (free) NUMI app is amazing to replace it. Numi is calculator with variable and very simple/useful function. Again. Big thank you for your videos!
Can't wait for the Frames Figma add-on. Would be great to be able to export theme CSS variables from Tokens Studio that ACSS and Frames could then inherit.
i use supernova to run build hooks that are triggered when i publish figma updates. This enables auto workflows that serves up my tokens in to the various formats of css and typescript needed across the digital ecosystem. finally my design decisions scale without endless dev bottlenecks. Framer, Tailwind, Bootstrap, SCSS (wpcodebox), shopify, flutter, iOs etc etc If we adopt semantic 'theme'able class naming conventions using codebox can we unlock dark n light mode and a seamless workflow? (bit of a brain fart)
Just wanted to ask one thing, Why do we need variable for section (block and inline) padding when we can style it in global theme setting with condition applied effecting entire website. Just curios to know.
@Kevin Geary, I noticed this video (lesson 7) plays right after lesson 5 in your playlist. I got confused about halfway through when you started talking about clamp functions as if they were something we'd already discussed ;-) Perhaps switch this and lesson 6 so the order is correct. Oh, and also, this course is absolutely freaking awesome. I've been hooked from the first video and I can't stop watching, it's like Breaking Bad! Keep up the damn good work.
In the Hero Section offset, instead of guessing 10rem or 11rem to try to get it in the middle, can you just set the offset to 50% of the height of the CTA container? That way if the CTA container size changes, the offset calculation changes with it as well?
I have a few clients who have used Divi to build their websites, before my time, and they're not going to take kindly to me coming in and suggesting that they rebuild their site from scratch with a professional page builder. We'll get there, one day but not just yet. So all the time, while I'm watching you talk, I'm thinking, how can I take these principles and force Divi to be scalable and maintainable? I think it's going to be a fun challenge to solve and I'm looking forward to it. I will not be defeated by chump-level page builders :D
THIS is what i have always wanted for wordpress! (reminds me of hand coding webpages with CSS with bootstrap back in 2013) … I am a o glad to see that themes are finally allowing the use of these. Have they fixed the generated mess that is wordpress nav, never mind the accessibility features of it?
Great video again, thanks a lot. I hope this isn't too stupid a question, but why do I need wp codebox? Every pagebuilder and every theme have the possibility to enter custom css. And what you are doing is css, isn't it? Wouldn't that work in this case and why or is it simply more practical to do it via a plugin?
@@Gearyco so I was following your tutorial, I just wanted to see how the headings would resize. so when I manually reduce the width of my browser. it does it but its not smooth at all. For instance, if I change my text to VW, it transitions very smoothly. I Might be a bricks thing as I am new to bricks, idk
In your example of section-block-padding; clamp(5rem, calc(5rem - ((1vw - 0.32rem) *4.7801)), 10rem) //section north south padding//. Should it be --section-block-padding: clamp(5rem, calc(5rem - ((1vh - 0.32rem) *4.7801)), 10rem) //section north south padding//? The need for clarification is whether it is vw for view width or VH view height or does it matter at all?
Hi Kevein, with oxygen builder, which dont have container and block component accessable, what is the works arround to get the same as bricks which have container and block?
Hi Kevin. Huge fan of your videos, I feel like I didn't start on the right path until I discovered your Page Building 101 courses. Quick question: What are we trying to achieve with the CTA overlapping? I am not understanding how it visually creates a more interesting effect. Yes, I see that the CTA in Section 2 is going into Section 1, and Section 1's padding is adjusting to it so that the top and bottom are dynamic and equal. But, why are we trying to make the CTA in Section 2 go into Section 1 at all? Is it just to stretch the background of Section 1 so that it covers half the CTA of Section 2? Thank you so much 🙂
@Gearyco how would you recommend adding more specificity to a variable when the native Bricks class is overriding it? e.g adding margin-left to an image using --offset1:6.25% doesnt override figure.brxe-image {margin:0}
Variables don’t really have specificity. I don’t think that’s your problem. I’d need a link to see what’s going on. You can post issues in the inner circle and everyone will help you fix.
These variable names you selected seem confusing. --section-block-padding --section-inline-padding a.i describes these as follows: "In CSS, block padding refers to the space between the content of a block-level element (such as a or element) and its border. It can be set using the CSS properties padding-top, padding-right, padding-bottom, and padding-left, or the shorthand property padding. Block padding is applied to all four sides of a block-level element by default, but each side can be specified separately using the individual properties." Since it refers to all four sides, 3 months later it may be confusing. Maybe. "Inline padding, on the other hand, refers to the space between the content of an inline-level element (such as a element) and its border. It can be set using the CSS properties padding-top, padding-right, padding-bottom, and padding-left, or the shorthand property padding. However, unlike block padding, inline padding only affects the top and bottom of an inline-level element, and left and right padding have no effect." Maybe clearer: --section-top-bottom-padding -section-left-right-padding
Adding variables directly to the themes default CSS is fine I assume? Or is this practice frowned upon? Or should this be done through the page builder? E.G> In bricksbuilder: Settings > Page settings > Custom Code > Custom CSS
Kevin - does the var(--h1) method for resizing headings work in ACSS? (which would follow the fluid size of the h1 HTML element). I don't see any variable for that on the ACSS cheat sheet. I was just looking for it a couple of days ago. Edit: Just tried and it does work! but perhaps those heading size variables should be included on the Cheat Sheet?
So i'm going through your playlist and thought things were in order, but as im watching you talk about clamp function, I have no clue what you are talking about. it appears course 6 is out of order. Not sure if that's something you can adjust on your end to avoid more confusion.
Great content Kevin! Any idea when you are planning to make a video about the local tokens? Would like to see the workflow as I think it's important as the global tokens. In some projects, one may be used over the other. Thanks
If I do a global file in WPCodeBox and make variables, it affects everything in wordpress and page builder. If I do img for example, every image is affected, not just the ones on the front-end. How can I solve this?
When trying to reproduce , I failed ! It seems like CCS Variables are called SCSS according to this frame @15:35 ? So it won't work with WPCode lite that cannot do SCSS snippet. Am I right ?
@@Gearyco Thanks for your reply. So good news and bad news ! Good news: it's CSS so WPCode lite can do it. Bad news: I'm more dummy than dommy ! 😅 As far I can tell about my setting is that the snippet is active, and the code is injected thru the header according to WPCode lite. But...wait... as I'm writing this... Do I have a header ?
@@Gearyco Hi Kevin, Thanks a lot Kevin for replying to my question on WDD LIVE 018 I found the issue ! You won't believe it ! I made a Wordpress multisite where I experience with builders and plugins. The main site is a Bricks one but its purpose is not for demos but only to welcome me with a cool homepage allowing me to log into the multisite admin. Well, I installed WP Code lite on the Bricks that is for demos but built the testing page on the main site... Who said "dummy" ? 😅 So Yep, it works as expected, just like you showed. Thanks a lot.
Another fantastic demonstration, Kevin! However, I have the impression that not all options in Bricks Builder allow the use of variables. For example: in Slider (Nestable), in "Speed in ms" and "Interval in ms" variables obviously cannot be used. Interestingly, these two options are also not stored in CSS classes. Is there any way to work around this restriction?
Another great video. Thanks Kevin. I have one question. I know the root selector is a standard CSS thing and you seem to use Bricks on all your videos nowadays so I see Bricks respects the :root selector. Does this work independent of whether it's Bricks or Oxygen because I'm using Oxygen. Thanks :-)
"root" in Bricks isn't the same as ":root" in CSS. "root" in Bricks is a placeholder reference for whatever the current selector is. If I'm on the ID, it's simply like writing the ID in CSS. If I have a class selected, it's the same as writing the class name. That's all it does. It doesn't actually add code to the :root.
You have always chose the best tools out there. I need a membership plug-in with advance features such as allowing custom fields and full members dashboard/ profile editing… Which plug-in would you suggest?
Thank you @@Gearyco They are yet to add such features and that way why I am looking for one that will allow me build the profile/account templates myself just like in Bricks/Oxygen pagebuilder using every option I can including ACF.
Thanks a lot Kevin. 1. If I got it well, you advocated in a previous video of the series that "em" is more appropriate for button borders. So I guess your example does not reflect exactly your reality, does it? 2. Also, can you tell us which settings we should choose for the global CSS file in WPCodebox? You appear to have chosen SCSS rather than CSS or CS External. 3. By the way, what's the difference between the last two? Thanks again for your dedication in making us becoming better at what we do.
The button examples reflected the reason why em is a better choice for button padding. SCSS and CSS are different but you can write CSS in a SCSS stylesheet without issue. But the SCSS gives you additional functionality.
@@laufal border radius and padding are different scenarios. If you want your border radius to be the same on all elements use rem. If you want border radius to be affected by the font size of the container then use em.
Hi Kevin, I really appreciate your work. I realized I have been a chump and I am currently working on becoming a more profesional developer. I have been usin Elementor Pro from it's starting days. I Just switched to bricks becouse of your insight and a few other videos I've seen I really love the Idea of ACSS and frames. I see the LTD for frames. My question is, are you ever going to have another offer for a LTD for ACSS? Is that something availible in your inner circle? Thanks again!
Wow, I'm genuinely surprised by your comment! This creator is nothing short of legendary in what they do. There were moments when I actually wished the videos were longer because of the depth and insight provided. Have you fully engaged with the content? It's disheartening to hear it described as overly lengthy. After spending months searching for a viable Elementor alternative, my journey led me unmistakably to Bricks. This wasn't a quick decision; it took countless hours over several months. The community and individuals like Kevin only solidify that choice further. Moreover, considering he has several related products, his restraint in not excessively promoting them within these videos is nothing less than admirable. It speaks volumes about his integrity and genuine desire to add value. In my eyes, this approach not only demonstrates his expertise but underscores his character as both a champion in his field and a genuinely good person.
Really awesome Job with this series. Also, Awesome Job on that Clamp Calculator. Super coo! I would be interested in seeing how you put that together in WSForm. As the opportunities present themselves, I am sharing a link to your landing page so people subscribe to this series. Great Job.
I can see yourself evolving along with us, I remember the days when in Oxygen Builder you were throwing classes left and right from OxyNinja or the early days of ACSS.
I think that with time, creating ACSS you realized how important are the things you are giving us now such as variables and functions.
I'm glad that you don't keep this knowledge only for yourself but immediately share it, making our lives easier and we won't have to live in ignorance and make the same mistakes.
Correct. I was building based on the limitation of the tools I was using. By creating ACSS, and with builders supporting things like variables, those limitations are lifted and now we can exercise our full anti-chump power in the sites we build :)
He won't admit he's been evolving. The examples on his agency website show all the bad practices he's been preaching others shouldn't do. But he knows them so well because he's done them first hand. Many of his older videos show what he knew then versus what he knows now.
But the best way to learn something is to teach it so it makes him a better developer and allows him to teach it to others. I wish he would quit acting like this is all something he has always done instead of what he has evolved into doing over the past few years.
I remember that as well. What confuses me now is, do we still should use the ACSS classes, or use variables only now?
@@ZailCZ BEM Classes + Variables for most things. Utility classes to fill any gaps. I'll explain more in the next PB101 lesson.
@@Gearyco How many videos will be in page builder 101? These videos are really awesome.
I want to move from Chumpville to Geary City.
From Chile: Thank you for giving us your knowledge for free! !!!! (gracias, por entregarnos tus conocimientos gratis)
I think that TH-cam, just because of this video, should add a WOW button in front of the Like button, in big bold letters! WOW, WOW, WOW!
that calc function is really neat. I had been using a framework but when I needed to override a font size I had been setting it using stuff like 5svh, switching to using calc with the established variable for each heading then adding the multiplier. Very cool!
Thank you for this knowledge gold mine, lot of added value. I think everyone should watch this playlist before installing a page builder !
I cannot express my gratitude enough for what you have taught me here. I didn't learn these things in paid course that I have taken for web development. Thank you. I just started an agency and I've been struggling to meet my expenses but despite that I just signed up for your inner circle because I am confident that what you'll teach me is going to be more than just valuable enough for me to be able to cover up for it.
Thank you again Kevin
I'm also struggling to meet my expenses, hang in there. I'm sure it will pass and become more profitable for us further down the line.
I was so excited to wake up and see the email that this course had been released. What has my life become haha. I'm another newbie whose brain is now in overload but just so grateful for your incredibly valuable lessons and soaking up as much as I can
Kev, Thanks. You are absolutely bring the web dev to the next level!
These lessons are pure gold. I've been using tokens a lot since watching your videos, the last part lost me a bit, I mean I get the principle of it, but I will need more practice using variables in calc functions. I'm busy with a new site now where I'm using calc functions, but I can see I need to "clean up" my implementation for easier management. Awesome stuff again, Kevin, the community salutes you :)
Sending you all love from South Africa ❤
You're a very talented teacher, Kevin! And you are very much appreciated! 💪
"You're going to fall in love with CSS variables" Oh my God indeed ! It's like I'm learning everything I thought I knew from start again. Thanks so much for sharing your knowledge.
Great to hear!
thank you again, newbie, my head is spinning but I am loving it
Holy smokes. Now I see the value of ACSS
Great course Kevin, as a total novice my head is in a daze but will go back over the course and hopefully it will just click. Thank you so much for giving up your time to teach us all the correct way of doing things.
Revisited this right now, this was fabulous. Learnt so much. Looking forward to power through the next few this week.
Thanks a million for this series Kevin. It is just amazing to have this value available from someone like you online.
You explained that so well, Kevin. As a beginner, I am still getting my head around basic css but I understood everything you said in this video. I'm not saying I am ready to start applying these principles but the fact that I understand them, and can clearly see their importance, is huge.
I am currently a GP/GB user and while I still believe that is a good, well thought out, program I am so close to switching to Bricks. As soon as I do you will also see me in your Inner Circle (if you'll have me).
Than you for all you do.
What’s stopping you from switching?
I didn't phrase my comment correctly. I will be switching, I just want to get a better understanding of Bricks and the principles you are espousing in this course before I do so.@@Gearyco
Intrinsic design, often regarded as the successor to responsive design, is fundamentally built upon variable design principles that prioritize flexibility and adaptability. This approach empowers design elements to "know" how to behave or adjust themselves according to different screen widths and viewing contexts, ensuring a seamless user experience across various devices and platforms.
While classical responsive design relies heavily on media queries to establish breakpoints and make "jumps" between different layouts, intrinsic design takes a more fluid and dynamic approach, allowing design elements to adapt to their surroundings more organically. This not only improves the visual appeal of a website or application, but also enhances its overall functionality and usability, catering to the ever-evolving landscape of digital devices and user preferences.
By embracing intrinsic design, developers can create more versatile, resilient, and scalable solutions that better serve the needs of a diverse audience, while also ensuring that their creations remain future-proof.
I was utilizing a JavaScript function, coupled with MutationObserver, to dynamically set properties such as scroll position and element dimensions as CSS variables on the :root element, as that has the potential to significantly enhance the adaptability and responsiveness of a design. This approach allows for real-time updates to design elements based on user interactions and screen changes, providing a more engaging and fluid user experience. It also allows for container width-based solutions… but if you do things like that you need to make sure that it degrades gracefully.
DRY principle is perfection for reusability, maintainability ^__^. Thank you man!
I’ve followed the training from Lesson 001 to L07 and it has been awesome. Thank you so much.
Dang Bro, I've been using Divi and I can tell you for those who never used a shitty builder that this stuff he's saying is pure magic. He I am at 3am watching thinking why it took me so long to get to the right place where you build website that you don't feel like you've hacked them together (because that's the only way to do it in divi). And start building something that's stable, repeatable and functional beyond how most sites are build. Thanks a lot
🙌
Thank you so much for sharing this for free Kevin. God bless you!
LARGE step here in becoming less of a chump!
just mind blown so far but excited at the same time and learning alot .
Thank you, thank you, another excellent video!
Totally awesome! Thank you for sharing this. The way you explain everything is perfect, and really clicks for me. Very much appreciate you.
The Geary Prison is becoming more crowded every day. Great video as always!
Thank you Kevin for once again dropping the knowledge and providing the ladder to climb out from "Chumpville"...ahaha.🤓 Much appreciated!
Just watched one of your other video's yesterday on codebox used your link and got wpcode box, more wpcode box video's please, this is awesome I only have one problem with your video "I wish one was out daily" Great work and thank you.
thanks for your inspiring energy!
Thank you!
I am in awe! Actually understanding and learning. GREAT LECTURES!
Exquisite
I am late for this lecture, but WOW! Css Variables are awesome 😊. Thank you Kevin for teaching us 😄.
Definitely a great topic.
Another great video! Thanks! I must watch this twice.
WOW! So thankful for finding you! Such valuable lessons!
Thank you Kevin, I really enjoy PB101 videos !
Thank You!!!
Very tangible approach to CSS Variables, love the scenarios… cue Bev :)
It was a great lesson, and I can appreciate the merit of this approach, however, it felt like a fork in the road, wherein a person must have a coding background to utilise these best practices to their full potential.
For people without a coding background, no-code tools like Webflow, Elementor, and the like, enable them to achieve their goal of building websites but through a longer path.
You might rightfully call that longer path a path through Chumpvillle, but that’s a perspective of an seasoned coder.
Your principles are sound and I wish there was an easier No-code way to bake those principles within the builder.
Kudos again to a great lesson and a fresh approach.
You have to know how to read and write CSS to be a professional web developer following best practices. PHP and JS aren’t required however.
You either decide to go with a professional approach, or an amateur approach. Ofcourse utilizing pro solutions requires you to learn, but it’s a very worthy “tradeoff”. You have to decide for yourself what’s important to you.. ease of use, or doing something the best it can be done.
I see you're using the Mac OS calculator (at 29:40). Just in case you don't know it already, the (free) NUMI app is amazing to replace it. Numi is calculator with variable and very simple/useful function.
Again. Big thank you for your videos!
Can't wait for the Frames Figma add-on. Would be great to be able to export theme CSS variables from Tokens Studio that ACSS and Frames could then inherit.
i use supernova to run build hooks that are triggered when i publish figma updates. This enables auto workflows that serves up my tokens in to the various formats of css and typescript needed across the digital ecosystem. finally my design decisions scale without endless dev bottlenecks. Framer, Tailwind, Bootstrap, SCSS (wpcodebox), shopify, flutter, iOs etc etc If we adopt semantic 'theme'able class naming conventions using codebox can we unlock dark n light mode and a seamless workflow? (bit of a brain fart)
Wow Kevin! You are a great mentor! Thank you!
This was a great one! Thanks, Kevin!
finally some useful content. Kudos kevin!! Keep it up, maybe easier (read speedier) to buy ACSS...
So much value, like 5 tthumbs up ! 🤩
Just wanted to ask one thing, Why do we need variable for section (block and inline) padding when we can style it in global theme setting with condition applied effecting entire website. Just curios to know.
Most sites have more than one section padding value
@Kevin Geary, I noticed this video (lesson 7) plays right after lesson 5 in your playlist. I got confused about halfway through when you started talking about clamp functions as if they were something we'd already discussed ;-) Perhaps switch this and lesson 6 so the order is correct. Oh, and also, this course is absolutely freaking awesome. I've been hooked from the first video and I can't stop watching, it's like Breaking Bad! Keep up the damn good work.
Thx I’ll check it out
In the Hero Section offset, instead of guessing 10rem or 11rem to try to get it in the middle, can you just set the offset to 50% of the height of the CTA container? That way if the CTA container size changes, the offset calculation changes with it as well?
I don’t remember, I would have to watch it again. But probably not.
With Bricks Global Class/Variables Manager, do we still need WPCodeBox for anything CSS-wise?
You still need a place to write custom CSS. If using ACSS then no
I have a few clients who have used Divi to build their websites, before my time, and they're not going to take kindly to me coming in and suggesting that they rebuild their site from scratch with a professional page builder. We'll get there, one day but not just yet.
So all the time, while I'm watching you talk, I'm thinking, how can I take these principles and force Divi to be scalable and maintainable? I think it's going to be a fun challenge to solve and I'm looking forward to it. I will not be defeated by chump-level page builders :D
THIS is what i have always wanted for wordpress! (reminds me of hand coding webpages with CSS with bootstrap back in 2013) … I am a o glad to see that themes are finally allowing the use of these.
Have they fixed the generated mess that is wordpress nav, never mind the accessibility features of it?
Yes
FYI: Webflow does not support variables in the designer, only custom code. No combinators either.
I double checked and it appears you're correct. That's a huge knock on Webflow.
Wtf that’s weird of a page builder aimed for pros
Great video again, thanks a lot. I hope this isn't too stupid a question, but why do I need wp codebox?
Every pagebuilder and every theme have the possibility to enter custom css. And what you are doing is css, isn't it?
Wouldn't that work in this case and why or is it simply more practical to do it via a plugin?
You don’t need it. I write SCSS a lot and codebox supports that where no other areas do.
how come on my wp local when I shrink the browser manually the fluidness is janky/laggy? Not as smooth as it should be
Fluidness of what exactly?
@@Gearyco so I was following your tutorial, I just wanted to see how the headings would resize. so when I manually reduce the width of my browser. it does it but its not smooth at all. For instance, if I change my text to VW, it transitions very smoothly. I Might be a bricks thing as I am new to bricks, idk
You’re the best.
In your example of section-block-padding; clamp(5rem, calc(5rem - ((1vw - 0.32rem) *4.7801)), 10rem) //section north south padding//. Should it be --section-block-padding: clamp(5rem, calc(5rem - ((1vh - 0.32rem) *4.7801)), 10rem) //section north south padding//? The need for clarification is whether it is vw for view width or VH view height or does it matter at all?
You don’t want to be in the business of wrangling clamp functions all over site. Buy ACSS.
@@Gearyco Perhaps there is a misunderstanding. I was referring to the VW was the correct use or should it be VH
@@JohnJohnson-su5hi vw
Hi Kevein, with oxygen builder, which dont have container and block component accessable, what is the works arround to get the same as bricks which have container and block?
A div and a container class. Depends on what you’re trying to accomplish though.
@@Gearyco if we add dive and container class is that mean we add new container inside the oxygen inner_container_wrap, sound like double
Still there and enlighted:)
Shawshank Redemption. The other page builders are locked up, some are on death row.
This is a good one!
Hi Kevin. Huge fan of your videos, I feel like I didn't start on the right path until I discovered your Page Building 101 courses.
Quick question: What are we trying to achieve with the CTA overlapping? I am not understanding how it visually creates a more interesting effect. Yes, I see that the CTA in Section 2 is going into Section 1, and Section 1's padding is adjusting to it so that the top and bottom are dynamic and equal. But, why are we trying to make the CTA in Section 2 go into Section 1 at all? Is it just to stretch the background of Section 1 so that it covers half the CTA of Section 2?
Thank you so much 🙂
Most people feel that overlapping elements add visual interest.
@@Gearyco Thanks for the quick response Kevin. You're an excellent teacher!
Why do you use the plugin for the CSS programming and not use the built-in CSS programming capablilities in Bricks?
No SCSS in Bricks.
@@Gearyco Can one get away with using just CSS and avoiding the plugin?
yeah for sure@@cryptoman5412
@Gearyco how would you recommend adding more specificity to a variable when the native Bricks class is overriding it? e.g adding margin-left to an image using --offset1:6.25% doesnt override figure.brxe-image {margin:0}
Variables don’t really have specificity. I don’t think that’s your problem. I’d need a link to see what’s going on. You can post issues in the inner circle and everyone will help you fix.
@@Gearyco thanks for the reply. I think I realized my mistake after I posted here.
These variable names you selected seem confusing.
--section-block-padding
--section-inline-padding
a.i describes these as follows: "In CSS, block padding refers to the space between the content of a block-level element (such as a or element) and its border. It can be set using the CSS properties padding-top, padding-right, padding-bottom, and padding-left, or the shorthand property padding. Block padding is applied to all four sides of a block-level element by default, but each side can be specified separately using the individual properties." Since it refers to all four sides, 3 months later it may be confusing. Maybe.
"Inline padding, on the other hand, refers to the space between the content of an inline-level element (such as a element) and its border. It can be set using the CSS properties padding-top, padding-right, padding-bottom, and padding-left, or the shorthand property padding. However, unlike block padding, inline padding only affects the top and bottom of an inline-level element, and left and right padding have no effect."
Maybe clearer:
--section-top-bottom-padding
-section-left-right-padding
You’re looking at old definitions. Look up “CSS logical properties” and you’ll see what block and inline refer to.
@@Gearyco Thanks, just found it in Mozilla mdn docs.
Adding variables directly to the themes default CSS is fine I assume? Or is this practice frowned upon? Or should this be done through the page builder? E.G> In bricksbuilder: Settings > Page settings > Custom Code > Custom CSS
Yeah that can work. But builder stylesheets are usually super limited in terms of code functionality so I tend to avoid them.
Kevin - does the var(--h1) method for resizing headings work in ACSS? (which would follow the fluid size of the h1 HTML element). I don't see any variable for that on the ACSS cheat sheet. I was just looking for it a couple of days ago.
Edit: Just tried and it does work! but perhaps those heading size variables should be included on the Cheat Sheet?
They're in the cheat sheet, they just don't come up in the search for some reason.
So i'm going through your playlist and thought things were in order, but as im watching you talk about clamp function, I have no clue what you are talking about. it appears course 6 is out of order. Not sure if that's something you can adjust on your end to avoid more confusion.
Hmmm
Great content Kevin! Any idea when you are planning to make a video about the local tokens? Would like to see the workflow as I think it's important as the global tokens. In some projects, one may be used over the other. Thanks
It may not be part of the course probably just it’s own video.
Why do you use WPcodebox instead of Bricks' custom CSS or the child theme CSS?
Codebox allows me to write SCSS which is much more powerful than regular CSS .
@@Gearyco thanks!
If I do a global file in WPCodeBox and make variables, it affects everything in wordpress and page builder. If I do img for example, every image is affected, not just the ones on the front-end. How can I solve this?
What builder are you using?
@@Gearyco - Bricks
@@adventure-007 I’d need to see any example. Maybe some screen shots
When trying to reproduce , I failed !
It seems like CCS Variables are called SCSS according to this frame @15:35 ?
So it won't work with WPCode lite that cannot do SCSS snippet.
Am I right ?
I'm also interested in this - trying unsuccessfully to practice with WPCode lite and a bit stuck
No the variables I showed are pure CSS variables. They’ll work in any stylesheet.
@@Gearyco Thanks for your reply.
So good news and bad news !
Good news: it's CSS so WPCode lite can do it.
Bad news: I'm more dummy than dommy ! 😅
As far I can tell about my setting is that the snippet is active, and the code is injected thru the header according to WPCode lite.
But...wait... as I'm writing this... Do I have a header ?
@@Gearyco
Hi Kevin,
Thanks a lot Kevin for replying to my question on WDD LIVE 018
I found the issue ! You won't believe it !
I made a Wordpress multisite where I experience with builders and plugins. The main site is a Bricks one but its purpose is not for demos but only to welcome me with a cool homepage allowing me to log into the multisite admin.
Well, I installed WP Code lite on the Bricks that is for demos but built the testing page on the main site...
Who said "dummy" ? 😅
So Yep, it works as expected, just like you showed.
Thanks a lot.
Another fantastic demonstration, Kevin! However, I have the impression that not all options in Bricks Builder allow the use of variables. For example: in Slider (Nestable), in "Speed in ms" and "Interval in ms" variables obviously cannot be used. Interestingly, these two options are also not stored in CSS classes. Is there any way to work around this restriction?
Don’t use those elements :)
There are alternatives like Frames or BricksExtras.
Another great video. Thanks Kevin.
I have one question. I know the root selector is a standard CSS thing and you seem to use Bricks on all your videos nowadays so I see Bricks respects the :root selector. Does this work independent of whether it's Bricks or Oxygen because I'm using Oxygen. Thanks :-)
"root" in Bricks isn't the same as ":root" in CSS. "root" in Bricks is a placeholder reference for whatever the current selector is. If I'm on the ID, it's simply like writing the ID in CSS. If I have a class selected, it's the same as writing the class name. That's all it does. It doesn't actually add code to the :root.
Have you tried Advanced Themer?
It would be amazing if you can do a tutorial on that one. It's a true game-changer 😀🔥
I’ve seen it. Since I use ACSS and don’t need many bricks add ons I don’t see a need for it.
You have always chose the best tools out there. I need a membership plug-in with advance features such as allowing custom fields and full members dashboard/ profile editing…
Which plug-in would you suggest?
Tough call. Suremembers, but not sure if they’ve added all the features you need yet. It’s still young.
Thank you @@Gearyco They are yet to add such features and that way why I am looking for one that will allow me build the profile/account templates myself just like in Bricks/Oxygen pagebuilder using every option I can including ACF.
Good lesson.
Why use Codebox?
Can those snippets not be directly added to Bricks?
Codebox has far more features and the ability to use SCSS. It’s a better environment for custom styling.
"Jailhouse Chumps" Directed by: Kevin Geary 😉
Thanks a lot Kevin.
1. If I got it well, you advocated in a previous video of the series that "em" is more appropriate for button borders.
So I guess your example does not reflect exactly your reality, does it?
2. Also, can you tell us which settings we should choose for the global CSS file in WPCodebox?
You appear to have chosen SCSS rather than CSS or CS External.
3. By the way, what's the difference between the last two?
Thanks again for your dedication in making us becoming better at what we do.
The button examples reflected the reason why em is a better choice for button padding.
SCSS and CSS are different but you can write CSS in a SCSS stylesheet without issue. But the SCSS gives you additional functionality.
@@Gearyco I meant the example of this video where you tokenize all borders with rem (buttons included).
@@laufal border radius and padding are different scenarios. If you want your border radius to be the same on all elements use rem. If you want border radius to be affected by the font size of the container then use em.
@@Gearyco M'y Bad, you're right, I mixed up padding, border and radius. 👍
Kevin for president
Hi Kevin, I really appreciate your work. I realized I have been a chump and I am currently working on becoming a more profesional developer.
I have been usin Elementor Pro from it's starting days. I Just switched to bricks becouse of your insight and a few other videos I've seen
I really love the Idea of ACSS and frames. I see the LTD for frames. My question is, are you ever going to have another offer for a LTD for ACSS? Is that something availible in your inner circle?
Thanks again!
Unfortunately not. They require too much ongoing work. The LTD for frames will likely be gone sometime this year too.
@Kevin Geary I appreciate the response. I'll jump on that then :) thanks for your assistance! And amazing content 👌
🤯
Not sure why @Beneath the Bark shows as my name ( that will be the name of the website I intend to build for my son.
This perfectly can be a 10 min video. You talk too much.
Watch a different channel.
bro is explaining things for the chumps ( I'm one of em )
Wow, I'm genuinely surprised by your comment! This creator is nothing short of legendary in what they do. There were moments when I actually wished the videos were longer because of the depth and insight provided. Have you fully engaged with the content? It's disheartening to hear it described as overly lengthy.
After spending months searching for a viable Elementor alternative, my journey led me unmistakably to Bricks. This wasn't a quick decision; it took countless hours over several months. The community and individuals like Kevin only solidify that choice further. Moreover, considering he has several related products, his restraint in not excessively promoting them within these videos is nothing less than admirable. It speaks volumes about his integrity and genuine desire to add value.
In my eyes, this approach not only demonstrates his expertise but underscores his character as both a champion in his field and a genuinely good person.
Really awesome Job with this series. Also, Awesome Job on that Clamp Calculator. Super coo! I would be interested in seeing how you put that together in WSForm. As the opportunities present themselves, I am sharing a link to your landing page so people subscribe to this series. Great Job.
Thank you!