### Start Local Development Server

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/README.md

Starts a local development server for live preview. Changes are reflected without server restart.

```bash
yarn start
```

--------------------------------

### Install Dependencies

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/README.md

Installs project dependencies using Yarn.

```bash
yarn
```

--------------------------------

### Get All Settings

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/cli/settings.md

Retrieves all Automatic.css settings in JSON format. This is useful for a complete overview of the current configuration.

```bash
wp acss settings get
```

--------------------------------

### Customizing Scale for Grow and Shrink Effects

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/effects/visible-effects.md

Control the starting scale for grow and shrink effects using `--visible-scale-start` and `--visible-scale-shrink` respectively. This example sets the grow effect to start at 80% scale.

```css
.my-element {
  --visible-scale-start: 0.8;  /* Grow: start at 80% */
  --visible-scale-shrink: 1.2; /* Shrink: start at 120% */
}
```

--------------------------------

### Get All Settings as YAML

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/cli/settings.md

Retrieves all Automatic.css settings formatted as YAML. This can be useful for human-readable configuration inspection.

```bash
wp acss settings get --format=yaml
```

--------------------------------

### Basic Flex Grid Setup

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/flexbox/flex-grids.md

Apply the `?flex-grid` recipe to a parent container to enable flexbox-based grid layouts. Unbalanced items will be centered at the bottom by default.

```css
.my-grid {
  ?flex-grid;
}
```

--------------------------------

### Customizing Scale for Grow/Shrink Effects

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/effects/entrance-effects.md

Control the starting scale for grow and shrink entrance effects using `--enter-scale-start` (for grow) and `--enter-scale-shrink` (for shrink).

```css
.my-element {
  --enter-scale-start: 0.8;  /* Start at 80% for grow */
  --enter-scale-shrink: 1.2; /* Start at 120% for shrink */
}
```

--------------------------------

### Customizing Starting Opacity for Fade Effect

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/effects/visible-effects.md

Modify the starting opacity for the fade effect by setting the `--visible-opacity-start` variable. This example starts the fade from 20% opacity.

```css
.my-element {
  --visible-opacity-start: 0.2; /* Start at 20% opacity instead of fully transparent */
}
```

--------------------------------

### Get WP-CLI Help for Automatic.css

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/cli/index.md

Use the `wp help acss` command to view all available subcommands and their descriptions. You can also get help for specific subcommands like `wp help acss settings`.

```bash
wp help acss
wp help acss settings
wp help acss settings set
```

--------------------------------

### Example: Gradient Overlay HTML Usage

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/overlays/custom-overlays.md

Demonstrates how to use a pre-configured gradient overlay in your HTML structure. Ensure the overlay is configured in the ACSS dashboard first.

```html
<div class="overlay-dark-gradient">
  <img src="hero.jpg" alt="Hero">
  <div class="hero__content">
    <h1>Title appears above gradient</h1>
  </div>
</div>
```

--------------------------------

### Direct Children Spacing Example

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/spacing/smart-spacing.md

Demonstrates a scenario where Smart Spacing is applied correctly because the elements are direct children of the target container.

```html
<div class="brxe-text">
    <h2>Heading</h2>
    <p>This is a paragraph.</p>
</div>
```

--------------------------------

### CSS Example: Using Utility Class for Background

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/color-assignments/automatic-color-relationships.md

This example demonstrates the correct way to set a background color using an ACSS utility class to trigger automatic color relationships. Using CSS variables for background colors will not activate this feature.

```css
.my-hero {
  background: var(--bg-ultra-dark);
}
```

--------------------------------

### Show Automatic.css Status (Default)

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/cli/status.md

Displays a human-readable summary of the Automatic.css installation, including plugin information, active integrations, CSS file status, settings count, and feature flags.

```bash
wp acss status
```

--------------------------------

### Example Doctor Output

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/cli/doctor.md

This example shows the typical output of the `wp acss doctor` command when run without any specific format or fix options. It details the status of environment, file system, plugin health, configuration, CSS files, integrations, and recent activity.

```bash
$ wp acss doctor
Automatic.css Doctor
====================

Environment
  ✓ PHP version: 8.2.10 (requires 8.1+)
  ✓ WordPress version: 6.4.2 (requires 5.9+)
  ℹ WP_DEBUG: disabled

File System
  ✓ CSS directory exists: /wp-content/uploads/automatic-css
  ✓ CSS directory writable: yes
  ✓ Activity log: accessible

Plugin Health
  ℹ Plugin version: 4.0.0
  ✓ DB version: 4.0.0 (up to date)
  ✓ Settings: 487 settings configured
  ✓ Upgrade lock: not set
  ✓ Delete lock: not set

Configuration
  ✓ framework.json: loaded successfully
  ✓ Utility expansions: loaded successfully

CSS Files
  ✓ automatic: 312 KB, 2 hours ago
  ✓ automatic-variables: 48 KB, 2 hours ago

Integrations
  ✓ Bricks: active
  ℹ Gutenberg: not active

Recent Activity
  ✓ Recent errors: none
  ℹ Total events logged: 342

Summary: 12 passed, 0 warnings, 0 errors

```

--------------------------------

### Column Span Example

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/grids/grid-classes-standard.md

Control how many columns a grid cell spans using `.col-span--N` classes. This example makes a cell span two columns.

```html
<div class="grid--3">
  <div>Spans 1</div>
  <div class="col-span--2">Spans 2 Columns</div>
  <div>Spans 3</div>
</div>
```

--------------------------------

### Example: Dynamic Opacity on Hover

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/overlays/custom-overlays.md

Implement a dynamic opacity change on hover for an element with a custom overlay. This uses CSS transitions on the `--overlay-opacity` custom property.

```css
.card {
  --overlay-opacity: 0.7;
  transition: --overlay-opacity 0.3s ease;
}

.card:hover {
  --overlay-opacity: 0.3;
}
```

--------------------------------

### Include a Mixin with a Style Argument

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/mixins/what-are-mixins.md

Pass an argument to a mixin to customize its output. This example shows how to specify a 'secondary' button style.

```CSS
.my-custom-button {
  @include btn(secondary);
}
```

--------------------------------

### Monitor Deployments with JSON Output

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/cli/doctor.md

This example demonstrates how to pipe the JSON output of the doctor command to `jq` to check for any errors. If errors are found, the command exits with a non-zero status, which can be used to fail a deployment process.

```bash
wp acss doctor --format=json \
  | jq -e '[.. | objects | select(.status == "error")] | length == 0' \
  || exit 1
```

--------------------------------

### Responsive Grid Columns

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/grids/grid-classes-standard.md

Implement responsive grid layouts by combining base grid classes with breakpoint-specific classes. This example shows a four-column grid on desktop, two columns at the 'L' breakpoint, and one column at the 'M' breakpoint.

```html
<div class="grid--4 grid--l-2 grid--m-1">
  <div>Cell 1</div>
  <div>Cell 2</div>
  <div>Cell 3</div>
  <div>Cell 4</div>
</div>
```

--------------------------------

### Basic Link with Icon

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/accessibility/hidden-accessible-class.md

An example of an HTML link containing only an icon, which lacks descriptive text for assistive technologies.

```html
<a href="#"><i class="fb-icon"></i></a>
```

--------------------------------

### Get Specific Setting

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/cli/settings.md

Retrieves a single Automatic.css setting by its key. The output is the raw value, suitable for scripting or direct use.

```bash
wp acss settings get color-primary
```

--------------------------------

### Adjust Section Padding with Calc()

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/spacing/spacing-variables.md

Shows how to use the calc() function with section spacing variables for fine-tuned adjustments. This example increases the 'L' section spacing by 10%.

```CSS
.hero {
    padding-block: calc(var(--section-space-l) * 1.1);
}
```

--------------------------------

### Include a Mixin with Multiple Arguments

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/mixins/what-are-mixins.md

Mixins can accept multiple arguments to control different aspects of the generated styles. This example specifies a 'secondary' style and disables the output of main property keys.

```CSS
.my-custom-button {
  @include btn(secondary, no);
}
```

--------------------------------

### Grid Gap Variations with Calc()

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/grids/grid-classes-standard.md

Create custom grid gap sizes by using `calc()` functions with the `--grid-gap` variable. This example doubles the standard grid gap.

```html
<div class="grid--3" style="--grid-gap: calc(var(--grid-gap) * 2)">
  <div>Cell 1</div>
  <div>Cell 2</div>
  <div>Cell 3</div>
</div>
```

--------------------------------

### Standard Width Class Example

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/dimension/width-utilities.md

This CSS demonstrates how the .width--20 class sets the inline size to 100% and the maximum inline size to 20% of the content width. This ensures elements remain responsive.

```css
inline-size: 100%;
max-inline-size: calc(var(--content-width) * 0.2);
```

--------------------------------

### Snappy Easing for Dropdown Animations

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/effects/easing-presets.md

Apply `--ease-snappy` to elements like dropdowns for a responsive feel, combining opacity and transform transitions. This preset has a fast start and a gentle stop.

```css
.dropdown {
  transition: opacity 0.3s var(--ease-snappy),
              transform 0.3s var(--ease-snappy);
}
```

--------------------------------

### CSS calc() for Amplifying Spacing

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/spacing/spacing-variables.md

Amplify spacing values using CSS variables within `calc()`. This example demonstrates multiplying a spacing variable, though it highlights the importance of logical scaling.

```css
.testimonial-card {
    padding: calc(var(--space-m) * 1.5);
}
```

--------------------------------

### Build Static Website

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/README.md

Generates static content for hosting on any static content hosting service.

```bash
yarn build
```

--------------------------------

### Example Text Shadow Values

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/shadow-filters/text-shadows.md

Demonstrates various valid CSS text-shadow values, including subtle legibility shadows, depth shadows, colored glows, and multi-layer effects. Omit the semicolon when entering values in the dashboard.

```css
/* Subtle legibility shadow */
0 1px 2px hsl(0 0% 0% / 0.2)
```

```css
/* Stronger depth shadow */
0 4px 8px hsl(0 0% 0% / 0.4)
```

```css
/* Colored glow */
0 0 10px hsl(200 100% 50% / 0.6)
```

```css
/* Multi-layer text shadow */
0 1px 1px hsl(0 0% 0% / 0.1),
0 2px 4px hsl(0 0% 0% / 0.15)
```

--------------------------------

### Row Span Example

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/grids/grid-classes-standard.md

Control how many rows a grid cell spans using `.row-span--N` classes. This example forces a cell to span two rows.

```html
<div class="grid--2">
  <div class="row-span--2">Spans 2 Rows</div>
  <div>Cell 2</div>
  <div>Cell 3</div>
</div>
```

--------------------------------

### Export All Settings to File

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/cli/settings.md

Exports all Automatic.css settings as pretty-printed JSON directly to a specified file path.

```bash
wp acss settings export --file=/tmp/acss-settings.json
```

--------------------------------

### List All Settings

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/cli/settings.md

Lists all Automatic.css settings, displayed in a table by default. This provides a quick overview of available settings.

```bash
wp acss settings list
```

--------------------------------

### Customizing Starting Opacity for Fade Effect

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/effects/entrance-effects.md

Adjust the initial opacity for fade-in effects by setting the `--enter-opacity-start` CSS variable. This allows the element to start partially transparent rather than fully transparent.

```css
.my-element {
  --enter-opacity-start: 0.2; /* Start at 20% opacity instead of fully transparent */
}
```

--------------------------------

### SCSS Focus Parent Mixin Example

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/accessibility/focus-parent.md

Use the `@include focus-parent` mixin in SCSS to apply focus parent behavior to custom BEM classes. This example combines it with the clickable parent mixin for a card component.

```SCSS
.clickable-card {
    position: relative;
    @include focus-parent(shadow);
}

.clickable-card__heading a {
    @include clickable-parent;
}
```

--------------------------------

### Fluid Text Variable Example

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/typography/fluid-text.md

Use bridge variables to create fluid text sizes that transition between two different t-shirt sizes. This example shows text scaling from an 'xl' desktop size down to an 's' mobile size.

```css
.feature-description {
  font-size: var(--text-xl-to-s);
}
```

--------------------------------

### SCSS Example: Targeting Second Button with nth-of-class

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/color-assignments/automatic-color-relationships.md

This SCSS example uses the nth-of-class syntax to target and override the style of the second button within a specific background class. This allows for programmatic control over multiple buttons with different styles.

```scss
.bg--ultra-dark :nth-child(2 of [class*="btn--"]) {
  @include btn(secondary);
}
```

--------------------------------

### Deploy Content Grid Layout

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/recipes/content-grid-recipe.md

Apply the `?content-grid;` recipe to a CSS box to deploy a content grid layout. This recipe automatically includes the `%root%` selector.

```CSS
?content-grid;
```

--------------------------------

### Apply flag changes by regenerating CSS

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/cli/flags.md

Demonstrates the sequence of commands to set a flag and then regenerate CSS to ensure the changes are applied to the compiled output.

```bash
wp acss flags set EXAMPLE_FLAG on
wp acss css regenerate
```

--------------------------------

### Set Grid Cell Start and End Positions

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/grids/grid-classes-standard.md

Control the starting and ending columns or rows for grid items using .col-start--, .col-end--, .row-start--, and .row-end-- classes. Use .col-end--last or .row-end--last to span to the last column/row.

```html
.col-start--1 .col-end--9
.col-end--last
.row-end--last
```

--------------------------------

### Expand Primary Color Recipe

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/recipes/color-recipes.md

Demonstrates how the `?primary-clr` recipe expands to its full HSL string representation. This allows for on-the-fly manipulation of hue, saturation, lightness, and alpha.

```CSS
hsl(var(--primary-h) var(--primary-s) var(--primary-l) / 1)
```

--------------------------------

### Underlying CSS for Basic Overlays

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/overlays/overlay-classes.md

This CSS demonstrates how basic overlays are implemented using a pseudo-element, CSS variables for customization, and `isolation: isolate` for proper stacking context.

```css
.overlay {
  position: relative;
  z-index: 0;
  isolation: isolate;
}

.overlay::before {
  content: "";
  background: var(--overlay-color, rgba(0, 0, 0, 0.7));
  position: absolute;
  inset: 0;
  z-index: var(--overlay-z-index, -1);
}
```

--------------------------------

### Import Settings Interactively

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/cli/settings.md

Imports Automatic.css settings from a JSON file, replacing the current configuration. This command prompts for confirmation before proceeding.

```bash
wp acss settings import /tmp/acss-settings.json
```

--------------------------------

### Apply Themed Basic Overlay Class

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/overlays/overlay-classes.md

Use a class containing `overlay--` followed by a descriptor to apply a specific theme or variation of the basic overlay.

```html
<div class="overlay--dark">
  <!-- Content -->
</div>
```

--------------------------------

### Customizing Exit Range

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/effects/exit-effects.md

Adjust the start and end points of the exit animation using CSS variables `--exit-range-start` and `--exit-range-end`.

```css
.early-exit {
  --exit-range-start: cover 20%;
  --exit-range-end: cover 60%;
}
```

--------------------------------

### Applying Smart Spacing Utility Class

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/spacing/smart-spacing.md

Shows how to manually apply the `.smart-spacing` utility class to a parent element when automatic application is not working as expected.

```html
<div class="brxe-text smart-spacing">
    <div class="extra-wrapper">
        <h2>Heading</h2>
        <p>This is a paragraph.</p>
    </div>
</div>
```

--------------------------------

### CSS Section Spacing Variable

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/spacing/spacing-variables.md

Apply predefined section spacing between elements using CSS variables. This example sets the padding-block for a hero section.

```css
.hero {
  padding-block: var(--section-space-xl-to-s);
}
```

--------------------------------

### Composing Multiple On Visible Effects

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/effects/visible-effects.md

Combine multiple On Visible classes on a single element to achieve simultaneous animations. For example, fading in, floating up, and growing.

```html
<div class="on-visible--fade on-visible--float on-visible--grow">
  Fades in, floats up, and grows simultaneously
</div>
```

--------------------------------

### Allow Any Columns Utility Class

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/grids/auto-grids.md

Use `.grid--stack-any` to allow any column count, overriding the global 'force even columns' setting.

```html
<div class="grid--auto-1-3 grid--stack-any">...</div>
```

--------------------------------

### Card Framework Solution (Shared Tokens)

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/cards/card-framework-philosophy.md

Demonstrates the Card Framework's approach using shared CSS variables (tokens) for consistent styling. Card selectors reference these tokens, centralizing design decisions.

```css
.service-card {
    padding: var(--card-padding);
    border-radius: var(--card-radius);
    gap: var(--card-gap);
}

.team-card {
    padding: var(--card-padding);
    border-radius: var(--card-radius);
    gap: var(--card-gap);
}
```

--------------------------------

### Apply Standard Padding and Gap with CSS

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/spacing/spacing-variables.md

Demonstrates using the same standard spacing variable for both padding and gap, highlighting that spacing values are interchangeable for different CSS properties.

```CSS
.testimonial-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-m);
    gap: var(--space-m);
}
```

--------------------------------

### Sticky Header Reveal with Exit Effect

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/effects/exit-effects.md

Example of using an exit effect on content within a sticky header, causing it to fade out as the header becomes fixed.

```html
<header class="header--sticky">
  <div class="on-exit--fade on-exit--shrink">
    Content that fades as header becomes sticky
  </div>
</header>
```

--------------------------------

### Apply a Surface using Utility Class

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/backgrounds/surfaces.md

Apply a pre-configured surface to an HTML element by using its generated utility class. This is the most common way to use surfaces.

```html
<section class="surface-hero">
  <!-- Content here -->
</section>
```

--------------------------------

### Run Automatic.css Doctor Checks

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/cli/doctor.md

Execute the doctor command to perform health checks on your Automatic.css installation. This command inspects various aspects of your environment and reports their status.

```bash
wp acss doctor [--format=<format>] [--fix]
```

--------------------------------

### Deploy Website (SSH)

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/README.md

Deploys the website using SSH, typically for GitHub Pages.

```bash
USE_SSH=true yarn deploy
```

--------------------------------

### Fine-tuning Spacing with CSS calc()

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/spacing/spacing-variables.md

Adjust spacing values dynamically by using CSS variables within the `calc()` function. This example reduces padding by approximately 10%.

```css
.testimonial-card {
    padding: calc(var(--space-l) / 1.1);
}
```

--------------------------------

### Custom Smart Spacing Selectors

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/spacing/smart-spacing.md

Provides examples of selectors that can be added to the 'Target Additional Selectors' input to enable Smart Spacing on non-direct children or specific elements.

```css
".extra-wrapper"
".brxe-text > div"
```

--------------------------------

### Show log file paths and sizes

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/cli/logs.md

Displays the resolved paths and sizes of both the activity and debug log files. This is useful for locating log files or providing them for support.

```bash
wp acss logs path
```

--------------------------------

### Make a Grid Responsive with CSS Variables

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/grids/grid-variables.md

Adapt the grid structure for different screen sizes by redefining the `grid-template-columns` within a media query. Only the column definition needs to be updated for responsiveness.

```CSS
@media (max-width: 991px) {
   .service-grid {
      grid-template-columns: var(--grid-2);
   }
}
```

--------------------------------

### Include a Basic Mixin

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/mixins/what-are-mixins.md

Use the `@include` syntax to reference a mixin and apply its predefined styles. This is useful for applying common styling patterns like button styles.

```CSS
.my-custom-button {
  @include btn;
}
```

--------------------------------

### Customizing Blur Amount for Blur Effect

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/effects/visible-effects.md

Set the intensity of the blur effect by adjusting the `--visible-blur-amount` CSS variable. This example sets a blur of 12 pixels.

```css
.my-element {
  --visible-blur-amount: 12px;
}
```

--------------------------------

### Using Custom Overlay Utility Classes

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/overlays/custom-overlays.md

Apply custom overlays to elements using generated utility classes. These can be numbered classes like '.overlay-1' or custom-named classes if configured.

```html
<div class="overlay-1">
  <h2>Content above overlay</h2>
</div>

<!-- By custom name (if configured) -->
<div class="overlay-gradient">
  <h2>Content above overlay</h2>
</div>
```

--------------------------------

### Snappy Easing with CSS Animations

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/effects/easing-presets.md

Example of using `--ease-snappy` with a CSS `@keyframes` animation for a slide-in effect. The animation uses `forwards` to retain the final state.

```css
@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-in {
  animation: slide-in 0.5s var(--ease-snappy) forwards;
}
```

--------------------------------

### Interactive Button with JSX

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/blog/2021-08-01-mdx-blog-post.mdx

Use JSX within MDX to create interactive elements like buttons. This example shows a simple button that triggers an alert on click.

```javascript
<button onClick={() => alert('button clicked!')}>Click me!</button>
```

--------------------------------

### Accessing Color Recipes

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/recipes/color-recipes.md

Illustrates the syntax for accessing color recipes. Use `?{color-name}-clr` for the base color and `?{color-name}-{shade}-clr` for specific shades. The expansion includes the alpha channel.

```CSS
?primary-clr
```

```CSS
?primary-500-clr
```

--------------------------------

### Apply Basic Overlay Class

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/overlays/overlay-classes.md

Add the `.overlay` class to any HTML element to apply a basic overlay. This is useful for improving text readability over background images.

```html
<div class="overlay">
  <img src="background.jpg" alt="">
  <h2>Text appears above the overlay</h2>
</div>
```

--------------------------------

### Variable Grid Columns Recipe (CSS)

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/grids/variable-grid.md

Use the @variable-grid-columns recipe to get the literal grid-template-columns value for Variable Grid. This recipe expands when typed into the grid-template-columns input.

```css
@variable-grid-columns;
```

--------------------------------

### Get the value of a single feature flag

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/cli/flags.md

Prints the current value of a specified flag. Flag names are matched case-insensitively. Exits with an error if the flag is not declared in flags.json.

```bash
wp acss flags get <flag>
```

```bash
$ wp acss flags get EXAMPLE_FLAG
EXAMPLE_FLAG: on
```

--------------------------------

### Deploy Website (No SSH)

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/README.md

Deploys the website without SSH, requiring your GitHub username.

```bash
GIT_USER=<Your GitHub username> yarn deploy
```

--------------------------------

### Setting On Visible Trigger Threshold

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/effects/visible-effects.md

Control when an animation triggers by setting the `--visible-threshold` variable. A value of `0.5` means the element must be 50% visible before the animation starts.

```css
.late-trigger {
  --visible-threshold: 0.5; /* Must be 50% visible */
}
```

--------------------------------

### Create a Responsive Masonry Layout

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/columns/masonry-layouts.md

For responsive masonry, set a minimum column width using `--col-min-width`. The browser will render as many columns as possible while respecting this minimum. Define `--col-gap` and `--row-gap` for spacing.

```css
.my-masonry {
  --col-min-width: 300px;
  --col-gap: var(--space-l);
  --row-gap: var(--space-l);
}
```

--------------------------------

### Create a Fixed Column Masonry Layout

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/columns/masonry-layouts.md

Apply the `?columns` recipe to a container and set the desired column count using `--col-count`. Ensure `--col-gap` and `--row-gap` are also defined for spacing.

```css
.my-masonry {
  --col-count: 3;
  --col-gap: var(--space-l);
  --row-gap: var(--space-l);
}
```

--------------------------------

### Export All Settings to Stdout

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/cli/settings.md

Exports all Automatic.css settings as pretty-printed JSON to standard output. This output can be piped to a file or another command.

```bash
wp acss settings export > acss-settings.json
```

--------------------------------

### Customize Local Border Width

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/borders-dividers/global-border-system.md

Remap token values locally to override specific border properties while retaining global style and color. This example overrides the border width.

```css
.card {
    --border-width: 5px;
    border: var(--border-width) var(--border-style) var(--border-color-dark);
}
```

--------------------------------

### Custom Testimonial Blockquote Style

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/elements/blockquotes.md

Customize individual blockquotes using CSS variables to override default styles. This example applies a testimonial style with custom background, border, and padding.

```css
.testimonial-blockquote {
  --blockquote-background: var(--primary-ultra-light);
  --blockquote-border-color: var(--primary);
  --blockquote-border-width: 0 0 0 4px;
  --blockquote-padding: var(--space-l);
  --blockquote-text-font-style: italic;
}
```

```html
<blockquote class="testimonial-blockquote">
  <p>This blockquote has custom styling while still using the base blockquote system.</p>
</blockquote>
```

--------------------------------

### Customizing On Visible Animation Duration and Easing

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/effects/visible-effects.md

Adjust the animation duration and easing function for On Visible effects by overriding CSS variables. This example sets a longer duration and a gentler easing.

```css
.slow-reveal {
  --visible-duration: 1s;
  --visible-timing: var(--ease-gentle);
}
```

--------------------------------

### Force Even Columns Utility Class

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/grids/auto-grids.md

Apply `.grid--stack-even` to an individual auto grid to force even columns, overriding the global setting.

```html
<div class="grid--auto-1-3 grid--stack-even">...</div>
```

--------------------------------

### Apply Effects to All Children

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/effects/effects-overview.md

Use the '-all' variant of effect classes to apply the animation to all direct children of an element. This example applies a fade effect to each child div within the parent.

```html
<div class="on-enter-all--fade">
  <div>Child 1 fades in</div>
  <div>Child 2 fades in</div>
  <div>Child 3 fades in</div>
</div>
```

--------------------------------

### Get Doctor Output in JSON Format

Source: https://github.com/digital-gravy/automatic.css-docs/blob/main/docs/cli/doctor.md

Execute the doctor command with the `--format=json` option to retrieve diagnostic information in JSON format. This is useful for programmatic monitoring or integration with other systems.

```bash
wp acss doctor --format=json
```