Auto-Counting Process Cards (CSS Counter) in Bricks + Much More! Full Page Build!

Рет қаралды 8,004

6 ай бұрын

Building a section to display a process is pretty routine in web design. Unfortunately, most web designers skip essential best practices to ensure maintainability and scalability in a section like this. The end result is that adding a step, or re-ordering steps, is a royal pain in the ass!
Imagine you have 7 steps and have to add a new step between #1 and #2. If you haven't followed best practices, you'll have to manually re-number every single card. An in an alternating layout, you'll have to manually change how the content and media alternate on every card. And if there are alternating design accents, you'll have to manually change all those, too.
Every. Single. Time. Every change, every removal of a step, or every addition of a step requires a ton of manual labor.
In this training, I will teach you how to build this section so that you can add a new step, remove a step, or re-order steps in seconds. You can even generate the entire process section with a single query loop.
The numbering, alternating content/media, and alternating accent elements are all self-adjusting!
Of course, there are a ton of other golden nuggets along the way, like creating slanted gradients, slanted images, gradient divider lines, pseudo-shadows, and more.
Enjoy!
** 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 **

Пікірлер: 98

@abdulwaheedorg 4 ай бұрын

Man, you are on another level. I never get bored watching your videos. I have never seen someone to provide this quality videos.

@Gearyco 4 ай бұрын

Glad you enjoy it!

@farhan-app 6 ай бұрын

I genuinely think you’re reading my mind because I just did this on a project this morning!!

@ninjahaggblom 5 ай бұрын

Getting there...! I rebuilt this page w/ Bricks (new to it too) but the output is slightly different (the line under is above no matter what I do) but I am stubborn and convinced that this is the best way to learn; recreate, find problems, solve them and learn! Started to learn CSS about a year ago and whoooo, did I learn much from my mistakes! :-) Once you learn what went wrong, you'll never do the same mistake again! Thanks again Kevin!

@MarcelHeiniger 6 ай бұрын

I 200% agree with you. Taking the time to do a little extra work now makes the project much more maintainable in the long run. I've learned from experiences where I didn't take the time to properly plan and ended up having to redo the work because it wasn't scalable. It's important to consider future needs, like when a client wants to add a new entry in the middle of the project.

@kevinrittershaus9380 6 ай бұрын

Love watching these builds.

@LudovicCharlier 6 ай бұрын

Thank you for your time Kevin, your content is perfect.

@basilbabaa1628 6 ай бұрын

Thanks again Kevin!

@alexisrabbitt4430 4 ай бұрын

This x-ed my path right on time. Just used it in a project. Thanks yet again, Kevin!

@dahunsi 6 ай бұрын

This tutorial is really worth paying for. Loved it. Thanks.

@ST-rq8jw 6 ай бұрын

Absolutely fantastic work

@chrisgreen5711 6 ай бұрын

Absolutely brilliant tutorial Kevin and so many useful techniques. I agree with you 100% it's worth doing the little extra work upfront - makes it totally scalable for future changes etc. Thanks again for doing these tutorials, I'm sure we all appreciate them very much 👍

@markpeters2254 6 ай бұрын

Great content Kevin, thanks!

@eucalyptech 6 ай бұрын

What a great tutorial, thank you Kevin 👍 I also say Yes !

@ReubenHochstetler 6 ай бұрын

Incredible training. I also love seeing the extra CSS image design training with mask.

@eng.farahkh 6 ай бұрын

This so cool tutorial Kevin many thanks 😊

@rebelinc 6 ай бұрын

As always Awesome stuff and a ton of golden nuggets 🙂

@winwinis3483 6 ай бұрын

Great tutorial - learned a lot. I agree easier to find things when it is done in custom css rather than looking through all the bricks fields.

@simon_quinn 6 ай бұрын

Amazing dude. I've just saved this as a reusable section for any future projects too. This is awesome. Thanks so much Kevin. I'd really appreciate more tutorials exactly like this one that teaches how to make really cool looking and scalable sections. Awesome man. Awesome.

@Gearyco 6 ай бұрын

More to come!

@sebastian.schwarz 6 ай бұрын

Thank you Kevin for another great tutorial! I have just rebuilt the section and once again I am more than thrilled. I know the techniques used, but it's so much fun to combine it all and apply it using a great real-life example - not to forget all the extra golden nuggets. My highest respect for such great content!

@Gearyco 6 ай бұрын

💪🏻

@toby-green 6 ай бұрын

Another great tutorial. I found my background gradient and media mask created jagged edges. This was in Brave and Chrome - didn't check other browsers. Having googled I found if the 2nd % has a decimal uplift it blurs out the edges giving a cleaner look. But this meant I needed 2 variables for media-height, so the CSS looked like this: --media-height-a: 80%; --media-height-b: 80.3%; %root%__media { mask: linear-gradient(calc(var(--angle) * -1), var(--action-light) 50%, transparent 50% ); -webkit-mask: linear-gradient(calc(var(--angle) * -1), var(--action-light) var(--media-height-a), transparent var(--media-height-b)); } But then I realised I could use the calc function again to add the decimal, taking me back to a single variable: %root%__media { mask: linear-gradient(calc(var(--angle) * -1), var(--action-light) 50%, transparent 50% ); -webkit-mask: linear-gradient(calc(var(--angle) * -1), var(--action-light) var(--media-height), transparent calc(var(--media-height) *1.01)); QUESTION: The mask above the -webkit line seems redundant as changing it has no effect. I guess it's browser specific. They were copied from the media wrapper lines - presumably they should also be using the --media-height variable? Where should we go to check that line is performing as expected?

@Gearyco 6 ай бұрын

Yes they both need to use the variables. I missed that in my version.

@danieldk9433 6 ай бұрын

As usual, a great lesson, I managed to write everything in CSS as you advised. Thanks to this, we learn much faster :) Thank you very much for the valuable lesson, best regards!

@Gearyco 6 ай бұрын

You're very welcome!

@dallaslogic 6 ай бұрын

100% agree that it's worth the extra effort on the front end to make it scalable! I just had to manually rebuild a dozen hero settings on an inherited site because they were each manually created without any css classes. We need to darken the overlay color, but there was NO global control. Since i was going to have to manually adjust each hero anyway, I rebuilt the hero using classes and variables and then manually replaced them. I now have one place i can go to globally adjust the color/transparency level!

@Gearyco 6 ай бұрын

Perfect example! See that stuff all the time!

@adriann6233 5 ай бұрын

Very nice tutorial and outcome. I personally would throw all css in one stylesheet for better scalability/maintainability. This way you don't need to search where the css was put in.

@Gearyco 5 ай бұрын

When it’s in a stylesheet you have to hunt for it. When it’s attached to the thing you’re working on, there’s really no hunting.

@adriann6233 5 ай бұрын

@@Gearyco my comment was a bit misleading. I didn't mean to put all css in an external stylesheet, but to put everything in only one css editor of the main component i.e. so it would still be attached to the component you are working on but at a central place.

@cviisualartstudio 6 ай бұрын

Amazing content, thank you for sharing your knowledge! I just watched the whole lesson from start to finish. I will try following the process (build) down the track when I have more time. I have found with most of your videos, I just can't quite get everything to work smoothly or completely like your example does, but I think that is due to me not understanding 100% what I am doing. Or maybe I left out one detail, which throws everything out? But that said, you are hands down the best teacher that I have come across so thanks again!!!!

@Gearyco 6 ай бұрын

It's easy to make a small mistake that causes something to not work. Your best bet, when you're trying to follow along and recreate things and you end up getting stuck, is to post in the Inner Circle. There are a ton of people there who can jump in and tell you why it's not working.

@user-mfsc-2024 6 ай бұрын

brilliant

@nicocubero4853 6 ай бұрын

Great tutorial Kevin, very useful. I think thats very important to develop website with advanced css techniques ir order to get a light web, manteinable & scalable. Thanks a lot!!

@Gearyco 6 ай бұрын

Glad it was helpful!

@martinhiggins824 6 ай бұрын

Another awesome video. Coming from a background of around 30 years of professional software engineering I whole-heartedly agree that any time you spend making it unbreakable (as far as possible ;-) ) and thinking ahead to the inevitable changes down the line ("we'll never need to change that" almost always becomes "we'd like it to do something different now") is time well spent. I'm pretty new to doing this sort of thing on the front end but as I'm working through a steep learning curve I'd much rather make sure I do things as right as I can from the outset. I've picked up too many 'chump' versions of how to do things from Googling how so I'm finding it a lot cleaner and simpler to do it the more in depth way you're teaching. It just feels right and neat rather than woolly and hacky.

@Gearyco 6 ай бұрын

💪🏻💪🏻💪🏻

@tommykokko2336 6 ай бұрын

Did this with clients woocommerce for all categories and products to make it easier to reference categories/items over the phone. Made the client happy anyway. 🙂

@PicSta 6 ай бұрын

I agree that the extra effort in CSS worth it, because it's a reusable pattern you can use in different projects once you've mastered it. The only thing I saw, I had made different would be consolidated the min media query for desktop. You did repeat yourself with that media query, instead of using comments to separate it inside (nested inside). Beside of that, it is an excellent tutorial showing ways and options (using a professional builder) to achieve non-standard layouts.

@MrBalloonatic 5 ай бұрын

I think a great application for what you have taught here could be a historical timeline, assuming that it was built instead of an ad there was another field to set the date (year) that could also be overlayed on the timeline photo that compliments the text or perhaps if there is no image maybe the text would overflow into a second (css)column on the other side of a centre dividing line … my mind is buzzing with ideas for what to try next with this technique … this could easily be made with a cpt and extra items can be inserted and rendered dynamically using the date (year) as the key for the facet.

@Gearyco 5 ай бұрын

Timeline should be OL I would think

@MrBalloonatic 5 ай бұрын

@@Gearyco sorry i was thinking of another idea when i started with instead of bit, like i said my mind has been buzzing, i just need some free time to test some things out …

@ryanclapham 5 ай бұрын

Just the youtube video I was after.

@clausmorlock 6 ай бұрын

I'd love to be on this level, but I have to admit I need an ice pack for my head now. No doubt that your way doing this is highly professional and a future goal for me.

@Gearyco 6 ай бұрын

You'll get there sooner than you think! Stick with us :)

@dallaslogic 6 ай бұрын

Keep watching! In 3 months, you won't even BELIEVE how much you know

@alyssajorgensen3279 6 ай бұрын

I agree, it's absolutely worth it to make it unbreakable and scalable. I worked at a couple agencies that didn't do that and it was a nightmare.

@Gearyco 6 ай бұрын

Yes! Such a headache! Thx for watching.

@phobzy85 6 ай бұрын

It's definitely worth the extra effort. Had plenty of headaches where I would change 1 item and it throws everything out. This use case has come up plenty and a blog I have would highly benefit using this pattern. Great tutorial / walkthrough. Thanks! I laughed my ar*e off at the Joe Boden comment 😂

@Gearyco 6 ай бұрын

Thanks for watching!

@jenniferward6821 6 ай бұрын

Great tut thank you please do one with Google maps, using markers

@John.Rearden 6 ай бұрын

Enjoyed watching this video. What you did is maintainable, granted. But in all honesty, from a design perspective, it was just a two column alternating layout with some styling.

@Gearyco 6 ай бұрын

Isn't everything online "just a ... XYZ?" I'm not sure I understand what point you're trying to make. Are you saying that it's better to just build it manually as quickly as possible and not worry about the maintainability of it?

@John.Rearden 6 ай бұрын

@@Gearyco I am just trying to reconcile the two philosophies. Maintainable vs Uniqueness. {Consider having a look at the portfolio of the designer - Den Sabrov - his most famous work - impvr} Looking at his websites, one concludes that they are mostly static, and not maintainable, but they are unique. In this example of yours, you introduced a problem - a number and a slant. Then you devised a solution to that problem. If one doesn’t introduce a number and a slant for a two column alternating layout, static works just fine and remains maintainable. It’s like the virus and the vaccine analogy of 2019-2020. First they introduced the virus and then they came out with the vaccine.

@vaughanprint 6 ай бұрын

You are recommending the list set up ul/ol and li for cards. Does this apply to all situations. Say for example one is using a query loop to dynamically pull instances of a post type inot a grid would this also classify as a listt or, does this onely apply to a short run of items put together more manually?

@Gearyco 6 ай бұрын

All situations where you’re semantically listing items.

@cavideo798 6 ай бұрын

Great tutorial again! Thanks! Is there a reason why you do not put all the child element's CSS under the Process Card parent element? It seems like you put some child element CSS in the parent but not others. Thanks.

@Gearyco 6 ай бұрын

I've built so many things prior to the expansion of Bricks' root selector that it's habit to go straight to children to add CSS (because you could never do it on the parent before). I'm still retraining myself to go do everything on the parent now.

@wpeasy 6 ай бұрын

Love your tuts :) No matter how much a viewer already knows, there are always new ideas in watching someone else. One question: at 31:00 you use inset-block-end and inset-block-end. What advantage if any is there over plain old "right" and "bottom" ?

@Gearyco 6 ай бұрын

the inset version are the new logical properties standard, so it's good for people to switch over to them and start learning them as soon as possible. The add support for RTL and some other use cases.

@wpeasy 6 ай бұрын

@@Gearyco Got it. Do you ever use "direction, text-orientation and writing-mode" in your part of the world?

@Gearyco 6 ай бұрын

Yes, for sure.@@wpeasy

@wpeasy 6 ай бұрын

@@Gearyco I'd love to see a video on how and where you use these. So far I have only done so to flip some text vertically.

@carlo3368 6 ай бұрын

Great vid Kevin, maybe could use a bit more tokenizing e.g. the font size for the large numbers though ;-)

@Gearyco 6 ай бұрын

No real need to tokenize those since they're only defined in one place. You could make them automatically responsive, but that's extra work since they're only used in one context and it's easy enough to adjust at breakpoints for that one thing.

@roccoluigitartaglia Ай бұрын

For the slants to avoid repeating the code we can create a multiplier variable to avoid repeating the code, something like this: @media (min-width: 767px) { %root%:nth-child(even) { --mult : 1; } %root%:nth-child(odd) { --mult : -1; } /* slants on desktop */ %root%__media-wrapper { background: linear-gradient(calc(var(--angle) * var(--mult)), var(--primary-light) var(--wrapper-height), transparent var(--wrapper-height)); } %root%__media { mask: linear-gradient(calc(var(--angle)*var(--mult)), var(--primary-light) var(--media-height), transparent var(--media-height)); -webkit-mask: linear-gradient(calc(var(--angle)*var(--mult)), var(--primary-light) var(--media-height), transparent var(--media-height)); } } P.S. I really love your video, I'm watching everyhing and learning lots of things!

@andrefranzke3882 6 ай бұрын

Please can you make it as Frame available? It's a pretty one.

@Gearyco 6 ай бұрын

The general layout already exists as a frame, just doesn't have all the styling (because Frames is unstyled) ;)

@mrshesek 6 ай бұрын

Wonderful as usual, thank you! Is there a reason you prefer centering absolute objects with translate instead of margin auto? I find it more convenient and I was wondering if there is a specific reason for that or just personal preference. Thanks again!

@Gearyco 6 ай бұрын

Once you use absolute positioning, margin has no effect. So using auto margins isn't possible -- codepen.io/geary-co/pen/poGBdpw/6ad6526d58f92c04133ea80b671e0609

@mrshesek 6 ай бұрын

@@Gearyco Thank you for the time you took to make this example! I do believe it is possible though. I've seen it on Kevin Powel's channel, and I've also managed to recreate it. I do suppose that in the end it is a matter of preference. Here is my pen - codepen.io/Shesek/pen/LYqvqZx, and Kevin's short- kzfaq.info9cSL5dP4rgM

@mafiasalesman 10 күн бұрын

Can the cards be queried and have the content alternate?

@Gearyco 10 күн бұрын

Yes

@CalisthenicsIreland 6 ай бұрын

Hey Kevin, I made a post on this in the IC in relation to some of the current frames containing Auto-Counting. Since bricks 1.9.3 those frames are not working correctly due to bricks not rendering empty divs. It's a pretty easy fix, i hope you guys can include these changes when adding new frames. Thank you

@Gearyco 6 ай бұрын

Interesting. I’ll take a look. The method in this training doesn’t use any empty divs.

@stripedgoat8470 6 ай бұрын

I can confirm this! I didn't even realize what was the exact issue until I saw your comment. I have auto-counting implemented somewhere, and yes...the div is empty by itself.

@korova-moo 6 ай бұрын

@@stripedgoat8470 oh yeah, just noticed that all of my process cards using the frames frame...all the numbers have disappeared!

@christophheine4725 6 ай бұрын

Bricks doesn't render empty text elements. Empty divs are no problem afaik

@Tom-pl4co 6 ай бұрын

This was fixed like a day after Bricks v1.9.3 was released. Frames used the Basic Text element (which now do not render if content field is empty) and Tobias switched them all over to divs. Lots of posts about this in the ACSS circle. To fix your own site you need to manually do it or you have to reimport the frame.