Full Landing Page Build With Frames & ACSS
HTML-код
- Опубликовано: 4 окт 2024
- Many people ask if Frames can be used to help build a custom page or website design handed over by an independent designer. In other words, a situation where Frames wasn't the inspiration for the design.
This video demonstrates the use of Frames in that exact scenario - building a custom landing page from an independent designer. It’s a small but strong example of the flexibility and adjustability of Frames.
Along the way, you'll learn many things unrelated to Frames and ACSS as well. Here's a complete list of things covered in this tutorial:
✅ Configuring colors in ACSS
✅ Uploading custom fonts
✅ Customizing button styling with ACSS
✅ Finding Frames to match an existing design
✅ Editing Frames
✅ How to add & manage custom shape dividers
✅ How to add and manage custom accent elements
** GET Automatic.css & Frames **
Interested in using Automatic.css on your sites and accessing the private ACSS support and strategy community? Get a license here: automaticcss.com
Interested in using Frames on your sites and accessing the private Frames support and strategy community? Get a license here: getframes.io
Want more helpful dev tutorials and agency-related trainings? Check out Kevin's channel:@Gearyco
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!
Yes please, more of these showing various work-arounds to each issue you come across. Thanks.
Very valuable, tutorials like this with real-life examples. I vote for more videos like this. Thanks Kevin!
"I don't even get this close when I shave" LOL - Great video, thanks!
Glad you liked it!
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 👆
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!
Thank you, Kevin!
Real-life examples are the best. Thank you!
Yes, would love more of these. Would be great to see how you handle effects like they use on Apple’s page.
Kevin, this was great!..Perfect REAL samples.....and practical..makes learing much easier...!
Great to hear!
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 stuff!! More, please. A multi-page agency site would be awesome.
Please continue making these.
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!
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.
It’s great that you bring these examples from real life - I’ve learned a lot again! Thank you! And more of it, please.
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!
Fantastic tutorial Kevin!!
26:32 "I don't even get this close when I shave" is EPIC 😂😂😂
Great tutorial! More of these, 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!
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?
We 👏🏾want 👏🏾 more 👏🏾
Awesome showcase of the power of ACSS and Frames!
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.
Love it... Please keep posting this kind of content!!
Super tutorial Kevin. Love to see more real life uses. The CSS nuggets are fantastic 💪
loved it, please do more full builds
The process of these real professional build-outs, from design to website, is the most valuable. Thank you very much, Kevin!
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!
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.
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!
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.
Love it! More, please.
Thanks Kevin, really helpful!
This is gold. 🥇
8:27 "Oh no. Oh no no no no." ~ Kevin Hart ... Press the button, Kevin Geary. Lol
We need moreeeeeeeee of these Kevin!!!! 😍😍😍😍😍😍😍😍😍😍😍
Excellent tutorial! Please do more of these, they are so very helpful for us ACSS Frames users!
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 :)
More please!!!! Thank you ♥
Great tutorial! Thank you.
Please go deeper eg. with a „unlinking classes“ and a „mixins4dummies“ tutorial.
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!
Fantastic, Kevin. More tutorials like this, please.
Bravo.
Oh this is wonderful - many thanks
Always a nugget watching your craft. Thank you for always sharing!
Yes please, would love more of these videos, great 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.
Outstanding tutorial! Please do more of these Kevin!
More to come!
Another golden nugget goldmine! Keep them coming 😁
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!
🙌
yes, i would love to see more like this
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!!!
We need more of these videos, design design design, love it
On it!
More of these, please! (Still amazed at the possibilities of the before and after pseudo elements).
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.
Very very helpful. Please more of this Kevin. Wish you a nice vacation !
Thank you :)
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.
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 😊
We want more of these ❤
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.
so many goodies. Please give us more!
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.
Just dont stop, dont stop!;)
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
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
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!
Great content Kevin.👍 Please, more videos like this. 🤠
Thank you very much for this video! This is exactly what I need and would love to see more like this!
You got it!
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.
Awesome, thank you!
Such a shame that Frames is not available with Oxygen builder... It is such a powerful tool ! Thank Kevin for this build 😉
Love seeing :has being used! I wish Firefox would go ahead and enable it though 😢
awesome stuff !!
F*%# Yeahhhh!!! Awesome training Kevin. I may have glazed over slightly at locally scoped variables... :-/ lol...
fantastic tutorial - more like this please
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
Wow this was really helpfull 😊. Gonna use those locally scoped variables. Would Love to See more videos like this. BTW: Happy Birthday 🎂 🎉
Thanks, @Gearyco Love to see more real life uses
Brillant as usual !🙏🙏
Yes. More.
Well done and explained :-)
Great tutorial. Please let we see more examples... :)
Love it!
"You guys - I don't even get that close when I shave." LOL!
Thanks for your share ❤. Great introduction! Can you share the Figma "WorkIt" use in your video? Thanks ❤
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.
This was nice
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.
color management revelation at 4:50 🤩
Was hoping that would clear some questions up for a few people 🙌
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.