Grab some coffee because this is the longest lesson so far (1hr 20min). Half of it shows landing page creation from scratch using all the techniques you've learned up to this point, and the second half shows color management and styling with color. Note: Some landing page details were skipped to better manage time. Hope you like it!
This is getting me so excited!! Automatic CSS is definitely it. I see the importance of understanding what is going on in the background. Amazing, amazing lessons!
One of the things I admire in the lessons u taught here in 101 is that It explicitly tells the vast work of ACSS behind the scenes every time you explain something. The HSL case here is a slight peak behind the framework power. Looking forward to the next. Hue to you 🎨
I really enjoy your teaching style. And “repeating” the previous material by building the webpage from scratch was a very effective reinforcement approach. Lots of useful information about working with colors. Thank you.
Every time you drop a new video, I get fired up! I'm like, "Dammmmmmmn, I can't wait to watch that!" Your videos have so much value. Seriously, I don't wanna miss a single one. The way you teach and explain things in such a simple way is just awesome. So, kudos to you, Kevin. Keep doing what you're doing, 'cause you're crushing it!🤘
I just switched from Divi to bricks after many years. Using CSS before to fix this and that, but this is a whole new other level. Your videos are over the top!
I love this lesson and I am not done watching it. This may be called PB101 (and 101 is generally for beginners), but there is a lot of value for us intermediate and also advanced developers too. Keep em coming Kevin. Awesome stuff.
47:19 No need to go to Google to get get the HSL values. Inside of the code editor, you can click on the square that shows the color and when the color picker pops up it will read Hex, Click on it to cycle through the different color modes, ending in HSL.
Wouldn't it be great if you had a framework to do all this. Oh, wait. Seriously, this deep dive is awesome. I think everyone should do this before working with ACSS and Frames so they understand the concepts.
Fantastic content, and thoroughly enjoyable to watch. This is the lesson where so much comes together. Definitely a firehouse to the face! The work and knowledge needed to make this series is huge, so thank you very much, it’s inspiring.
This has to be one of the most enjoyable lessons so far! Loved watching you rebuild the site, really added so much value! The pseudo element at the end omg, genius!
'Tis a pity I have to catchup - but, every aspect you cover is a gem. This was an amazing lesson - and no, you don't do sales pitches about AutomaticCSS. However, I think it's important to understand colour management even if using ACSS. Thank you, Kevin.
Kevin, you hit us with 3 fire hoses today. Man, loved this!! It just keeps making more and more sense! I have been doing the chump way but NOT anymore!
Great tutorial Kevin! I implemented the HSL color method on my current website build with Bricks and used the Bricksforge global classes editor. I also previously made the mistake of naming the classes with the color. At the time I was thinking what am I doing? 🤣 Thanks to you, I now have excellent, re-usable global classes for colors.
Thanks Kevin awesome lesson. Among A LOT of other things learned in this it really answers for me why to choose HSL over RGB (and especially not hex) for colors at: 49:25 💪
Wow! There's so much goodness in this video! It goes way beyond color management. I loved the fact that you built the page from scratch before even touching on the colors' topic. There are so many golden nuggets, tips and best practices in that part itself. Then the scalable color management is huge, which I think, most people wouldn't even know about its value. And the last part of the gradient circle background was fun. The use of PNG was a classic case for your "no no no.." audio :)
if you don't see the SVG category within the Icon Element you need to go to bricks settings > General > SVG uploads. Just in case I am not the only one who was struggling with that one :)
Kevin, great color management video. I've heard you mention HSL strings in prior videos but didn't quite understand the full value until you compared it to HEX & RGB and how to get (rather not easily get) color variations .... now I fully understand. Even if I didn't have ACSS, my future website designs will definitely be switching to HSL.
Question: at the start of the color section, you said to go to WPCodeBox in the video, I see "Hook into ACSS". I have ACSS installed, but none of the hooks are in Global. I entered the hook(s) and when I saved I received this error message "Parse error when saving the snippet: `plugins/automaticcss-plugin/assets/scss/dashboard/breakpoints.scss` file not found for @import: line: 3, column: 1", where did I go wrong?
Super cool stuff. Sometimes I don't understand when you use utility classes and when you don't. Not really sure when it's important or when it's not or if its just convenient in some cases
Hi Kevin, question about the testimonials part / the twitter grid. I get the css columns technique to work on the 4 cards, just like you. But when I add more cards the columns get distorted and a twitter card is showing partially on the left column and the bottom part in the right column. This also happens when for example I add more text to a card, the card becomes longer and then finally the bottom part shows up on top in the right column. How do I prevent this from happening?
How do you make CMD select just duplicated "action" text to be edited. When I try it (Ctrl+D) I've got both original and duplicated values selected (and thus edited). What I do wrong?
At 1:20:00. you use left: 50%; transform: translateX(-50%); It seems like it looks same having that as it does not using them. Can you please explain why you used them?
53:38 How would you usually annotate your tokens when you have two action colours? Would you say something like --action--primary-hsl and --action--secondary-hsl?
If I don't have WP Code Box, can I put the variables code in the styles.css file via Theme File Editor in the WordPress dashboard...or maybe Theme Options in Divi? I’ll have to try it.
Kevin - ACSS user here... any suggestion on how to leverage the same ACSS classes/tokens we build up / modify in Bricks with Automatic CSS, and sync them over to a Vue app we have? I know we could copy the same css sheet, but wondering if you've faced a similar desire to share across apps, and what you've done to get it.
@@Gearyco bit more color here? Are the files being produced with bricks and acss something that can be pulled in from a remote site, or is there some sort of way they are built that would prevent this from working well?
I'm having problem displaying the testimonials (like you did with the twitter cards) in 2 columns by using css columns and while looping from a custom post type. The same with targeting even/odd childs. How can I do that?
In understand everything that's being said. A fantastic tutorial like all the previous ones. But my header HTML element doesn't get rid of the section padding when changing HTML elements and I can't figure out why. My header element has a .brx-section class attached automatically and, therefore, applies the section gutter. Am I missing something? I am following the steps exactly as they are demonstrated in the video.
@@Gearyco thank you, Kevin! I binge watched your content all day, here and in the inner circle, for the last two weeks. It improved my skills a lot and I was already able to fix this.
at 39' we enter wpcodebox . I get an error when doing the same. In ACSS plugin filename begins with _ ( like _breakpoints.scss). but even when I try with underscore I get "parse error when saving snippet: file not found". There should be a "path" problem when in wpcodebox. Why do you make this import? No risk of duplicate declaration for the variables or classes? You announced a tuto about wpcodebox, maybe time to make it ;-)
so: seems you are using wpcodebox 2. I upgraded wpcodebox and it works perfectly this confirms that a wpcodebox (in conjunction with ACSS) would be welcome :-)
Increasing or decreasing lightness with RGB is actually quite easy I think. You just have to increase / decrease all values by the same amount so for example red+20 green+20 and blue +20. But I know that HSL is still a lot better for various reason. Just wanted to point that out.
@@Gearyco I legit said "I know that HSL is still a lot better for various reason. Just wanted to point that out." because you made it seem like it's impossible with RGB. But even then saturation is also not that hard, you increase the highest number and decrease the lowest number for more saturation and the opposite for less saturation because if they all have the same number, it's always a shade of grey. Again I know that HSL is easier to use.
Thank you for the tutorial Kevin. This is so valuable as always. I have an issue though when i use base color variable in the Bricks Builder. When I use "--base-s:0%;" color won't change for the background for me. So, I change it to 1%, then it was picked by the Bricks Builder. This is the tokens I use for base color " --base-h: 0; --base-s: 1%;//when it is 0%, variable does not work in Bricks. I donot know why? --base-l: 6%; --base-hsl: var(--base-h) var(--base-s) var(--base-l); --base: hsl(var(--base-hsl)); " I donot know why the variable did not work in bricks when i use the saturation to 0%. Is there any reason?
Thanks for this tutorial. Interested to know how to implement the auto number counter. Can you point me in the direction where to learn more about this?
Question sensei: When removing the user-agent / Bricks default styling on the blockquote, would you possibly recommend instead loading in something like normalize as an SCSS partial at the top of main.scss? Would this approach cause any conflicts with Automatic.css? Thanks brother. I'm like you ... I hate user agent / builder defaults. Just give me a blank slate ... especially while utilizing Automatic.css!
@@Gearyco what's not hard to fix? The conflict loading normalize would cause w/ ACSS? Or overriding builder/user-agent defaults? If you meant the latter, agreed; but tedious nonetheless. I've enjoyed using "normalizers" on static builds in the past, though, as a workflow optimizer. Just wondering if using that workflow here would conflict with ACSS. Thanks again.
@Gearyco aren't you undermining maintainability when you use var names like --base-light-trans-20 ? What happens when you or the client decide the 20% should be 30%? You can change the value easily but you've got class names all over your site hardcoded with '20' in the name. I'd like to see a naming convention that avoids this.
Hi Kevin. Are you going to be going over SEO in this series? I know you use rankmath, but bricks also has seo settings. SEO has never been my strong suit. If not what videos do you have talking about that specific topic?
I know I don't need to say this simply because all content posted on this channel is so good. But I'll say it anyway, highly recommend the SEO course in the Inner Circle
awesome vid! But why do I need base and neutral colors, if I use the primary and action color as background color? What do I actually need neutrals for?
@@Gearyco Sorry my question was not well worded. Instead of a second container, what about another block A IN the first container? And then that block A would contain all your process-card blocks.
@@izkuhl that forces all your content to be grouped. I like to only group similar content. Section intro is separate from other content in the section.
At 14:53 you use max-content. Can you explain the difference between auto and max-content? I think you could also have used width: auto;, couldn't you?
Auto is the default width of a link. The button was 100% wide because its parent was display flex. Setting the link width to auto wouldn't do anything because it was already auto. Max-content makes the button conform to the max width of its inner content.
useful course... im learning a lot from these videos, but also getting a bit anxious waiting for the new ones so I can be efficient in my design. I probably need a cheat sheet reference so i can remember all the stuff you are talking about. I understand the purpose of separating out the HSL values, but I am wondering at 52:27 why you have --action-hsl:var(--action-h... ) and then reference --action referencing that --action-hsl variable, instead of just setting action to the separated variables to begin with. Because from what I saw, any modifications, simply reference the individual HSL values and never the --action-hsl, so it seems redundant.
It’s redundant in the limited setup I showed, but once you start creating a transparency library or transparencies on the fly, the shorthand HSL variable is extremely handy.
@@Gearyco gotcha. I know you are using a page builder on these videos, but maybe you can provide a suggestion for my non wordpress project. I was using bootstrap which was doing the job ok. I also downloaded a theme that provided a nice admin panel based on bootstrap, but it utilizes a bunch of custom variations that started with SCSS and compiled. along with bootstrap and other plugins (packages) I'm not even sure i need at this point. So needless to say my CSS file is now huge with a lot of competing classes. I'm not sure which SCSS files to remove to get back to a reasonable file size. At this point I'm trying to rebuild the CSS myself based on what you and Kevin Powell are teaching. I guess the question is, do you have a good method of dealing with projects with messy CSS? is there a tool to compile or remove duplications/ unused elements? And would there be a benefit to maybe breaking a CSS file up into smaller files just for ease of organization?
hey kevin, great vid. what's the difference between a block and a container ? i see you adding containers inside containers and am asking myself why not add a block. is there any significance? un-chump a brother out
49.50 Such a zen use of columns, love it ! In my version its splits the card content across the columns - - doing something wrong, but can work it out?! root{ column-count: 2; } root > * { margin-bottom: var(--grid-gap); } ...stop press, this works: root{ column-count:2; } root > * { margin-bottom: var(--grid-gap); break-inside: avoid-column; }
Hey Kevin. Loving these vids! So helpful, especially when being a chump migrating from Elementor! I'm wondering though, with all of the ACSS (or custom work) going on, does this make it more of a challenge if a client wants to take over the website themselves after sale, with no ongoing maintenance plan etc. In that scenario, is it better to build as a chump? Cheers!
Obviously not. But you get my point. You're here doing a great service enabling us all to grow in web development. Which I agree is a world away from Elementor. But to that end, does that not mean we then need to educate clients in the same vein if they are only wanting to buy a site without service plan etc.@@Gearyco
This is a fun course. Do you think Bricks Builder will be around for a long while? It looks like a great builder, but I wouldn't want to learn it just to have it go away in a couple of years....
@@Gearyco thanks for the reply. I'm happy to hear that you feel they will be around. They've done a great job. Thanks for your great content as well. Very well presented, and incredibly helpful.
@@Gearyco What I mean is that there is a reference name for every color you use in the tutorial (bg-primary, text-accent etc.) but when you use white, you don't use reference so if you ever need to change white for let's say light grey, you will be doing that manually, no?
We getting used to this great content! Thanks. One Question: I can not really figure out when to use the wpcodebox for those root {} entries and when to put it straight into the class. Maybee you can clarify this to me - i must have missed it.
It depends on your workflow and whether you're wanting to use a lot of SCSS or just vanilla CSS. If it's just vanilla CSS you can put it anywhere. I'm talking with the dev of codebox about a feature where we can easily access stylesheets within Bricks, so stay tuned...
1:09:10 - You made the Card color mistake on purpose didn’t you? To later ( I haven’t seen the rest of the video yet) show us why the tokenizing and BEM develop approach is the superior approach. Am I right? #ReformedChump - I have seen the light, Lord. I have seen the light Amen brother and sisters. 😂
Grab some coffee because this is the longest lesson so far (1hr 20min). Half of it shows landing page creation from scratch using all the techniques you've learned up to this point, and the second half shows color management and styling with color. Note: Some landing page details were skipped to better manage time. Hope you like it!
Cant wait!
If you try to follow along and implement it takes much longer but the concepts keep sinking in more and more.
i pretend to unlearn the last 20 years of web design just to enjoy this even more. kevin, good job as always. so fun, so useful.
This is getting me so excited!! Automatic CSS is definitely it. I see the importance of understanding what is going on in the background. Amazing, amazing lessons!
One of the things I admire in the lessons u taught here in 101 is that It explicitly tells the vast work of ACSS behind the scenes every time you explain something.
The HSL case here is a slight peak behind the framework power.
Looking forward to the next. Hue to you 🎨
I really enjoy your teaching style. And “repeating” the previous material by building the webpage from scratch was a very effective reinforcement approach. Lots of useful information about working with colors. Thank you.
🙌
Hey Kevin thank you for everything you do for the wordpress/web development community. you are a HERO !!!
Thanks, I appreciate you :)
Every time you drop a new video, I get fired up! I'm like, "Dammmmmmmn, I can't wait to watch that!" Your videos have so much value. Seriously, I don't wanna miss a single one. The way you teach and explain things in such a simple way is just awesome. So, kudos to you, Kevin. Keep doing what you're doing, 'cause you're crushing it!🤘
Thank you!
Fantastic course Kevin. As an (almost) complete beginner I have leant so, so much. Thank you!
I just switched from Divi to bricks after many years. Using CSS before to fix this and that, but this is a whole new other level. Your videos are over the top!
💪🏻💪🏻💪🏻
I love this lesson and I am not done watching it. This may be called PB101 (and 101 is generally for beginners), but there is a lot of value for us intermediate and also advanced developers too. Keep em coming Kevin. Awesome stuff.
Thanks Kevin for looking under the hood of ACSS color management. As always a great tutorial with lots of new techniques to learn from.
OMG this is thoroughly eye-opening, and very educational video. Thanks for taking the time to make them for us 🙏
I'm hoping to become a super designer at the end of this year.
My goal for 2024 is to master everything I'm learning from you
💪🏻
47:19 No need to go to Google to get get the HSL values. Inside of the code editor, you can click on the square that shows the color and when the color picker pops up it will read Hex, Click on it to cycle through the different color modes, ending in HSL.
Yes. I think I can do that in VS Code on macOS too. 😊
@@derekshort VSCode and WPCodeBox are both powered by the Monaco code editor.
Wouldn't it be great if you had a framework to do all this. Oh, wait. Seriously, this deep dive is awesome. I think everyone should do this before working with ACSS and Frames so they understand the concepts.
If only!
Fantastic content, and thoroughly enjoyable to watch. This is the lesson where so much comes together. Definitely a firehouse to the face! The work and knowledge needed to make this series is huge, so thank you very much, it’s inspiring.
This has to be one of the most enjoyable lessons so far! Loved watching you rebuild the site, really added so much value! The pseudo element at the end omg, genius!
'Tis a pity I have to catchup - but, every aspect you cover is a gem. This was an amazing lesson - and no, you don't do sales pitches about AutomaticCSS. However, I think it's important to understand colour management even if using ACSS. Thank you, Kevin.
Kevin, you hit us with 3 fire hoses today. Man, loved this!! It just keeps making more and more sense! I have been doing the chump way but NOT anymore!
Great tutorial Kevin!
I implemented the HSL color method on my current website build with Bricks and used the Bricksforge global classes editor. I also previously made the mistake of naming the classes with the color. At the time I was thinking what am I doing? 🤣
Thanks to you, I now have excellent, re-usable global classes for colors.
Thanks Kevin awesome lesson. Among A LOT of other things learned in this it really answers for me why to choose HSL over RGB (and especially not hex) for colors at: 49:25 💪
Glad it was helpful!
Wow! There's so much goodness in this video! It goes way beyond color management. I loved the fact that you built the page from scratch before even touching on the colors' topic. There are so many golden nuggets, tips and best practices in that part itself. Then the scalable color management is huge, which I think, most people wouldn't even know about its value. And the last part of the gradient circle background was fun. The use of PNG was a classic case for your "no no no.." audio :)
Guess I drank some 4 or 5 coffee this lesson, lol.
Great insights and a lot of worthful information. Looking forward to the next step. Bye
☕️
Really great tutorial, thanks. I learned a heap and it feels like it's slowly starting to come together now.
Absolutely on another level. Fantastic episode in an amazing series. Thank you Kevin
Very welcome
Great job as always
Ok...the blur thing got me. SLICK. 💪
This feels like a 1000$ course
I appreciate it! Invoice sent.
Thank you, Kevin.
if you don't see the SVG category within the Icon Element you need to go to bricks settings > General > SVG uploads. Just in case I am not the only one who was struggling with that one :)
Looking forward to the image training.
33:12 this should go in your nugget library. A screenshot of the grid you created timestamp-linked to this video. Really nice🎉
Great lesson! Thanks! I will implement HSL colors and variables from now on. 😁🙌🏻
Kevin, great color management video. I've heard you mention HSL strings in prior videos but didn't quite understand the full value until you compared it to HEX & RGB and how to get (rather not easily get) color variations .... now I fully understand. Even if I didn't have ACSS, my future website designs will definitely be switching to HSL.
Great build, thank you Kevin !
Chump alert! Pure magic!
Question: at the start of the color section, you said to go to WPCodeBox in the video, I see "Hook into ACSS". I have ACSS installed, but none of the hooks are in Global. I entered the hook(s) and when I saved I received this error message "Parse error when saving the snippet:
`plugins/automaticcss-plugin/assets/scss/dashboard/breakpoints.scss` file not found for @import: line: 3, column: 1", where did I go wrong?
Those only work with codebox2 and they're for advanced use cases. Not required.
Absolutely fantastic.
Wow Man!!! 👏👏👏
Good lesson
Super cool stuff. Sometimes I don't understand when you use utility classes and when you don't. Not really sure when it's important or when it's not or if its just convenient in some cases
Watch this: ruclips.net/video/1Mku_FL31Bg/видео.html
Hi Kevin, question about the testimonials part / the twitter grid. I get the css columns technique to work on the 4 cards, just like you. But when I add more cards the columns get distorted and a twitter card is showing partially on the left column and the bottom part in the right column. This also happens when for example I add more text to a card, the card becomes longer and then finally the bottom part shows up on top in the right column. How do I prevent this from happening?
Can’t help much with this kind of stuff without a link. Perfect kind of question for the inner circle.
54:12 nugget bookmark: Multicursor editing in WPCodebox with cmd+D
Another master class! Thanks!
How do you make CMD select just duplicated "action" text to be edited. When I try it (Ctrl+D) I've got both original and duplicated values selected (and thus edited). What I do wrong?
Not sure what you mean exactly
1:16:44 nugget bookmark: bg radial gradient with pseudo element
At 1:20:00. you use
left: 50%;
transform: translateX(-50%);
It seems like it looks same having that as it does not using them. Can you please explain why you used them?
It’s used to center the element. Once you set a left value that’s the only way to center it
I screamed "DRY!" @ 1:06:50.... 🎉
53:38 How would you usually annotate your tokens when you have two action colours? Would you say something like --action--primary-hsl and --action--secondary-hsl?
Not usually. I’d need to see the design to answer
If I don't have WP Code Box, can I put the variables code in the styles.css file via Theme File Editor in the WordPress dashboard...or maybe Theme Options in Divi? I’ll have to try it.
They can go in any global stylesheet, but preferably one that loads first
Kevin - ACSS user here... any suggestion on how to leverage the same ACSS classes/tokens we build up / modify in Bricks with Automatic CSS, and sync them over to a Vue app we have? I know we could copy the same css sheet, but wondering if you've faced a similar desire to share across apps, and what you've done to get it.
Not at the moment. But this should be possible in the future.
@@Gearyco bit more color here? Are the files being produced with bricks and acss something that can be pulled in from a remote site, or is there some sort of way they are built that would prevent this from working well?
@@wingtracer you can use the files outside of WP if you’re familiar with SCSS. You could probably even sync multiple environments with VSCode.
I'm having problem displaying the testimonials (like you did with the twitter cards) in 2 columns by using css columns and while looping from a custom post type. The same with targeting even/odd childs. How can I do that?
What’s not working?
@@Gearyco the styling. I'm going to publish on the inner circle
In understand everything that's being said. A fantastic tutorial like all the previous ones.
But my header HTML element doesn't get rid of the section padding when changing HTML elements and I can't figure out why. My header element has a .brx-section class attached automatically and, therefore, applies the section gutter. Am I missing something? I am following the steps exactly as they are demonstrated in the video.
Would need to see a link. Post in the inner circle and we can help you.
@@Gearyco thank you, Kevin! I binge watched your content all day, here and in the inner circle, for the last two weeks. It improved my skills a lot and I was already able to fix this.
at 39' we enter wpcodebox . I get an error when doing the same. In ACSS plugin filename begins with _ ( like _breakpoints.scss). but even when I try with underscore I get "parse error when saving snippet: file not found". There should be a "path" problem when in wpcodebox.
Why do you make this import? No risk of duplicate declaration for the variables or classes?
You announced a tuto about wpcodebox, maybe time to make it ;-)
so: seems you are using wpcodebox 2. I upgraded wpcodebox and it works perfectly
this confirms that a wpcodebox (in conjunction with ACSS) would be welcome :-)
Yes new version required. Also check the advanced documentation. This is only for advanced users.
Super!!!
In the background color section what does Raw do or represent?
It allows you to write any custom value.
Increasing or decreasing lightness with RGB is actually quite easy I think. You just have to increase / decrease all values by the same amount so for example red+20 green+20 and blue +20. But I know that HSL is still a lot better for various reason. Just wanted to point that out.
Now show me increasing lightness and reducing saturation at the same time.
@@Gearyco I legit said "I know that HSL is still a lot better for various reason. Just wanted to point that out." because you made it seem like it's impossible with RGB.
But even then saturation is also not that hard, you increase the highest number and decrease the lowest number for more saturation and the opposite for less saturation because if they all have the same number, it's always a shade of grey.
Again I know that HSL is easier to use.
Thank you for the tutorial Kevin. This is so valuable as always. I have an issue though when i use base color variable in the Bricks Builder. When I use "--base-s:0%;" color won't change for the background for me. So, I change it to 1%, then it was picked by the Bricks Builder. This is the tokens I use for base color " --base-h: 0;
--base-s: 1%;//when it is 0%, variable does not work in Bricks. I donot know why?
--base-l: 6%;
--base-hsl: var(--base-h) var(--base-s) var(--base-l);
--base: hsl(var(--base-hsl)); " I donot know why the variable did not work in bricks when i use the saturation to 0%. Is there any reason?
Idk I would need a link
Thanks for this tutorial. Interested to know how to implement the auto number counter. Can you point me in the direction where to learn more about this?
Tutorial coming soon
I started implementing css variables in my current hand-coded website project. 😁
👏🏻 good stuff
Question sensei: When removing the user-agent / Bricks default styling on the blockquote, would you possibly recommend instead loading in something like normalize as an SCSS partial at the top of main.scss? Would this approach cause any conflicts with Automatic.css? Thanks brother. I'm like you ... I hate user agent / builder defaults. Just give me a blank slate ... especially while utilizing Automatic.css!
If you want to. it's not a hard thing to fix.
@@Gearyco what's not hard to fix? The conflict loading normalize would cause w/ ACSS? Or overriding builder/user-agent defaults? If you meant the latter, agreed; but tedious nonetheless. I've enjoyed using "normalizers" on static builds in the past, though, as a workflow optimizer. Just wondering if using that workflow here would conflict with ACSS. Thanks again.
I haven't tested normalize with ACSS, but you can definitely try it out.
@Gearyco aren't you undermining maintainability when you use var names like --base-light-trans-20 ? What happens when you or the client decide the 20% should be 30%? You can change the value easily but you've got class names all over your site hardcoded with '20' in the name. I'd like to see a naming convention that avoids this.
That’s what classes are for.
Hi Kevin. Are you going to be going over SEO in this series? I know you use rankmath, but bricks also has seo settings. SEO has never been my strong suit. If not what videos do you have talking about that specific topic?
Not in this course. I do have detailed SEO trainings in the Inner Circle though.
I know I don't need to say this simply because all content posted on this channel is so good. But I'll say it anyway, highly recommend the SEO course in the Inner Circle
19:55 Nugget bookmark: perfect number circles.
how could I live without flex shrink? ❤
Are you using WPCodeBox v2?
awesome vid! But why do I need base and neutral colors, if I use the primary and action color as background color? What do I actually need neutrals for?
can I use a neutral as font color?
base is a neutral brand color. Neutral is always pure grays. You always want grays available for various things.
Hey Kevin. Why did you decide to use another container @ 16:35 instead of another block?
Containers are content width. Blocks are full width.
@@Gearyco Sorry my question was not well worded. Instead of a second container, what about another block A IN the first container? And then that block A would contain all your process-card blocks.
@@izkuhl that forces all your content to be grouped. I like to only group similar content. Section intro is separate from other content in the section.
At 14:53 you use max-content. Can you explain the difference between auto and max-content? I think you could also have used width: auto;, couldn't you?
Auto is the default width of a link. The button was 100% wide because its parent was display flex. Setting the link width to auto wouldn't do anything because it was already auto. Max-content makes the button conform to the max width of its inner content.
15.34 Why are you adding a container gap as a utility class here, why not as a token?
Because I’m not using a custom class on the section. So a utility class is faster and more performant than ID style.
@@Gearyco Thanks a lot for your clear responses 🤗
useful course... im learning a lot from these videos, but also getting a bit anxious waiting for the new ones so I can be efficient in my design. I probably need a cheat sheet reference so i can remember all the stuff you are talking about.
I understand the purpose of separating out the HSL values, but I am wondering at 52:27 why you have --action-hsl:var(--action-h... ) and then reference --action referencing that --action-hsl variable, instead of just setting action to the separated variables to begin with. Because from what I saw, any modifications, simply reference the individual HSL values and never the --action-hsl, so it seems redundant.
It’s redundant in the limited setup I showed, but once you start creating a transparency library or transparencies on the fly, the shorthand HSL variable is extremely handy.
@@Gearyco gotcha. I know you are using a page builder on these videos, but maybe you can provide a suggestion for my non wordpress project. I was using bootstrap which was doing the job ok. I also downloaded a theme that provided a nice admin panel based on bootstrap, but it utilizes a bunch of custom variations that started with SCSS and compiled. along with bootstrap and other plugins (packages) I'm not even sure i need at this point.
So needless to say my CSS file is now huge with a lot of competing classes. I'm not sure which SCSS files to remove to get back to a reasonable file size. At this point I'm trying to rebuild the CSS myself based on what you and Kevin Powell are teaching.
I guess the question is, do you have a good method of dealing with projects with messy CSS? is there a tool to compile or remove duplications/ unused elements? And would there be a benefit to maybe breaking a CSS file up into smaller files just for ease of organization?
@@jcc5018 I don’t do non Wordpress projects so I’m not familiar with those workflows.
Odd and even were color inverted. 😅 Yellow then purple on the original site.
But great tuto as always !
Dyslexia strikes again.
Kevin, what type/method of hosting would you recommend for clients' websites?
Gridpane - geni.us/svnfM5
@@Gearyco Thanks! Never heard of it, I'll check it out
Is the action color for the buttons and links?
Yes
hey kevin, great vid. what's the difference between a block and a container ? i see you adding containers inside containers and am asking myself why not add a block. is there any significance? un-chump a brother out
Blocks go inside containers, where did you see me out a container in a container?
I use VS Code. I believe I can use CMD + click on multiple lines to edit the text too. 😊👍🏻
49.50 Such a zen use of columns, love it ! In my version its splits the card content across the columns - - doing something wrong, but can work it out?!
root{
column-count: 2;
}
root > * {
margin-bottom: var(--grid-gap);
}
...stop press, this works:
root{
column-count:2;
}
root > * {
margin-bottom: var(--grid-gap);
break-inside: avoid-column;
}
Try adding “break-inside: avoid;” to the children.
@@Gearyco thanks Kevin, that did the trick, great video as usual
Hey Kevin. Loving these vids! So helpful, especially when being a chump migrating from Elementor! I'm wondering though, with all of the ACSS (or custom work) going on, does this make it more of a challenge if a client wants to take over the website themselves after sale, with no ongoing maintenance plan etc. In that scenario, is it better to build as a chump? Cheers!
Should a mechanic just duck tape stuff to the car in case the client wants to work on it themselves next time?
Obviously not. But you get my point. You're here doing a great service enabling us all to grow in web development. Which I agree is a world away from Elementor. But to that end, does that not mean we then need to educate clients in the same vein if they are only wanting to buy a site without service plan etc.@@Gearyco
This is a fun course. Do you think Bricks Builder will be around for a long while? It looks like a great builder, but I wouldn't want to learn it just to have it go away in a couple of years....
Yeah it’s here to stay. Growing fast in popularity.
@@Gearyco thanks for the reply. I'm happy to hear that you feel they will be around. They've done a great job. Thanks for your great content as well. Very well presented, and incredibly helpful.
Kevin, you are using variables for all the colors but white. What if someone needs to change that? Isn't that a chump-like thing then?
Change what specifically? Do you have an example?
@@Gearyco What I mean is that there is a reference name for every color you use in the tutorial (bg-primary, text-accent etc.) but when you use white, you don't use reference so if you ever need to change white for let's say light grey, you will be doing that manually, no?
@@pavel_webdesign that’s solved by our new color assignments functionality
You wrote RGB. Don't you mean RGBa since the 0.7 would be alpha (opacity)?
I explained in the video that the A is no longer required.
@@Gearyco Oh. Sorry. I guess I’m tired. Lol
oh we eating tonight!....whole damn meal of golden nuggets
Rockstar
We getting used to this great content! Thanks. One Question: I can not really figure out when to use the wpcodebox for those root {} entries and when to put it straight into the class. Maybee you can clarify this to me - i must have missed it.
It depends on your workflow and whether you're wanting to use a lot of SCSS or just vanilla CSS. If it's just vanilla CSS you can put it anywhere. I'm talking with the dev of codebox about a feature where we can easily access stylesheets within Bricks, so stay tuned...
1:09:10 - You made the Card color mistake on purpose didn’t you? To later ( I haven’t seen the rest of the video yet) show us why the tokenizing and BEM develop approach is the superior approach. Am I right? #ReformedChump - I have seen the light, Lord. I have seen the light Amen brother and sisters. 😂
1:09:49 Nuggets everywhere
I am late for the party 🎉😂.
Hi Kevin, what is the difference between "action" and "accent" color?
automaticcss.com/docs/palette-setup/
@@Gearyco In Elementor "accent" is the color of links and buttons, so I was confused. But I'd rather believe you than Elementor. 😁