PB101: L12 - Styling With Color (& Scalable Color Management)

Sdílet
Vložit
  • čas přidán 15. 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 **

Komentáře • 156

  • @Gearyco
    @Gearyco  Před rokem +32

    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!

  • @kappesante
    @kappesante Před rokem +7

    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.

  • @abdulwaheedorg
    @abdulwaheedorg Před 5 měsíci +3

    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

  • @noraholmquist8231
    @noraholmquist8231 Před rokem +3

    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.

  • @kareem2928
    @kareem2928 Před rokem +2

    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 🎨

  • @simonsureshwarayoga6564
    @simonsureshwarayoga6564 Před 8 měsíci +1

    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!

    • @Gearyco
      @Gearyco  Před 8 měsíci

      💪🏻💪🏻💪🏻

  • @cbcb6751
    @cbcb6751 Před rokem +4

    Fantastic course Kevin. As an (almost) complete beginner I have leant so, so much. Thank you!

  • @rubengarciajr
    @rubengarciajr Před rokem +5

    Hey Kevin thank you for everything you do for the wordpress/web development community. you are a HERO !!!

    • @Gearyco
      @Gearyco  Před rokem +1

      Thanks, I appreciate you :)

  • @pixelnthings
    @pixelnthings Před rokem +3

    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!🤘

  • @kevinrittershaus9380
    @kevinrittershaus9380 Před 10 měsíci +3

    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.

  • @dahunsi
    @dahunsi Před rokem +3

    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.

  • @JanWessels
    @JanWessels Před rokem +2

    Thanks Kevin for looking under the hood of ACSS color management. As always a great tutorial with lots of new techniques to learn from.

  • @bsp4750
    @bsp4750 Před 8 měsíci +2

    OMG this is thoroughly eye-opening, and very educational video. Thanks for taking the time to make them for us 🙏

  • @pushkardamle4112
    @pushkardamle4112 Před rokem

    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 :)

  • @davidnickson5043
    @davidnickson5043 Před 9 měsíci

    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!

  • @thebizpixie
    @thebizpixie Před 10 měsíci

    Really great tutorial, thanks. I learned a heap and it feels like it's slowly starting to come together now.

  • @MarkDendy
    @MarkDendy Před 5 měsíci

    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.

  • @JacobBall75
    @JacobBall75 Před 5 měsíci

    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.

  • @nicksmith5306
    @nicksmith5306 Před 9 měsíci

    Absolutely on another level. Fantastic episode in an amazing series. Thank you Kevin

  • @richardc1925
    @richardc1925 Před rokem

    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!

  • @RMSAnalyst
    @RMSAnalyst Před rokem +1

    '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.

  • @eucalyptech
    @eucalyptech Před rokem

    Great build, thank you Kevin !

  • @derekshort
    @derekshort Před rokem

    Great lesson! Thanks! I will implement HSL colors and variables from now on. 😁🙌🏻

  • @Chris_eBYTEmedia
    @Chris_eBYTEmedia Před 4 měsíci

    Awesome tutorial as always! 👍🏻

  • @davidwalls2304
    @davidwalls2304 Před rokem

    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.

  • @marcom.jaeger7277
    @marcom.jaeger7277 Před rokem +1

    Great job as always

  • @pedrocosta3818
    @pedrocosta3818 Před rokem

    Another master class! Thanks!

  • @michaelvandinther
    @michaelvandinther Před rokem

    Absolutely fantastic.

  • @PswACC
    @PswACC Před rokem +3

    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.

    • @derekshort
      @derekshort Před rokem

      Yes. I think I can do that in VS Code on macOS too. 😊

    • @PswACC
      @PswACC Před rokem

      @@derekshort VSCode and WPCodeBox are both powered by the Monaco code editor.

  • @MarkWilliams77
    @MarkWilliams77 Před 2 měsíci

    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 💪

    • @Gearyco
      @Gearyco  Před 2 měsíci +1

      Glad it was helpful!

  • @ted-e-baer
    @ted-e-baer Před rokem +1

    Thank you, Kevin.

  • @philipplunch8526
    @philipplunch8526 Před 8 měsíci

    33:12 this should go in your nugget library. A screenshot of the grid you created timestamp-linked to this video. Really nice🎉

  • @KGohill007
    @KGohill007 Před 4 měsíci

    Ok...the blur thing got me. SLICK. 💪

  • @berndnestrojil4084
    @berndnestrojil4084 Před 8 měsíci

    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

  • @goannacs6861
    @goannacs6861 Před 2 měsíci +1

    This feels like a 1000$ course

    • @Gearyco
      @Gearyco  Před 2 měsíci

      I appreciate it! Invoice sent.

  • @deedeeclarke4714
    @deedeeclarke4714 Před rokem +1

    Looking forward to the image training.

  • @thereal_JMT_
    @thereal_JMT_ Před 4 měsíci

    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 :)

  • @John.Rearden
    @John.Rearden Před rokem +1

    Good lesson

  • @derekshort
    @derekshort Před rokem

    I started implementing css variables in my current hand-coded website project. 😁

  • @koperkuba
    @koperkuba Před rokem +1

    Chump alert! Pure magic!

  • @collectiveunconscious3d
    @collectiveunconscious3d Před 10 měsíci

    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

    • @Gearyco
      @Gearyco  Před 10 měsíci

      Watch this: czcams.com/video/1Mku_FL31Bg/video.html

  • @gnentrepreneur
    @gnentrepreneur Před 5 měsíci

    Wow Man!!! 👏👏👏

  • @Zp00kie
    @Zp00kie Před 11 měsíci

    Super!!!

  • @philipplunch8526
    @philipplunch8526 Před 8 měsíci

    54:12 nugget bookmark: Multicursor editing in WPCodebox with cmd+D

  • @sonareclipse9810
    @sonareclipse9810 Před 7 měsíci

    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!

    • @Gearyco
      @Gearyco  Před 7 měsíci

      Should a mechanic just duck tape stuff to the car in case the client wants to work on it themselves next time?

    • @sonareclipse9810
      @sonareclipse9810 Před 7 měsíci

      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

  • @rico77yt
    @rico77yt Před rokem

    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?

    • @Gearyco
      @Gearyco  Před rokem +1

      Tutorial coming soon

  • @derekshort
    @derekshort Před rokem

    I use VS Code. I believe I can use CMD + click on multiple lines to edit the text too. 😊👍🏻

  • @rickdugmore
    @rickdugmore Před 6 měsíci +1

    I screamed "DRY!" @ 1:06:50.... 🎉

  • @philipplunch8526
    @philipplunch8526 Před 8 měsíci

    1:16:44 nugget bookmark: bg radial gradient with pseudo element

  • @raziel8799
    @raziel8799 Před rokem

    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
      @Gearyco  Před rokem

      Now show me increasing lightness and reducing saturation at the same time.

    • @raziel8799
      @raziel8799 Před rokem

      @@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.

  • @sarahmartinux
    @sarahmartinux Před rokem +1

    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?

    • @Gearyco
      @Gearyco  Před rokem +4

      Not in this course. I do have detailed SEO trainings in the Inner Circle though.

    • @VRudhraksh
      @VRudhraksh Před rokem

      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

  • @chamika1975
    @chamika1975 Před 6 měsíci

    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?

    • @Gearyco
      @Gearyco  Před 6 měsíci +1

      Idk I would need a link

  • @twanpeeters8446
    @twanpeeters8446 Před 25 dny

    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?

    • @Gearyco
      @Gearyco  Před 25 dny

      Not usually. I’d need to see the design to answer

  • @felixrivera2691
    @felixrivera2691 Před rokem

    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?

    • @Gearyco
      @Gearyco  Před rokem +1

      Those only work with codebox2 and they're for advanced use cases. Not required.

  • @philipplunch8526
    @philipplunch8526 Před 8 měsíci

    19:55 Nugget bookmark: perfect number circles.
    how could I live without flex shrink? ❤

  • @mikt
    @mikt Před rokem

    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.

    • @Gearyco
      @Gearyco  Před rokem +1

      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...

  • @jcc5018
    @jcc5018 Před rokem

    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.

    • @Gearyco
      @Gearyco  Před rokem

      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.

    • @jcc5018
      @jcc5018 Před rokem

      @@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?

    • @Gearyco
      @Gearyco  Před rokem

      @@jcc5018 I don’t do non Wordpress projects so I’m not familiar with those workflows.

  • @WestbrookAds
    @WestbrookAds Před rokem +1

    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
      @Gearyco  Před rokem +2

      Yeah it’s here to stay. Growing fast in popularity.

    • @WestbrookAds
      @WestbrookAds Před rokem +1

      @@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.

  • @djmarty8138
    @djmarty8138 Před rokem

    Kevin, what type/method of hosting would you recommend for clients' websites?

    • @Gearyco
      @Gearyco  Před rokem

      Gridpane - geni.us/svnfM5

    • @djmarty8138
      @djmarty8138 Před rokem

      @@Gearyco Thanks! Never heard of it, I'll check it out

  • @delsingvankampen2970
    @delsingvankampen2970 Před 3 měsíci

    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.

    • @Gearyco
      @Gearyco  Před 3 měsíci

      No way to fix sorry

  • @JamesJosephFinn
    @JamesJosephFinn Před rokem

    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
      @Gearyco  Před rokem +1

      If you want to. it's not a hard thing to fix.

    • @JamesJosephFinn
      @JamesJosephFinn Před rokem

      @@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
      @Gearyco  Před rokem +1

      I haven't tested normalize with ACSS, but you can definitely try it out.

  • @tootinghorns
    @tootinghorns Před rokem +1

    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;
    }

    • @Gearyco
      @Gearyco  Před rokem

      Try adding “break-inside: avoid;” to the children.

    • @tootinghorns
      @tootinghorns Před rokem +1

      @@Gearyco thanks Kevin, that did the trick, great video as usual

  • @bjon3048
    @bjon3048 Před měsícem

    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?

    • @bjon3048
      @bjon3048 Před měsícem

      can I use a neutral as font color?

    • @Gearyco
      @Gearyco  Před měsícem

      base is a neutral brand color. Neutral is always pure grays. You always want grays available for various things.

  • @wingtracer
    @wingtracer Před rokem +1

    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
      @Gearyco  Před rokem +1

      Not at the moment. But this should be possible in the future.

    • @wingtracer
      @wingtracer Před rokem

      @@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?

    • @Gearyco
      @Gearyco  Před rokem

      @@wingtracer you can use the files outside of WP if you’re familiar with SCSS. You could probably even sync multiple environments with VSCode.

  • @ThierryC-te3rx
    @ThierryC-te3rx Před rokem +1

    Odd and even were color inverted. 😅 Yellow then purple on the original site.
    But great tuto as always !

    • @Gearyco
      @Gearyco  Před rokem +2

      Dyslexia strikes again.

  • @felixrivera2691
    @felixrivera2691 Před rokem

    Are you using WPCodeBox v2?

  • @derekshort
    @derekshort Před rokem

    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.

    • @Gearyco
      @Gearyco  Před rokem +1

      They can go in any global stylesheet, but preferably one that loads first

  • @GerhardReus
    @GerhardReus Před 4 měsíci

    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
      @Gearyco  Před 4 měsíci +1

      Would need to see a link. Post in the inner circle and we can help you.

    • @GerhardReus
      @GerhardReus Před 4 měsíci

      @@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.

  • @stewtech
    @stewtech Před 6 měsíci

    In the background color section what does Raw do or represent?

    • @Gearyco
      @Gearyco  Před 6 měsíci

      It allows you to write any custom value.

  • @a.varezhnikova
    @a.varezhnikova Před 11 měsíci

    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?

    • @Gearyco
      @Gearyco  Před 11 měsíci

      Not sure what you mean exactly

  • @izkuhl
    @izkuhl Před 8 měsíci

    Hey Kevin. Why did you decide to use another container @ 16:35 instead of another block?

    • @Gearyco
      @Gearyco  Před 8 měsíci

      Containers are content width. Blocks are full width.

    • @izkuhl
      @izkuhl Před 8 měsíci

      @@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.

    • @Gearyco
      @Gearyco  Před 8 měsíci

      @@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.

  • @filmgenius2
    @filmgenius2 Před rokem

    Is the action color for the buttons and links?

  • @patricks4496
    @patricks4496 Před 7 měsíci

    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?

    • @Gearyco
      @Gearyco  Před 7 měsíci +1

      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.

  • @emailjough
    @emailjough Před 5 měsíci

    @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.

    • @Gearyco
      @Gearyco  Před 5 měsíci

      That’s what classes are for.

  • @chr_aikicom
    @chr_aikicom Před rokem

    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 ;-)

    • @chr_aikicom
      @chr_aikicom Před rokem

      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 :-)

    • @Gearyco
      @Gearyco  Před rokem

      Yes new version required. Also check the advanced documentation. This is only for advanced users.

  • @leshatemodula8387
    @leshatemodula8387 Před 29 dny

    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

    • @Gearyco
      @Gearyco  Před 29 dny

      Blocks go inside containers, where did you see me out a container in a container?

  • @mcostales84
    @mcostales84 Před rokem

    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?

    • @Gearyco
      @Gearyco  Před rokem

      What’s not working?

    • @mcostales84
      @mcostales84 Před rokem

      @@Gearyco the styling. I'm going to publish on the inner circle

  • @euandrefrancisco
    @euandrefrancisco Před rokem

    Hi Kevin, what is the difference between "action" and "accent" color?

    • @Gearyco
      @Gearyco  Před rokem +1

      automaticcss.com/docs/palette-setup/

    • @euandrefrancisco
      @euandrefrancisco Před rokem

      @@Gearyco In Elementor "accent" is the color of links and buttons, so I was confused. But I'd rather believe you than Elementor. 😁

  • @brendanoconnell2306
    @brendanoconnell2306 Před rokem

    oh we eating tonight!....whole damn meal of golden nuggets

  • @twanpeeters8446
    @twanpeeters8446 Před 25 dny

    15.34 Why are you adding a container gap as a utility class here, why not as a token?

    • @Gearyco
      @Gearyco  Před 25 dny

      Because I’m not using a custom class on the section. So a utility class is faster and more performant than ID style.

    • @twanpeeters8446
      @twanpeeters8446 Před 25 dny

      @@Gearyco Thanks a lot for your clear responses 🤗

  • @mariajackson8923
    @mariajackson8923 Před rokem

    Rockstar

  • @derekshort
    @derekshort Před rokem

    You wrote RGB. Don't you mean RGBa since the 0.7 would be alpha (opacity)?

    • @Gearyco
      @Gearyco  Před rokem +1

      I explained in the video that the A is no longer required.

    • @derekshort
      @derekshort Před rokem

      @@Gearyco Oh. Sorry. I guess I’m tired. Lol

  • @mur3na11
    @mur3na11 Před 3 měsíci

    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?

    • @Gearyco
      @Gearyco  Před 3 měsíci

      Change what specifically? Do you have an example?

    • @mur3na11
      @mur3na11 Před 3 měsíci

      @@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?

    • @Gearyco
      @Gearyco  Před 3 měsíci

      @@mur3na11 that’s solved by our new color assignments functionality

  • @philipplunch8526
    @philipplunch8526 Před 8 měsíci

    1:09:49 Nuggets everywhere

  • @gojiyaravi2
    @gojiyaravi2 Před rokem

    I am late for the party 🎉😂.