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

[@abdulwaheedorg]

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

[@Gearyco]

Glad you enjoy it!

[@ninjahaggblom]

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]

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]

Love watching these builds.

[@basilbabaa1628]

Thanks again Kevin!

[@alexisrabbitt4430]

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

[@sebastian.schwarz]

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]

💪🏻

[@dahunsi]

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

[@chrisgreen5711]

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 👍

[@martinhiggins824]

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]

💪🏻💪🏻💪🏻

[@simon_quinn]

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]

More to come!

[@winwinis3483]

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.

[@adriann6233]

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]

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]

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

[@LudovicCharlier]

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

[@danieldk9433]

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]

You're very welcome!

[@dallaslogic]

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]

Perfect example! See that stuff all the time!

[@ST-rq8jw]

Absolutely fantastic work

[@eucalyptech]

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

[@cviisualartstudio]

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]

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.

[@ReubenHochstetler]

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

[@toby-green]

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]

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

[@nicocubero4853]

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]

Glad it was helpful!

[@eng.farahkh]

This so cool tutorial Kevin many thanks 😊

[@clausmorlock]

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]

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

[@dallaslogic]

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

[@tommykokko2336]

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

[@rebelinc]

As always Awesome stuff and a ton of golden nuggets 🙂

[@PicSta]

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.

[@markpeters2254]

Great content Kevin, thanks!

[@MrBalloonatic]

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]

Timeline should be OL I would think

[@MrBalloonatic]

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

[@alyssajorgensen3279]

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]

Yes! Such a headache! Thx for watching.

[@phobzy85]

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]

Thanks for watching!

[@cavideo798]

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]

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.

[@John.Rearden]

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]

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]

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

[@mrshesek]

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]

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

[@mrshesek]

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

[@user-mfsc-2024]

brilliant

[@wpeasy]

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]

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]

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

[@Gearyco]

Yes, for sure.@@wpeasy

[@wpeasy]

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

[@CalisthenicsIreland]

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]

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

[@stripedgoat]

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]

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

[@christophheine4725]

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

[@Tom-Homer]

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.

[@vaughanprint]

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]

All situations where you’re semantically listing items.

[@jenniferward6821]

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

[@carlo3368]

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

[@Gearyco]

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.

[@ryanclapham]

Just the youtube video I was after.

[@andrefranzke3882]

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

[@Gearyco]

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

[@jzajzz]

20:43 the minute I type the bracket, it nullifies the CSS on top.. I even have the border check on , so as soon as I type the bracket for the media query . .the -1 CSS is nullified , so the border check goes away and the image is no longer -1. This is my second time doing this and it's done it both times.. I was able to fix it the first time.. but don't know what I did.. WHat could I be doing wrong?

[@jzajzz]

To anyone reading this that has the same issue .. I keep forgetting to add the last bracket at the end...

[@mafiasalesman]

Can the cards be queried and have the content alternate?

[@Gearyco]

Yes

[@werkmind]

How are you autocompleteing in the custom css field in bricks?

[@Gearyco]

Automatic.css

[@werkmind]

Oh.. well have i missed a setting somewhere, or is my Bricks just broken again ^^?@@Gearyco

[@Gearyco]

You can turn it on in the options dashboard.@@werkmind

[@werkmind]

thank you!@@Gearyco

[@ham2956]

Let’s go Kevin! 🇺🇸 48:31 lmao

[@Gearyco]

I needed some ice cream after that.

[@ham2956]

💀

[@karlguildford6588]

Just finished a staging site with loads of legal docs a counting nightmare, css auto counting even showed errors in their own docs - Oops!!

[@groundpets5101]

if you from UK spell the word WITHOUT the >U

[@Gearyco]

😅

[@groundpets5101]

im sure there many more, going have keep a list :D @@Gearyco

[@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!

[@LooWoo-d6q]

Jump: kzbin.info/www/bejne/gZKvoGWPiZlji7ssi=MDYnL99ScHxkBk7r&t=1311

[@СветланаГруздева-л7ю]

or ?

[@Gearyco]

I would put the class on the figure.

[@СветланаГруздева-л7ю]

@@Gearyco Thank you! :)