ACSS 101.01: Awesomeness Out of The Box

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: https://automaticcss.com

Interested in using Frames on your sites and accessing the private Frames support and strategy community? Get a license here: https://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