POWERFUL Section Spacing Control With Automatic.css

Sections are a unique type of container in web development. In fact, they're typically two containers in one – an outer wrapper and an inner wrapper. The importance of sections can't be understated. Sections are how you organize sub-topic content in web development. Each page of your site will have multiple sections and these sections need to have some key features. 1. Your sections are responsible for setting your website's gutter – the left and right padding that protects your content from touching the edges of the screen on mobile devices. 2. This gutter needs to be consistent across all your sections even when the sections themselves need to get taller (by adjusting top and bottom padding). 3. Having a consistent gutter will ensure that all your content is in perfect left-alignment and right-alignment as you scroll down the page. 4. At the same time, you need the ability to quickly and easily adjust the size of sections vertically for various types of content. A hero section often needs to be taller than other sections, for example. Some sections need to be smaller. How do other frameworks handle this type of control? Well ... they really don't. ACSS is unique in that you can perfectly control your sections on the fly with utility classes while also being able to completely break out of the utility class paradigm using custom classes with ACSS variables. (var--section-space-[size]) classes allow you to hook into the ACSS section spacing sytem with custom classes. There's even a var(--section-space-x) class for your gutter if you need to reference your site's gutter. Additionally, ACSS does something else that no other framework does – it gives you global control over all of your section padding classes and variables from a global dashboard so that you can perfectly dial in section spacing across your website. You can control the base section spacing as well as the mathematical spacing scale that all of the sizes are calculated from. When you make changes, you can see those changes reflect on the front end instantly as the entire framework recalculates to your new preferences. Yes, this means you can dial in your website's spacing ... even after the website is built! That's basically unheard of. Once you've used a feature set like this, you'll wonder how you ever developed websites without it... Interested in using Automatic.css on your sites and accessing the private ACSS support and strategy community? Get a license here: https://automaticcss.com Want more helpful dev tutorials and agency-related trainings? Check out Kevin's channel @Gearyco