Videos

In this tutorial, you'll learn how to create a custom overlapping video card that plays your video in a modal. This is perfect for situations where you want a super clean on-page presentation with the actual video playing in a lightbox on-click.

Techniques you'll learn:

– Creating a full screen section properly (Oxygen bug)
– Using GRID to overlap elements
– Using multi-layer box shadows.
– Creating an interior border with ::after
– Easily adding a pulsate animation to an icon
– Creating an on-click modal with video embed
– Adding a close icon to the modal

Get my CSS utility class framework: https://automaticcss.com

Join my Inner Circle: https://digitalambition.co/inner-circle/

Make sure you subscribe and hit the notification bell and drop a comment! Love hearing from you!

0:00 Intro
02:20 Example Design
04:20 Getting started
08:00 Creating the Grid
14:39 Creating the Cards
18:02 Adding the Play Icon
23:02 Adding the Pulsate Animation
24:55 Adding the 2-Layer Box Shadow
26:30 Adding the Red Inset Border
28:20 Adjusting the Overlap
30:00 Adding the Modal
31:32 Adding the Close Icon
35:03 Wrapping Up

100 36

2021 was the best year ever for my agency and I want to kick off 2022 by making sure you have the best year ever with your web design business!

In this hour long training I'm going to cover 3 simple techniques that are guaranteed to 2x/3x (at least) your project revenue and dramatically increase profitability while improving your process.

Even though this is an hour long training, I'm just scratching the surface here. For deep dives, spreadsheets, pricing guides, example proposals, scoping calculators, and more, make sure you join the Inner Circle --- https://digitalambition.co/inner-circle

Spend a full year with me inside the Inner Circle and it's going to be a game changer for your business.

0:00 - Intro
02:25 - The 3 Strategies
05:50 - Talk Price Early
13:01 - Bill For Everything You Deliver
58:40 - No More Milestones

161 52

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

I would gather that most people use margin-bottom when spacing elements away from other elements, but in this video I'm going to demonstrate why that's actually far less efficient. And there's some other little mini training stuff inside as well.

Now, in the grand scheme of things this isn't a magnificent breakthrough, but it'll probably save you time and frustration, so that's a win, right?

Hey, listen, it's the end of the year and I'm exhausted. I've been grinding for months to make the ACSS launch happen and I've been providing 6 months of tremendous Inner Circle value on top of all the agency work on my plate. I'm just trying to get a lighthearted training out so I can keep up with my posting schedule (but margin-top is still the best way to go, for sure) :)

From the bottom of my heart, though, I thank each and every one of you who subscribe, who participate in the comments, who share my work ... and especially the 750+ of you who are involved in the Inner Circle and the 1325+ people who purchased Automatic.css.

Look how far we've come in just 7-8 short months! 2022 is going to be insane with what I've got planned and it's all thanks to you.

https://automaticcss.com

https://digitalambition.co/inner-circle/

What camp you in? Margin-top or margin-bottom?

113 39

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

Join the waiting list for Automatic.css at https://automaticcss.com

Time to up your game and get confident with pseudo elements!

In this video you'll learn:

- What is a pseudo element?
- How do pseudo elements work?
- How to get pseudo elements to show up?
- Content vs no content
- How to position pseudo elements
- How to assign pseudo elements to custom classes
- A super practical use case for pseudo elements
- How to make a checklist with pseudo elements
- How to make a ribbon for a card
- And more!

0:00 Intro
0:56 Automatic.css LTD Update
2:21 Practical Example
3:22 How Pseudo Elements Work
14:29 Real-World Use Case
19:22 Price With Before & After
26:26 Check List & X List With Before
33:32 Creating a Ribbon with After
40:53 Wrap Up

Interested in joining my Inner Circle? https://digitalambition.co/inner-circle/

219 64

My agency is crushing it in 2021, so I thought I'd drop in for an hour or so with some tips to help you level up your digital agency or freelance business if you're feeling stuck or plateaued (or if you just love helpful insights).

If you want go to deep on these things, we're making that happen inside my Inner Circle (Over 550 active members now!): https://digitalambition.co/inner-circle/

0:00 Intro
2:25 Level up your Discovery calls
12:55 Stop selling web design
15:02 Write better proposals
21:36 Time your proposals better
23:47 Create a detailed SOW
26:02 Have clients sign an MSA
26:45 Start charging for Discovery
29:57 Start charging for project management
31:49 Start charging for copywriting and make it "mandatory"
37:38 Stop agreeing to free work inside of projects
39:50 Standardize your process
40:12 Standardize your pricing
41:41 Price for scale
44:15 Expect to win the project at the stated price
48:05 Get creative with payment plans
52:29 Stop discounting
54:24 Stop doing all the work
56:45 Get a simple project management tool and use it
57:29 Make a base website management package "mandatory"
1:01:16 Teach clients how to refer you

161 64

While Automatic.css offers full manual grid utility classes complete with column spans, row spans, column starts, and row starts, it's the ONLY utility class system to offer Auto Grids –– automatically responsive grids that don't require any mobile utility classes or span adjustments.

All the following Auto Grids are offered:

2 column
3 column
4 column
5 column
6 column
1-2 staggered
1-3 staggered
2-1 staggered
2-3 staggered
3-1 staggered
3-2 staggered

You define the grid structure on desktop and Automatic.css takes care of the mobile responsiveness for you.

In this tutorial I show you how auto grids work while also showing you how they compare to traditional grids. I also explain when you should use traditional grids and when you should use auto grids.

Automatic.css is currently available only in my Inner Circle –– https://digitalambition.co/inner-circle/

You can learn more at https://automaticcss.com

We're working on a plugin that should be ready in October/Nov. Inner Circle members will get an unbeatable LTD offer and then it'll be made publicly available once that private launch has ended.

0:00 Intro
0:57 Traditional Grids in Automatic.css
4:32 Traditional Staggered Grid in Automatic.css
7:35 Auto Grids
12:05 Auto Staggered Grids
14:00 When to Use Auto Grids

133 38

I'm a huge fan of grid utility classes, but there's a common scenario where you should avoid using them at all costs.

In this video, I show you the common scenario, what falling into the trap looks like, and what to do instead.

What you'll also learn:

- How to create a grid with utility classes
- How to create a grid with the Oxygen grid builder
- How to assign grid styles to a custom class

Check out Automatic.css - https://automaticcss.com

Join the Inner Circle - https://digitalambition.co/inner-circle/

Hope you found this valuable!

133 48

Tooltips aren't part of vanilla Oxygen and they're often a pain in the ass to create when you need them for a project.

Many people turn to add-on plugins for this, but with Automatic.css it's not necessary. Automatic custom tooltips are built right into our utility class framework.

What's unique about these tooltips is that you can manipulate their position and design simply by using other classes from the Automatic.css system. This means tooltips hook into the Automatic.css color system, typography system, width system, spacing system, and more (including access to box-shadows, rounded corners, etc.).

Tooltips can be added in seconds to buttons, text elements, text spans, icons ... practically anything. Best of all, ZERO shortcodes are needed to create these tooltips. You can create them in seconds right inside the Oxygen builder using vanilla Oxygen data attributes.

Oh, and the default tooltip design is completely controllable so that when you add tooltips it looks exactly how you want it to look from the jump without having to add additional classes.

Learn more: https://automaticcss.com

Inner Circle: https://digitalambition.co/inner-circle/

Hope you like!

121 47

Have you ever put content in a section and then wanted an image or another element in that section to be able to be wider than the default section width?

Did you try changing the default section width and then limiting the width of everything but the element you wanted to be wider? Stop that nonsense.

With Automatic.css you have a magic wand for making any element break outside of the constraints of the default section width (or any container it happens to be in, really).

And ... like everything else in the Automatic.css section ... it's automatically responsive with no additional work.

Watch!

Learn More: https://automaticcss.com/

Cheat Sheet: https://automaticcss.com/cheat-sheet/

Inner Circle: https://digitalambition.co/inner-circle/

120 33

Automatic.css has a fully automatic color system for use with your project's brand colors, saving a tremendous amount of time and future-proofing any color changes across the site.

There are 4 primary brand colors and 7 automatically generated variations of each color: hover, ultra-light, light, medium, dark, ultra-dark, and complimentary along with six automatically generated opacities. There's also black, white, and 5 grey shades. How cool is that?

Take a look!

Learn More: https://automaticcss.com/

Cheat Sheet: https://automaticcss.com/cheat-sheet/

Inner Circle: https://digitalambition.co/inner-circle/

0:00 Intro
0:50 Styling a Hero With Background Overlay
4:30 The Color System
7:15 Making a Global Color Change

118 36