PB101: L12 - Styling With Color (& Scalable Color Management)
Vložit
- čas přidán 25. 06. 2024
- This episode will teach basic color styling (backgrounds, text, etc.), color naming, tokenization, and scalable color management techniques.
Not only that, but we're starting from scratch on a new landing page, so you'll see everything you've learned so far put into practice!
Get yourself ready because I'm dialing up the workflow speed as well! If you get lost, the controls for playback speed and rewind will be your best friend.
Lastly, this lesson contains foreshadowing content for some concepts we'll dive into later, such as pseudo-elements, filters, and overlapping elements.
Note: Some landing page details were skipped to better manage time. We'll do a fully detailed page build at the end of this course. Additionally, we'll cover basic accessibility in a future lesson, covering color contrast ratios.
** MY TOOLS **
🔥 AutomaticCSS (ACSS) - automaticcss.com
🔥 Frames - getframes.io
See all my recommended tools here: geary.co/tools/
** INNER CIRCLE **
Step your design/dev game up, make more money, and get the full scoop on scaling your digital agency! When it comes to the Inner Circle, I don't hold back.
⭕ In-depth design & dev trainings
⭕ Business, sales, & marketing trainings
⭕ Agency resources & downloadables
⭕ Vibrant, quality community with zero toxicity
⭕ ...and much more!
Learn more and join here: geary.co/inner-circle/
** SOCIAL **
👉 FB - / marketingkev
👉 LinkedIn - / kevingeary
** CHAPTERS **
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.
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 :)
Fantastic course Kevin. As an (almost) complete beginner I have leant so, so much. 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!🤘
Thank you!
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.
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
💪🏻
OMG this is thoroughly eye-opening, and very educational video. Thanks for taking the time to make them for us 🙏
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!
💪🏻💪🏻💪🏻
Great build, thank you Kevin !
Really great tutorial, thanks. I learned a heap and it feels like it's slowly starting to come together now.
Great job as always
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!
Awesome tutorial as always! 👍🏻
Absolutely on another level. Fantastic episode in an amazing series. Thank you Kevin
Very welcome
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.
Another master class! Thanks!
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!
Absolutely fantastic.
Thank you, Kevin.
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 :)
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!
Great lesson! Thanks! I will implement HSL colors and variables from now on. 😁🙌🏻
Ok...the blur thing got me. SLICK. 💪
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.
This feels like a 1000$ course
I appreciate it! Invoice sent.
'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.
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.
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.
Wow Man!!! 👏👏👏
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
☕️
Looking forward to the image training.
Good lesson
Chump alert! Pure magic!
33:12 this should go in your nugget library. A screenshot of the grid you created timestamp-linked to this video. Really nice🎉
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!
Super!!!
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 :)
I started implementing css variables in my current hand-coded website project. 😁
👏🏻 good stuff
I screamed "DRY!" @ 1:06:50.... 🎉
54:12 nugget bookmark: Multicursor editing in WPCodebox with cmd+D
1:16:44 nugget bookmark: bg radial gradient with pseudo element
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: czcams.com/video/1Mku_FL31Bg/video.html
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
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 use VS Code. I believe I can use CMD + click on multiple lines to edit the text too. 😊👍🏻
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.
19:55 Nugget bookmark: perfect number circles.
how could I live without flex shrink? ❤
Are you using WPCodeBox v2?
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
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
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...
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
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
oh we eating tonight!....whole damn meal of golden nuggets
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
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.
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
In the background color section what does Raw do or represent?
It allows you to write any custom value.
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.
Kevin. Any way to fix this is post; Around the 26 min the structure list gets hidden by your handsome face. As I learn I find I benefit by seeing exactly what you have selected to alter. BTW, is there some fast navigating you are doing, up and down the structure list or are you mousing over there? Thanks.
No way to fix sorry
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.
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.
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.
Is the action color for the buttons and links?
Yes
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.
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
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
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.
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 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.
Rockstar
Odd and even were color inverted. 😅 Yellow then purple on the original site.
But great tuto as always !
Dyslexia strikes again.
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?
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. 😁
@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.
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 🤗
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
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?
@@mur3na11 that’s solved by our new color assignments functionality
1:09:49 Nuggets everywhere
I am late for the party 🎉😂.