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!
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!"
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!
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!
This was super helpful. I love seeing how to use ACSS and frames and how to adjust the design when the frame isn't exactly what you want. Would love more!
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!! 😊
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 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.
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!
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 :)
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.
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.
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!
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 😊
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.
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
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!!!
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!
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
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.
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.
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?
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.
Love it! More real world web page builds please. Accent before, after + locally scoped variables was nice golden nugget. You used variables for small one in ID lvl, but if we had more then one testimonial, then just You would use extra class not write in ID lvl?
@@AutomaticCSS At 1:14:16, You declare different variable values at ID level for small image at testimonial. But if we would use more then one the same testimonial, then You would use different class for that, so You don't be chump to go one by one to add them in ID lvl? I understand why You used that one in ID, but I just want to clarify what to do when there is the same picture, but different position.
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
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 need to rebuild an existing, ancient site. I will be following the GetFrames path as well. Thank god there is no Bev, just me!
So yes, more please!
Yes please, more of these showing various work-arounds to each issue you come across. Thanks.
Would love to see more like this one. Thanks
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!"
Very valuable, tutorials like this with real-life examples. I vote for more videos like this. Thanks Kevin!
Kevin, this was great!..Perfect REAL samples.....and practical..makes learing much easier...!
Great to hear!
Great content Kevin.👍 Please, more videos like this. 🤠
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 👆
Real-life examples are the best. Thank you!
Outstanding tutorial! Please do more of these Kevin!
More to come!
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.
yes, i would love to see more like this
26:32 "I don't even get this close when I shave" is EPIC 😂😂😂
This was super helpful. I love seeing how to use ACSS and frames and how to adjust the design when the frame isn't exactly what you want. Would love more!
wow this was an amazing tutorial showing how everything comes together in a design from start to finish. I vote for more videos like this one.
Yes, would love more of these. Would be great to see how you handle effects like they use on Apple’s page.
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!
Great stuff!! More, please. A multi-page agency site would be awesome.
Please continue making these.
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!! 😊
Glad it was helpful!
Great tutorial! More of these, please
Fantastic tutorial Kevin!!
It’s great that you bring these examples from real life - I’ve learned a lot again! Thank you! And more of it, please.
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!
Excellent tutorial! Please do more of these, they are so very helpful for us ACSS Frames users!
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! 😉
Yes please, would love more of these videos, great tutorial!😊
We 👏🏾want 👏🏾 more 👏🏾
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!
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.
Super tutorial Kevin. Love to see more real life uses. The CSS nuggets are fantastic 💪
This is one hell of a tutorial. Thanks for going through it step by step. Looking forward to see more such tutorials .
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!
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!
🙌
Wow this was really helpfull 😊. Gonna use those locally scoped variables. Would Love to See more videos like this. BTW: Happy Birthday 🎂 🎉
The process of these real professional build-outs, from design to website, is the most valuable. Thank you very much, Kevin!
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 :)
Very very helpful. Please more of this Kevin. Wish you a nice vacation !
Thank you :)
Love it... Please keep posting this kind of content!!
Always a nugget watching your craft. Thank you for always sharing!
loved it, please do more full builds
We need moreeeeeeeee of these 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.
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.
Thank you very much and yes I would love to see more tutorials like this.
More please!!!! Thank you ♥
One more time awasome, more videos like this would be great. Thanks once again.
Fantastic, Kevin. More tutorials like this, please.
Another golden nugget goldmine! Keep them coming 😁
Thanks Kevin, really helpful!
"I don't even get this close when I shave" LOL - Great video, thanks!
Glad you liked it!
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!
We need more of these videos, design design design, love it
On it!
This is gold. 🥇
Thanks, @Gearyco Love to see more real life uses
so many goodies. Please give us more!
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 😊
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.
More of these, please! (Still amazed at the possibilities of the before and after pseudo elements).
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.
28:37 Great! Now I'll no longer be scared of buttons. Didn't realize we could have that much control from the ACSS dashboard
39:50 Whooaah! 🤯🤯
Great training. I like how you implemented the highlight using the text underline instead of a pseudo element.
Love it! More, please.
8:27 "Oh no. Oh no no no no." ~ Kevin Hart ... Press the button, Kevin Geary. Lol
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
Just dont stop, dont stop!;)
fantastic tutorial - more like this please
Oh this is wonderful - many thanks
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!!!
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!
Thank you very much for this video! This is exactly what I need and would love to see more like this!
You got it!
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
Great tutorial. Please let we see more examples... :)
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.
We want more of these ❤
F*%# Yeahhhh!!! Awesome training Kevin. I may have glazed over slightly at locally scoped variables... :-/ lol...
Awesome, thank you!
Brillant as usual !🙏🙏
Great tutorial! Thank you.
Please go deeper eg. with a „unlinking classes“ and a „mixins4dummies“ tutorial.
awesome stuff !!
Well done and explained :-)
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.
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?
"You guys - I don't even get that close when I shave." LOL!
Love seeing :has being used! I wish Firefox would go ahead and enable it though 😢
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
Bravo.
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 🙌
Thanks for your share ❤. Great introduction! Can you share the Figma "WorkIt" use in your video? Thanks ❤
Love it!
This was nice
Yes. More.
Love it! More real world web page builds please. Accent before, after + locally scoped variables was nice golden nugget.
You used variables for small one in ID lvl, but if we had more then one testimonial, then just You would use extra class not write in ID lvl?
Can you clarify your question so I can make sure I understand?
@@AutomaticCSS At 1:14:16, You declare different variable values at ID level for small image at testimonial. But if we would use more then one the same testimonial, then You would use different class for that, so You don't be chump to go one by one to add them in ID lvl? I understand why You used that one in ID, but I just want to clarify what to do when there is the same picture, but different position.
@@kristapsvilcans yes, you could do that so all testimonial cards have same placement.
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