watch

Videos

GRID JIU JITSU IN OXYGEN!

I wanted to do a tutorial on how to use Oxygen's grid builder, but I didn't want to do some boring nonsense like "here's what this field does ... and here's what this field does...", so I'm creating a follow-along tutorial of a real-world grid structure you'll see and use everywhere.

And this isn't just for beginners, my friend. I'm baking some grid jiu jitsu moves into this tutorial that will absolutely SYA (save your ass) and make your life sooooo much easier on bigger pages or sites. Here's what it covers:

• How Grid works in Oxygen Builder
• Grid Builder pitfalls to look out for
• How to create a 2-3 grid structure with column spans
• How to change your grid structure on mobile
• How to auto-stagger your grid using nth-of-type
• How to auto space your grids with last-of-type
• How to change image order on mobile
• How to properly name grid components with custom classes

This is 45 straight minutes of practical "best practice" skills that will most certainly elevate your game and  I went slow to make sure it's easy to follow along with. Have fun!

THIS TUTORIAL REQUIRES NO PLUGINS, NO UTILITY CLASSES, ETC. IT'S VANILLA OXYGEN BUILDER. And yes, this works with repeaters too (with a few tweaks).

Join the Inner Circle - https://digitalambition.co/inner-circle/
Get Automatic.css - https://automaticcss.com

0:00 Intro
1:00 Examining Trello's Features Grid
2:40 Follow Along
3:40 Tutorial Begins
6:30 Oxygen's Yucky Defaults
10:00 How Column Spans Work
13:00 Image Wrapper Tip
15:00 Adding the Content
17:05 Custom Classes Best Practices
22:45 Mobile Responsiveness
27:43 Auto Spacing Between Grids
30:27 Auto Staggering the Grids
38:20 Changing Image Order on Mobile
41:05 Admiring Our Handy Work

GRID JIU JITSU IN OXYGEN!

I wanted to do a tutorial on how to use Oxygen's grid builder, but I didn't want to do some boring nonsense like "here's what this field does ... and here's what this field does...", so I'm creating a follow-along tutorial of a real-world grid structure you'll see and use everywhere.

And this isn't just for beginners, my friend. I'm baking some grid jiu jitsu moves into this tutorial that will absolutely SYA (save your ass) and make your life sooooo much easier on bigger pages or sites. Here's what it covers:

• How Grid works in Oxygen Builder
• Grid Builder pitfalls to look out for
• How to create a 2-3 grid structure with column spans
• How to change your grid structure on mobile
• How to auto-stagger your grid using nth-of-type
• How to auto space your grids with last-of-type
• How to change image order on mobile
• How to properly name grid components with custom classes

This is 45 straight minutes of practical "best practice" skills that will most certainly elevate your game and I went slow to make sure it's easy to follow along with. Have fun!

THIS TUTORIAL REQUIRES NO PLUGINS, NO UTILITY CLASSES, ETC. IT'S VANILLA OXYGEN BUILDER. And yes, this works with repeaters too (with a few tweaks).

Join the Inner Circle - https://digitalambition.co/inner-circle/
Get Automatic.css - https://automaticcss.com

0:00 Intro
1:00 Examining Trello's Features Grid
2:40 Follow Along
3:40 Tutorial Begins
6:30 Oxygen's Yucky Defaults
10:00 How Column Spans Work
13:00 Image Wrapper Tip
15:00 Adding the Content
17:05 Custom Classes Best Practices
22:45 Mobile Responsiveness
27:43 Auto Spacing Between Grids
30:27 Auto Staggering the Grids
38:20 Changing Image Order on Mobile
41:05 Admiring Our Handy Work

169 62

YouTube Video VVU0S1h0RmRzXzNSN3h3R1Y3OXJaeXNnLjBjSHhtQV85aXhB

How to Create a Custom Responsive Grid in Oxygen (Best Practices & Grid Jiu Jitsu Tricks!)

2.7K views December 7, 2021 11:00 am

7 months ago I recorded a tutorial called How to Setup Oxygen (Best Global Settings). It got 44,000 views and introduced key concepts of fluid responsive typography and spacing.

Today, I'm proud to say that tutorial is no longer relevant. You can now install the Automatic.css plugin and start building without worrying about clamp functions, figuring out typography sizes, trying to adjust spacing, etc.

Not only will all spacing and typography follow a perfect mathematical scale and be automatically responsive, it's all completely customizable via the Automatic.css plugin dashboard.

You also get access to the Automatic.css color system with auto-generated shades and transparencies (also customizable).

And of course there's the full utility class and variable system at your fingertips for building sites faster, easier, and more consistent than ever before.

Automatic.css is available RIGHT NOW at https://automaticcss.com

How is it different and better? Read this: https://public.3.basecamp.com/p/ZJqqFSGFKPnkUPMTckhH98rj

Here's the cheat sheet: https://automaticcss.com/cheat-sheet/

Here's the roadmap: https://automaticcss.com/roadmap/

This video only covers about 10% of the system. It's mainly designed to help you set up the system and get to building. There's a full setup guide and user's guide in our private ACSS community.

Over 1000 people have already purchased and started using Automatic.css in just a week. It's here to stay ... and take over.

0:00 Intro
2:08 Oxygen Setup
8:30 Required Plugin Setup
11:07 Building a Simple Landing page
12:38 Creating Primary Template
22:30 Landing Page Hero
27:45 Main Content Section
44:25 Color Changes
47:55 Typography Changes
56:55 Spacing Adjustments
1:00:55 Dual Layer Fallbacks

7 months ago I recorded a tutorial called How to Setup Oxygen (Best Global Settings). It got 44,000 views and introduced key concepts of fluid responsive typography and spacing.

Today, I'm proud to say that tutorial is no longer relevant. You can now install the Automatic.css plugin and start building without worrying about clamp functions, figuring out typography sizes, trying to adjust spacing, etc.

Not only will all spacing and typography follow a perfect mathematical scale and be automatically responsive, it's all completely customizable via the Automatic.css plugin dashboard.

You also get access to the Automatic.css color system with auto-generated shades and transparencies (also customizable).

And of course there's the full utility class and variable system at your fingertips for building sites faster, easier, and more consistent than ever before.

Automatic.css is available RIGHT NOW at https://automaticcss.com

How is it different and better? Read this: https://public.3.basecamp.com/p/ZJqqFSGFKPnkUPMTckhH98rj

Here's the cheat sheet: https://automaticcss.com/cheat-sheet/

Here's the roadmap: https://automaticcss.com/roadmap/

This video only covers about 10% of the system. It's mainly designed to help you set up the system and get to building. There's a full setup guide and user's guide in our private ACSS community.

Over 1000 people have already purchased and started using Automatic.css in just a week. It's here to stay ... and take over.

0:00 Intro
2:08 Oxygen Setup
8:30 Required Plugin Setup
11:07 Building a Simple Landing page
12:38 Creating Primary Template
22:30 Landing Page Hero
27:45 Main Content Section
44:25 Color Changes
47:55 Typography Changes
56:55 Spacing Adjustments
1:00:55 Dual Layer Fallbacks

238 85

YouTube Video VVU0S1h0RmRzXzNSN3h3R1Y3OXJaeXNnLmNvVFBLV3JnSWhR

How to Setup Oxygen Builder With Automatic.css (Includes Landing Page Tutorial!)

11.1K views November 23, 2021 4:27 pm