A single, simple landing page like this isn't a typical situation where a user would *definitely* want to use Frames, but it offered an opportunity to show how Frames can adapt to different situations. Just a small example to illustrate a broader context. Also, notice how many decisions I **did not** have to make in order to get started with the build. ACSS handles all that initial setup for you -- you just tweak when needed. Thanks for watching!
I love love love love this! Kindly requesting more of these, please! For beginners like me, it is so very useful to have a full-build situation to refer to. I've watched it and taken notes. Now I'm going to go and try to duplicate exactly what you've built. And I have the notes, and the lesson to refer back to if (when!) I get stuck. It's the only way to learn this stuff! Oh, and by the way, you're the only course instructor I've never had to change the playback speed for. You talk at a perfect clip, thank you! Better to have to back up the video to hear something again than set the whole thing on 2x to avoid falling asleep. And I love that you don't oversimplify. Give me the real stuff, at real speed, and then I can take that away and put it to use at my own speed. As a former educator, I can tell you this is absolute GOLD! Thank you!
Perfect tutorial, i was hoping to see these kind of content for a while, i wish next time you can show also the final touch on perfecting responsiveness, thank you Kevin!
Loved the golden nuggets you can get from this *apparently* basic tutorial, like the use case for the pseudo-class :has. Looking forward to more advanced builds!! 😊
Love to see more. This was great timing because I'm trying to reconstruct a page from Oxygen and ran into the shape divider issue! I now have an even better understanding. So, Thank you!
Great tutorial and something that truly adds tremendous value! I loved the fact that you took a real world example and did not take any shortcuts or cut corners. In the real world, 80% of things are standard and can be done quickly but the last 20% work is tricky (and takes 80% of the effort). Glad that you focused on getting the exact shape of the curve, the accent underlines and images etc. These type of tutorials benefit in at least two ways - 1. Showing the power of ACSS and Frames and 2. Teaching ACSS/Frames users on how to use these tools correctly while building the websites. More of such tuts will be absolutely valuable!
I would love to see more tutorials like this. Thumbs way up on this video. I absolutely love this sort of thing. A masterclass. I love these real world examples. 👍 I have had a lot of small and large burning questions answered in this one. Golden nuggets everywhere. **Slings bag of gold over shoulder** I personally learn best from these kinds of tutorials. Today, I learnt a lot and am appreciative of this content. Thank you, Kevin.
Excellent stuff, cleared up a few minor ?s I had with modifying/using frames classes, etc.. These are way more valuable and should definitely keep pumping some more out like these.
You've provided us a professonal tool set, fantastic! Please continue weekly videos like this on how to maximize this incredible gift of ACSS and Frames in a professional site-build-workflow. Thanks KG!
Real life examples that show both automatic css in combination with frames is excellent. Learning how the software is intended to be used is really enlightening. Hoping I can find more content like this in the future - I do need to have a look yet! Awesome tutorial :)
This really brought everything together for me. What a great lesson! More of examples like this would certainly be appreciated, even if it had to be in the IC.
Just entered in the world of Bricks, Acss and Frames. Great tutorial!!!😊😊More examples showing different ways to handle design challenges would be amazing. Thanks!"
This is honestly the most useful video you have put out on styling. All the squares and movement is great. However like golf the finishes are what makes a site regardless of how us SEOs feel about them. I have lost enough business over the years to client ego to know that even a perfectly top ranking client will get annoyed if they don’t get the aesthetics to match their buddies.
Firstly, thank you for sharing this incredible video. I’ve learnt CSS Grid which is much easier than I initially thought, how to unlock more flexibility in ACSS (the control panel looks basic but there is so much one can do with it), and absolute positioning. Excellent tutorial 11/10! You’re a fantastic teacher and educator. PS: I was like nr 400! 😉
Great tutorial!! Very much respect the precision of the css done in your products. I’ve always been a stickler for minimalist css.. no div soup LOL. Thanks again 😊
Kevin - Great tutorial, thank you. This is helpful to see and learn as you build, especially how you simplify things in the setup (using just 2 colors and shutting off the others). Would love to see a build like this focused more on a complex blog post layout template or a really creative and challenging product page layout. Thanks as always!
Part 2 of this video needs to take it to how to adjust for mobile sizes. I know that ACSS/Frames has that built in for the most part, but with the elements that you added in (NEVER thought to make those elements classes!), there's some tweaking to be done. I tell all my clients, "Mobile First!" because 80% of the public will probably be looking at the site on their phones. Great stuff, as always. I get more out of your training sessions than I ever did on courses I paid money for. A lot of that is due to your engaging style. Please continue to educate us all!
Thanks Kevin, great video tutorial/overview. I would like to be a wee bit greedy and request both -- more "example" builds like this as well as the "Here's new ACSS / Frames features". This build answered several questions I had (i.e. to help underline text, pseudo elements, ...). I did appreciate how you approached the initial "build" by selecting a Frame having a similar pattern and then working from there. The lightbulb went on with that realization.
As I keep moving forward in my web design journey, its wonderful to learn but also see practical tutorials to grasp what is being taught. Thank you for this @geary
Brilliant tutorial. Thank you. As a newbie with ACSS and Frames, it's great to see how to use it for different scenarios, being flexible but keeping with best practices. Would love a tutorial building a site with ACSS, Frames, Metabox, MB Post types, MB Relationships. How to use Frames with dynamic content and custom post type query loops.
There’s one in the inner circle. But full site builds aren’t as helpful as they seem. Most of the work is front loaded. Once you get most everything setup it’s a lot of repetition.
Thank you for the walkthrough. Definitely gotten a lot of value from this on top of whatever is already on your docs and other videos. Would love more walkthroughs like these and how you deal with dynamic data as well. And please, one with Bricks’s new mega menu (quite a monster to work with now) once it’s stable. Cheers
Love the video as usual. Could you do a video explaining responsive grids? I always have trouble with the row ratios when stacking on mobile. Taking an example from this video, how would you style the mobile layout for the testimonial card at the bottom of the landing page?
@@AutomaticCSS Thanks for the reply. I get that you would set the column grid to 1 but what about the row grid? Do you keep that at 12? I noticed when I do this the content can be stretched out vertically on mobile. Like the row ratios are off. Then I start messing with the row count to fix it and it just gets more messed up.
Thanks Kevin, such a helpful video. I followed along but my accent--after pseudo element creates a horizontal scroll bar as it goes outside the width of the site. Would really appreciate it if you could describe how to fix this? Thanks
@@AutomaticCSS Thanks for your reply. I've tried this but it cuts off the mobile phone image. I also tried overflow-x: hidden but that creates a vertical scroll bar within the section
Made my day, love the on-the-fly problem solving. However, I think you missed the toggle switch in the Bricks header settings, you enabled "sticky" but not "scroll on sticky" so I don't think it's a Bricks bug, again, the manual "fix" was a nice gravy add-on.
"Scroll on sticky" means that it won't be sticky until the user starts scrolling, which means it won't act as an overlay header on page load. I wanted it sticky/overlay on page load, not just on scroll. So, still definitely a Bricks bug.
I ran into this bug as well. Made a video of it in action, but never and should have posted it in the inner circle. It was nice to see the manual fix/work-around.
@@AutomaticCSS --- I rushed to judgement, I didn't follow along until watching it all the way through, I mistook your referencing of sticky on scroll with background on scroll. However, I may have been accidently correct after all as it pertains to the bug. Today, when I was following along, I tried enabling the background color on scroll feature, like you tried to do but got the bug, and it worked fine. Is it possible a recent update resolved the issue?
Awesome info! Thank you for sharing! I have a question in the extra credit part, could you declare using the builder?, what I mean is this: for example in oxygen ( I’m sure you can do this in bricks but since I use oxy) could add the class to the container, and then in the chooser declare it a pseudo element and add the image to the background setting it in the background selector on oxy and would that work?
@@AutomaticCSS bet! almost a year ago, i was wondering if you could use the builders UI to declare the ::after for some reason i like to use the builders UI to achieve most i can without going to CSS but to be honest after a few more of your videos under my belt im less and less inclined to do that and finding CSS making a lot more sense to me. btw thanks for your reply!
I really enjoyed this. Maybe one of your best for me. Clarity on some things that I am definitely putting to use immediately. I definitely would love to see more of this. Showing how Frames can be used to build stuff and the hidden nuggets of ACSS. Thanks so much. BRAVO!!!
Lovely video showing the dev process. I'm about to start a few tiny sites, might not use Frames cause they are simple one or two page brochures, but I did want to see some ACSS in action. The cherry on top would have been spending another 5 or 10 minutes checking mobile responsive and how you might tweak things that get wonky. Especially with overlapping elements, accents, etc.
Hi Kevin ... in the video at 20:15 you show how you can "preview" your ACSS code in Bricks. What I want to ask - is it possible in Oxygen? Is there a setting where one could do the same in Oxygen?If not - can you think of anything, that could show me the code? (maybe in connection with other plugin like Microthemer, Recoda or WPcodebox) Thx in advance. PS : YES = MORE OF THE VIDEOS LIKE THIS PLEASE :)
Hello Kevin, do you have any idea why the variable created at the ID level does not overwrite the value defined on the class level? I checked with the inspector on the front end. I don't see the variable created at the ID level. Like being ignored by Bricks Builder.
@@AutomaticCSS Thanks for the reply! I have used this method several times. But now it doesn't work if I want to override it in the builder. In WpCodebox, I can overwrite the variable at the ID level without any problems. Strange... I have encountered this Class-Id override problem in other cases since the latest Bricks version. I'm wondering if anyone else has experienced this.
Great video from you, as always. Just a small note and follow-up question. :has not been supported by Firefox until now. Do you normally use a fallback with @supports or do you leave firefox out when developing websites.
I'm watching this on my MacBook Pro and RUclips only gives the 1080p quality option. Can you please record the next video in 4K or 2K or at least zoom in?
Very valuable, tutorials like this with real-life examples. I vote for more videos like this. Thanks Kevin!
A single, simple landing page like this isn't a typical situation where a user would *definitely* want to use Frames, but it offered an opportunity to show how Frames can adapt to different situations. Just a small example to illustrate a broader context. Also, notice how many decisions I **did not** have to make in order to get started with the build. ACSS handles all that initial setup for you -- you just tweak when needed. Thanks for watching!
Kevin, this was great!..Perfect REAL samples.....and practical..makes learing much easier...!
Great to hear!
I love love love love this! Kindly requesting more of these, please! For beginners like me, it is so very useful to have a full-build situation to refer to. I've watched it and taken notes. Now I'm going to go and try to duplicate exactly what you've built. And I have the notes, and the lesson to refer back to if (when!) I get stuck. It's the only way to learn this stuff!
Oh, and by the way, you're the only course instructor I've never had to change the playback speed for. You talk at a perfect clip, thank you! Better to have to back up the video to hear something again than set the whole thing on 2x to avoid falling asleep. And I love that you don't oversimplify. Give me the real stuff, at real speed, and then I can take that away and put it to use at my own speed. As a former educator, I can tell you this is absolute GOLD! Thank you!
Glad to hear! Thanks so much.
Perfect tutorial, i was hoping to see these kind of content for a while, i wish next time you can show also the final touch on perfecting responsiveness, thank you Kevin!
Awesome showcase of the power of ACSS and Frames!
It’s great that you bring these examples from real life - I’ve learned a lot again! Thank you! And more of it, please.
Loved the golden nuggets you can get from this *apparently* basic tutorial, like the use case for the pseudo-class :has. Looking forward to more advanced builds!! 😊
Glad it was helpful!
Love to see more. This was great timing because I'm trying to reconstruct a page from Oxygen and ran into the shape divider issue! I now have an even better understanding. So, Thank you!
Wonderful!
Great tutorial and something that truly adds tremendous value! I loved the fact that you took a real world example and did not take any shortcuts or cut corners. In the real world, 80% of things are standard and can be done quickly but the last 20% work is tricky (and takes 80% of the effort). Glad that you focused on getting the exact shape of the curve, the accent underlines and images etc. These type of tutorials benefit in at least two ways - 1. Showing the power of ACSS and Frames and 2. Teaching ACSS/Frames users on how to use these tools correctly while building the websites. More of such tuts will be absolutely valuable!
I would love to see more tutorials like this.
Thumbs way up on this video. I absolutely love this sort of thing. A masterclass. I love these real world examples. 👍 I have had a lot of small and large burning questions answered in this one. Golden nuggets everywhere. **Slings bag of gold over shoulder**
I personally learn best from these kinds of tutorials. Today, I learnt a lot and am appreciative of this content. Thank you, Kevin.
More to come!
Absolutely, More of This! It's great seeing how to change stuff on the backend of ACSS and have it manifested on the front end. Thanks, Kevin!
Super tutorial Kevin. Love to see more real life uses. The CSS nuggets are fantastic 💪
The process of these real professional build-outs, from design to website, is the most valuable. Thank you very much, Kevin!
Excellent stuff, cleared up a few minor ?s I had with modifying/using frames classes, etc.. These are way more valuable and should definitely keep pumping some more out like these.
Excellent tutorial! Please do more of these, they are so very helpful for us ACSS Frames users!
Love it! Not only does your work provide immense value but on top of that it's entertaining to watch and at the right tempo too. Impeccable!
🙌
Love it... Please keep posting this kind of content!!
You've provided us a professonal tool set, fantastic! Please continue weekly videos like this on how to maximize this incredible gift of ACSS and Frames in a professional site-build-workflow. Thanks KG!
Real life examples that show both automatic css in combination with frames is excellent. Learning how the software is intended to be used is really enlightening. Hoping I can find more content like this in the future - I do need to have a look yet! Awesome tutorial :)
This is one hell of a tutorial. Thanks for going through it step by step. Looking forward to see more such tutorials .
This really brought everything together for me. What a great lesson! More of examples like this would certainly be appreciated, even if it had to be in the IC.
Very very helpful. Please more of this Kevin. Wish you a nice vacation !
Thank you :)
Just entered in the world of Bricks, Acss and Frames. Great tutorial!!!😊😊More examples showing different ways to handle design challenges would be amazing. Thanks!"
Fantastic, Kevin. More tutorials like this, please.
Outstanding tutorial! Please do more of these Kevin!
More to come!
Always a nugget watching your craft. Thank you for always sharing!
Yes please, would love more of these videos, great tutorial!😊
Another golden nugget goldmine! Keep them coming 😁
One more time awasome, more videos like this would be great. Thanks once again.
Fantastic tutorial Kevin!!
This is honestly the most useful video you have put out on styling. All the squares and movement is great. However like golf the finishes are what makes a site regardless of how us SEOs feel about them. I have lost enough business over the years to client ego to know that even a perfectly top ranking client will get annoyed if they don’t get the aesthetics to match their buddies.
Thanks Kevin. I like this tutorial and I'd love to see more like this.
Great tutorial! More of these, please
We need more of these videos, design design design, love it
On it!
I was debating on if I was going to get frames during the Black Friday LTD. This tutorial is what made the purchase!
💪🏻 I gotta do more of these.
yes, i would love to see more like this
Thank you very much and yes I would love to see more tutorials like this.
Firstly, thank you for sharing this incredible video. I’ve learnt CSS Grid which is much easier than I initially thought, how to unlock more flexibility in ACSS (the control panel looks basic but there is so much one can do with it), and absolute positioning. Excellent tutorial 11/10! You’re a fantastic teacher and educator. PS: I was like nr 400! 😉
Love it! More, please.
8:27 "Oh no. Oh no no no no." ~ Kevin Hart ... Press the button, Kevin Geary. Lol
"I don't even get this close when I shave" LOL - Great video, thanks!
Glad you liked it!
Yes please, more of these showing various work-arounds to each issue you come across. Thanks.
Great tutorial!! Very much respect the precision of the css done in your products. I’ve always been a stickler for minimalist css.. no div soup LOL. Thanks again 😊
Great content Kevin.👍 Please, more videos like this. 🤠
We need moreeeeeeeee of these Kevin!!!! 😍😍😍😍😍😍😍😍😍😍😍
Please continue making these.
Wow this was really helpfull 😊. Gonna use those locally scoped variables. Would Love to See more videos like this. BTW: Happy Birthday 🎂 🎉
More of these, please! (Still amazed at the possibilities of the before and after pseudo elements).
Thank you very much for this video! This is exactly what I need and would love to see more like this!
You got it!
Great training. I like how you implemented the highlight using the text underline instead of a pseudo element.
Kevin - Great tutorial, thank you. This is helpful to see and learn as you build, especially how you simplify things in the setup (using just 2 colors and shutting off the others). Would love to see a build like this focused more on a complex blog post layout template or a really creative and challenging product page layout. Thanks as always!
loved it, please do more full builds
Thanks Kevin, really helpful!
Part 2 of this video needs to take it to how to adjust for mobile sizes. I know that ACSS/Frames has that built in for the most part, but with the elements that you added in (NEVER thought to make those elements classes!), there's some tweaking to be done. I tell all my clients, "Mobile First!" because 80% of the public will probably be looking at the site on their phones.
Great stuff, as always. I get more out of your training sessions than I ever did on courses I paid money for. A lot of that is due to your engaging style. Please continue to educate us all!
Yes I thought about doing mobile as part 2.
@@AutomaticCSS 👆
Thanks Kevin, great video tutorial/overview. I would like to be a wee bit greedy and request both -- more "example" builds like this as well as the "Here's new ACSS / Frames features". This build answered several questions I had (i.e. to help underline text, pseudo elements, ...). I did appreciate how you approached the initial "build" by selecting a Frame having a similar pattern and then working from there. The lightbulb went on with that realization.
fantastic tutorial - more like this please
As I keep moving forward in my web design journey, its wonderful to learn but also see practical tutorials to grasp what is being taught. Thank you for this @geary
Brilliant tutorial. Thank you. As a newbie with ACSS and Frames, it's great to see how to use it for different scenarios, being flexible but keeping with best practices.
Would love a tutorial building a site with ACSS, Frames, Metabox, MB Post types, MB Relationships. How to use Frames with dynamic content and custom post type query loops.
There’s one in the inner circle. But full site builds aren’t as helpful as they seem. Most of the work is front loaded. Once you get most everything setup it’s a lot of repetition.
Thank you for the walkthrough. Definitely gotten a lot of value from this on top of whatever is already on your docs and other videos. Would love more walkthroughs like these and how you deal with dynamic data as well. And please, one with Bricks’s new mega menu (quite a monster to work with now) once it’s stable. Cheers
Brillant as usual !🙏🙏
awesome stuff !!
Oh this is wonderful - many thanks
so many goodies. Please give us more!
This is gold. 🥇
More please!!!! Thank you ♥
Thanks, @Gearyco Love to see more real life uses
We 👏🏾want 👏🏾 more 👏🏾
Awesome, thank you!
Love the video as usual. Could you do a video explaining responsive grids? I always have trouble with the row ratios when stacking on mobile. Taking an example from this video, how would you style the mobile layout for the testimonial card at the bottom of the landing page?
Easy switch to 1 column grid and reset the spans.
@@AutomaticCSS Thanks for the reply. I get that you would set the column grid to 1 but what about the row grid? Do you keep that at 12? I noticed when I do this the content can be stretched out vertically on mobile. Like the row ratios are off. Then I start messing with the row count to fix it and it just gets more messed up.
Thanks Kevin, such a helpful video. I followed along but my accent--after pseudo element creates a horizontal scroll bar as it goes outside the width of the site. Would really appreciate it if you could describe how to fix this? Thanks
Add overflow hidden to the section
@@AutomaticCSS Thanks for your reply. I've tried this but it cuts off the mobile phone image. I also tried overflow-x: hidden but that creates a vertical scroll bar within the section
Great tutorial. Please let we see more examples... :)
Bravo.
Made my day, love the on-the-fly problem solving. However, I think you missed the toggle switch in the Bricks header settings, you enabled "sticky" but not "scroll on sticky" so I don't think it's a Bricks bug, again, the manual "fix" was a nice gravy add-on.
"Scroll on sticky" means that it won't be sticky until the user starts scrolling, which means it won't act as an overlay header on page load. I wanted it sticky/overlay on page load, not just on scroll.
So, still definitely a Bricks bug.
I ran into this bug as well. Made a video of it in action, but never and should have posted it in the inner circle. It was nice to see the manual fix/work-around.
@@AutomaticCSS --- I rushed to judgement, I didn't follow along until watching it all the way through, I mistook your referencing of sticky on scroll with background on scroll. However, I may have been accidently correct after all as it pertains to the bug. Today, when I was following along, I tried enabling the background color on scroll feature, like you tried to do but got the bug, and it worked fine. Is it possible a recent update resolved the issue?
Awesome info! Thank you for sharing! I have a question in the extra credit part, could you declare using the builder?, what I mean is this: for example in oxygen ( I’m sure you can do this in bricks but since I use oxy) could add the class to the container, and then in the chooser declare it a pseudo element and add the image to the background setting it in the background selector on oxy and would that work?
This video was long ago so not sure what you’re referring to.
@@AutomaticCSS bet! almost a year ago, i was wondering if you could use the builders UI to declare the ::after for some reason i like to use the builders UI to achieve most i can without going to CSS but to be honest after a few more of your videos under my belt im less and less inclined to do that and finding CSS making a lot more sense to me. btw thanks for your reply!
"You guys - I don't even get that close when I shave." LOL!
Just dont stop, dont stop!;)
I really enjoyed this. Maybe one of your best for me. Clarity on some things that I am definitely putting to use immediately. I definitely would love to see more of this. Showing how Frames can be used to build stuff and the hidden nuggets of ACSS. Thanks so much. BRAVO!!!
is there any video of buttons with icons
F*%# Yeahhhh!!! Awesome training Kevin. I may have glazed over slightly at locally scoped variables... :-/ lol...
Love it!
Lovely video showing the dev process. I'm about to start a few tiny sites, might not use Frames cause they are simple one or two page brochures, but I did want to see some ACSS in action.
The cherry on top would have been spending another 5 or 10 minutes checking mobile responsive and how you might tweak things that get wonky. Especially with overlapping elements, accents, etc.
Might do a part 2
We want more of these ❤
Well done and explained :-)
9:57 Do I have to set the Element - Container width for each breakpoint?
No
Hi Kevin ... in the video at 20:15 you show how you can "preview" your ACSS code in Bricks. What I want to ask - is it possible in Oxygen? Is there a setting where one could do the same in Oxygen?If not - can you think of anything, that could show me the code? (maybe in connection with other plugin like Microthemer, Recoda or WPcodebox)
Thx in advance.
PS : YES = MORE OF THE VIDEOS LIKE THIS PLEASE :)
I'm not previewing the CSS code. It's a CSS inptu where you can write custom CSS. The same is true in Oxygen, but it works a little different.
How do you get all of your color palettes to show at once? That would make the process a lot faster.
Import the UI Style Guide remotely. Kevin has a recent video about it.
Context menus we added v2.5 --- you can turn them on in options.
Hello Kevin, do you have any idea why the variable created at the ID level does not overwrite the value defined on the class level? I checked with the inspector on the front end. I don't see the variable created at the ID level. Like being ignored by Bricks Builder.
It does override the class, that’s why I did it that way. You can create individual styling instances.
@@AutomaticCSS Thanks for the reply! I have used this method several times. But now it doesn't work if I want to override it in the builder. In WpCodebox, I can overwrite the variable at the ID level without any problems. Strange...
I have encountered this Class-Id override problem in other cases since the latest Bricks version. I'm wondering if anyone else has experienced this.
Is/could there be a CSS variable that handles the content width for ACCS and Bricks in one place?
Yes there is. -width-vp-max but that’s about to change to a simpler -content-width in 2.6.
Great stuff!! More, please. A multi-page agency site would be awesome.
Thanks for your share ❤. Great introduction! Can you share the Figma "WorkIt" use in your video? Thanks ❤
Great video from you, as always. Just a small note and follow-up question. :has not been supported by Firefox until now. Do you normally use a fallback with @supports or do you leave firefox out when developing websites.
For now I account for Firefox on real sites. But soon it’ll be fully supported.
Great tutorial! Thank you.
Please go deeper eg. with a „unlinking classes“ and a „mixins4dummies“ tutorial.
Real-life examples are the best. Thank you!
I'm watching this on my MacBook Pro and RUclips only gives the 1080p quality option. Can you please record the next video in 4K or 2K or at least zoom in?
I zoomed in like a dozen times
@@AutomaticCSS Not for the first 20 minutes... I'll live.
This was nice
Kevin, where did you learn how to do all this?
Lots of years of practice and working.
Yes. More.
Such a shame that Frames is not available with Oxygen builder... It is such a powerful tool ! Thank Kevin for this build 😉
color management revelation at 4:50 🤩
Was hoping that would clear some questions up for a few people 🙌