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!"
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!
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!
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!
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!
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!
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! 😉
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.
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!! 😊
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!
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!
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.
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.
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.
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.
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.
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 😊
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?
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
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!!!
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.
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.
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!
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
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!"
Yes please, more of these showing various work-arounds to each issue you come across. Thanks.
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!
Real-life examples are the best. Thank you!
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.
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!
Would love to see more like this one. Thanks
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!
Kevin, this was great!..Perfect REAL samples.....and practical..makes learing much easier...!
Great to hear!
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.
Thank you, Kevin!
Very valuable, tutorials like this with real-life examples. I vote for more videos like this. Thanks Kevin!
Outstanding tutorial! Please do more of these Kevin!
More to come!
yes, i would love to see more like this
Great content Kevin.👍 Please, more videos like this. 🤠
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!
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 👆
Please continue making these.
The process of these real professional build-outs, from design to website, is the most valuable. Thank you very much, Kevin!
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!
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!
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! 😉
Awesome showcase of the power of ACSS and Frames!
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! 🤯🤯
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.
Excellent tutorial! Please do more of these, they are so very helpful for us ACSS Frames users!
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!
It’s great that you bring these examples from real life - I’ve learned a lot again! Thank you! And more of it, please.
Yes, would love more of these. Would be great to see how you handle effects like they use on Apple’s page.
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!
🙌
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.
Great stuff!! More, please. A multi-page agency site would be awesome.
This is one hell of a tutorial. Thanks for going through it step by step. Looking forward to see more such tutorials .
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!
Yes please, would love more of these videos, great tutorial!😊
Fantastic tutorial Kevin!!
Great tutorial! More of these, please
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!
We 👏🏾want 👏🏾 more 👏🏾
Always a nugget watching your craft. Thank you for always sharing!
Thanks, @Gearyco Love to see more real life uses
Super tutorial Kevin. Love to see more real life uses. The CSS nuggets are fantastic 💪
Love it... Please keep posting this kind of content!!
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.
One more time awasome, more videos like this would be great. Thanks once again.
We need moreeeeeeeee of these Kevin!!!! 😍😍😍😍😍😍😍😍😍😍😍
Fantastic, Kevin. More tutorials like this, please.
Thanks Kevin, really helpful!
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.
Another golden nugget goldmine! Keep them coming 😁
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!
26:32 "I don't even get this close when I shave" is EPIC 😂😂😂
More please!!!! Thank you ♥
Thanks Kevin. I like this tutorial and I'd love to see more like this.
This is gold. 🥇
loved it, please do more full builds
We need more of these videos, design design design, love it
On it!
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 :)
Thank you very much and yes I would love to see more tutorials like this.
so many goodies. Please give us more!
Great tutorial! Thank you.
Please go deeper eg. with a „unlinking classes“ and a „mixins4dummies“ tutorial.
8:27 "Oh no. Oh no no no no." ~ Kevin Hart ... Press the button, Kevin Geary. Lol
Oh this is wonderful - many thanks
Great training. I like how you implemented the highlight using the text underline instead of a pseudo element.
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.
"I don't even get this close when I shave" LOL - Great video, thanks!
Glad you liked it!
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
Love it! More, please.
Wow this was really helpfull 😊. Gonna use those locally scoped variables. Would Love to See more videos like this. BTW: Happy Birthday 🎂 🎉
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.
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 😊
Just dont stop, dont stop!;)
Awesome, thank you!
Yes. More.
We want more of these ❤
Bravo.
More of these, please! (Still amazed at the possibilities of the before and after pseudo elements).
F*%# Yeahhhh!!! Awesome training Kevin. I may have glazed over slightly at locally scoped variables... :-/ lol...
Thanks for your share ❤. Great introduction! Can you share the Figma "WorkIt" use in your video? Thanks ❤
fantastic tutorial - more like this please
Love seeing :has being used! I wish Firefox would go ahead and enable it though 😢
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?
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
awesome stuff !!
Such a shame that Frames is not available with Oxygen builder... It is such a powerful tool ! Thank Kevin for this build 😉
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!!!
Brillant as usual !🙏🙏
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.
Great tutorial. Please let we see more examples... :)
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
"You guys - I don't even get that close when I shave." LOL!
Love it!
Well done and explained :-)
This was nice
color management revelation at 4:50 🤩
Was hoping that would clear some questions up for a few people 🙌
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!
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