ACSS 101.01: Awesomeness Out of The Box
HTML-код
- Опубликовано: 13 июл 2024
- One of the biggest headaches for every web design project is getting started. This is because every project has a bunch of different setup requirements and demands a ton of decision making.
For most developers, this means that you're experiencing headaches and decision fatigue right from the jump, before you start building anything. Either that, or you skip all the decision making and setup and just start building, creating a choatic, unorganized mess of a project.
With ACSS, 90% of the decision-making and 95% of the setup is already done for you, without creating any limitations with regard to customization.
Getting started with an ACSS-powered project is an absolute breeze, with hardly any setup required.
In fact, the second you activate ACSS, it's already working hard for you! In this video, we're going to explore 10 key things that ACSS does for you out of the box, with zero setup, and we'll compare that to what a non-ACSS-powered project looks like.
In the rest of the course, we'll explore all the features of ACSS in detail, teach you the most efficient and maintainable page building workflow with ACSS, and teach you the reasoning and philosophy behind ACSS and how it aligns with modern web design principles.
By the end of this course you'll be an ACSS Pro and you'll be employing the most efficient and maintainable page building workflow perhaps of all time.
See you in the next lesson!
---
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
0:00 What You'll Learn
02:15 Automatic Features Intro
03:50 The Big Problem With Typical Project Setup
04:31 Responsive Section Padding & Gutter
08:48 Scale-Based Responsive Spacing, Contextual Spacing, & Auto Gap
14:34 Smart Spacing
21:07 Scale-Based Responsive Typography
23:08 Auto Orphan Elimination
25:32 Color System
27:27 Buttons & Links, Transition System, & Focus Styling
30:03 Radius System & Auto Radius
33:58 Auto Object Fit
36:00 Toolbox & Conclusion 
Развлечения
ACSS is now an essential part of my workflow. Can't imagine building a website without it. In fact, I'd be crazy not to. Kudos Kevin for prioritising customer education like no other. 🙏
Everyone needs to take PB101 to appreciate what ACSS does for us.
Every time I watch a Kevin Geary video I feel 1% smarter and 1% less chump. Looking forward to the rest of the series.
I found Kevin by taking PB101 so I already know ACSS 101 is going to have have massive value. Thanks for all you do!
I have been an ACSS user since day 0. Looking at the stage of ACSS is just a confirmation of how good a product can get when a true leader is on board. Thanks for the ACSS 3.0, this awesome course, and how we can scale up our development of websites. ACSS is a must for me when using Bricks, and of course, Frames to scale even further the efficiency of building great sites. Kudos Kevin!
Appreciate it! A real OG!
Excellent. We've used ACSS on almost every website we've built the last year, and it's just a tremendous game changer for building faster and maintainably AND to a higher standard without limiting your creativity. Can't imagine NOT having a context menu-first CSS framework on any site I build again. BIG UP ACSS TEAM!🙌
🙌
What a product! Looking forward to the rest of the series!
I own the ACSS plugin from the beginning. I am amazed how much the tool has evolved. I am sure I will learn how to use it better with this new series. Thank you so much Kevin 😃
Dude you're like my favorite pizza place. You just keep delivering. This is gold, I look forward to more!
🍕
It is amazing how one keeps seeing how deep ACSS is with each video. I started using ACSS from the get go and I am sure this series will show a lot of us a lot more than we thought existed. I can almost bet Kevin himself can't remember all the features.
Just joined the Bricks club and purchased ACSS.
Appreciate the coding and your education approach! 🤓
After transitioning to Bricks a few years back, I discovered ACSS and later Frames. I wasn't quite sure what the benefits were but upon listening, learning, and researching, I've discovered ACSS is so very helpful. This is especially true for someone that wants to make professional, maintainable, accessible websites. ACSS has helped elevate my development in countless ways that I didn't even know existed prior to jumping in. I know this course, similar to the PB101 course, will be a tremendous benefit. While still relatively new to ACSS, I know this course will really help teach me more that the framework provides and will help improve my development experience not only for me but also current and future clients.
The best - pure and simple. ACSS has always been a phenomenal product, but the care, thought and attention to detail that has been put into this new version is mind blowing. Thanks Kevin and team. Can't wait for the next exciting instalment.
I’ve been there since the beginning - Kevin and his team are unique. I learn and learn and learn. Thank you 🙏
Wait what! I don't have to think anymore? :)
But seriously, ACSS is a huge time saver, and for my workflow a "must have".
Excellent start to what I expect will be an excellent course! Thanks, Kevin!
I've been using ACSS for 2 years and I still learn things from every video. Thanks Kevin :-)
A few months ago, I asked Kevin if we could get something like this, and now he finally did it. Great work
Fantastic Kevin and perfectly detailed. I'm so looking forward to the rest of this series.
I'm on it all the way. I did expect it to happen tomorrow but today is awesome. Thanks Kevin
Whoop!! Was expecting this tomorrow so a day early is awesome
Thank you so much Kevin, and shout out to your Dev Team!
Congratulations! I wish you a lot of success man great work
Thank you very much Kevin. Your hard work teaching us is much appreciated 😊
Awesome work Kevin and team. 🎉 Feels like Christmas. 😊 Looking forward to building my first site with Bricks and ACSS.
Yeaaah! ACSS 101 here we go!! 🎉🎉
Excellent fast paced intro into how to get started with ACSS. Straight to the meat and potatoes with the side by side comparrisons of using a framework, with all the benefits, and not using a framework, with no benefits at all. Promises to be a great series with in depth explanations behind the rational of using a tool like ACSS.
Woot woot gonna be awesome 🙌
Thanks for breaking the game again ;)
Please Sir I want more. NOW! NOW NOW! 😁
This "teaser" just shows how much time and effort KG and the team have put into this tool that will make website development flow with ease.
I don't really want other people to have it (😁), but I have no doubt that it will become a standard feature in every designer/developer toolbox.
An excellent introduction, Kevin!
Just got to ACSS 3.0 with converting my multi vender store, also first time bricks so this is amazing, thank you!
Thanks for the detail, not just a fill-in the blank.
ACSS has definitely been a quality of life/work improvement. It made me more confident in building scalable and maintainable websites.
Excellent introduction!
Excellent. Looking for the next lesson.
i just love you man. You have great spirit .
Thx!
Your guidance has been invaluable, and I'm incredibly grateful for all that you've taught me about business. Your insights have truly been transformative, and I can't thank you enough for the positive impact you've had on my life. Thank you sincerely.
🙏🙏🙌
Much awaited video.
I purchased ACSS LTD a while ago but never used it on client website as I don't know how to use it properly.
let's do it!
Great stuff, thx Kevin
Thanks Kevin!!
Gonna watch it with "teaspoons" 🎉 thank you 🎉
Hell about time!😮
I remember when I used to listen to David Attenborough while falling asleep ... and then Kevin came.
It's a good start. The video chapters are finally being used, which means the lessons can also be used as a reference book. Unfortunately, this wasn't the case with PB101.
ACSS is set to be a game-changer in the world of website creation, giving users the power to stay in control.
Fantastic, captivating and convincing product presentation ✨✨✨✨I'm glad I bought Bricks and Automatic.css. Coming from Divi and Elementor, I look forward to working with Bricks and Automatic.css in the future. I'm especially looking forward to the next chapters of the ACSS 101 course with Kevin Geary.
Nice one. Really excited for the rest of the course to pick up some things I might have missed. Will you also add some (bonus) lessons on Frames?
More of this please...
Kevin....thanks for PB101 and now ACSS 101....I finally switched to Bricks+ACSS ecosystem....really optimistic and thrilled right now.....only request is (if I may) Please upload ACSS 101 videos ASAP ....I just wana create top class websites from day 1.....anyway thanks a lot...🤞👍
They're not made yet. I have to make them as we go ;)
@@AutomaticCSS I am aware of that....just being selfish to reqest you to keep that on high priority....🙂
I'm sold.
Hell yeah! Was actually looking for something like this. Edit: loved the lesson! Any ETA on lesson 2 haha?
Woah... better audio this time. Before it sounded normalized, this is much easier to listen, too. I like that the color scheme of the talking head background is grey everywhere, too.
Hmm, haven't changed the audio much...
AOTB = Awesomeness Out of The Box ;-)
Thought I was behind in version then realized you are using v3 beta.
Where/how do we disable auto orphan elimination, Kevin? I'm just thinking that an orphan might be okay/tolerable if it's a card description, centered text, 3 lines where the 3rd line is 1 word only. Say I want to disable it to cards only, how do I do that?
It's definitely undesirable in cards, especially undesirable with centered text, and in almost all other instances. In fact, I've never seen a designer tolerate an orphan in any situation. But you can add the .unbalance class to anything you want to turn off balancing for.
If you want a better life, you MUST have ACSS in your toolbox.
I'm trying to follow this, but I don't see the Automatic CSS sidebar panel shown at about 16:15. If I click on a container or content section while in the Bricks editor, I get the menu on the left with the Content and Style tabs, and if I right-click the column or row gap, or any other element, the Automatic CSS menu pops up, but I don't get the Smart Spacing options. Maybe a question for the forum.
This course is based on ACSS 3.0
@@AutomaticCSS Thanks. I installed the beta 2 release the other day but rolled back to 2.8.3 because I had some errors. Looking forward to the final release.
About the automatic remove orphans. Can i turn it off since my language does not primary use the space to break words. Let say 3 words can put together without spacing.. we mainly use meaning to break words
Of course. Just set text-wrap on headings and text to "wrap" instead of "pretty" in the dashboard.
Are you using ACSS version 3.0 in the video?
Yep
Crazy question, is this 3.0.0 Beta? I can't for the life of me figure out how you are getting those ACSS panels on the right (color, spacing, etc).
For sure! Welcome to the party!
I feel like a real chump, but I am sure someone will enlighten me. At 16:15in the video, he opens ACSS, which shows to the right of the page. When I click on the same button, it opens ACSS in the admin area. I would love to be able to make those global changes and see them reflected on a real page. Where am I going wrong? I am using ACSS 2.8.3. Maybe it is a version 3 feature.
Yes, 3.0 is completely different.
ACSS looks interesting , but I don’t get the commentary about stuff like buttons. Every page builder has global styles for buttons. Why is this a feature?
When we get to the lesson on buttons you’ll see exactly why. Patience, grasshopper.
Is this part of Netscape? I was in a coma for a few years...
?