### Basic CSS Columns Example

Source: https://docs.automaticcss.com/3.0/columns/css-columns

This is a basic example of how to apply CSS columns to a list. Content will automatically flow from one column to the next.

```css
ul {
  columns: 3;
}
```

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

### Card Container Recipe Example

Source: https://docs.automaticcss.com/3.0/recipes/card-container-recipe

This example demonstrates how to use the @card-container directive to apply styles based on container width. It changes the card's display to a grid, adjusts the media aspect ratio, and sets the heading size when the container is 767px or wider.

```css
%root% {
  @container card ( inline-size >= 767px ) {
    display: grid;
    grid-template-columns: var(--grid-2-3);
    --card-media-aspect-ratio: 4/3;
    --card-heading-size: var(--h2);
  }
}

```

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

### CSS with Base and Text Color Variables

Source: https://docs.automaticcss.com/3.0/fundamentals/variables

An example showing a custom class with multiple variable assignments for background color, text color, and padding, demonstrating a more complete styling scenario.

```css
.my-card {
    background-color: var(--base-dark);
    color: var(--white);
    padding: var(--space-l);
}

```

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

### Auto Grid with Additional Arguments

Source: https://docs.automaticcss.com/3.0/grids/auto-grid-mixin

Configure the auto-grid mixin with additional named arguments for more control over responsiveness. This example sets the flow to 'auto-fill' and forces an even column count.

```scss
.my-grid {
    @include auto-grid(4, $flow: auto-fill, $force-even-column-count: true);
}

```

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

### Smart Spacing Applied Correctly

Source: https://docs.automaticcss.com/3.0/spacing/smart-spacing

This example shows a structure where Smart Spacing is applied correctly because the elements are direct children of the targeted container.

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

```

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

### Configure Responsive Grids

Source: https://docs.automaticcss.com/3.0/grids/grid-classes-standard

Control grid structure across responsive breakpoints by applying specific classes. This example sets a grid to four columns on desktop, two on the 'L' breakpoint, and one on the 'M' breakpoint.

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

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

### Smart Spacing Interrupted by Wrapper

Source: https://docs.automaticcss.com/3.0/spacing/smart-spacing

This example demonstrates a scenario where Smart Spacing is not applied due to an extra wrapper element between the targeted container and its children.

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

```

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

### Custom Smart Spacing Selectors

Source: https://docs.automaticcss.com/3.0/spacing/smart-spacing

Examples of selectors that can be added to ACSS's 'Target Additional Selectors' to control Smart Spacing application.

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

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

### Bricks Builder Clickable Parent with BEM Classes

Source: https://docs.automaticcss.com/3.0/mixins/clickable-parent

This example shows how to use the Clickable Parent technique with BEM classes in Bricks Builder, targeting a specific child element like a heading.

```css
/* Clickable Parent */
%root% {
    position: relative;
}
%root%__heading a::after {
    content: '';
    position: absolute;
    inset: 0;
    display: flex;
    z-index: 1;
}
```

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

### Target Second Button with nth-of-class

Source: https://docs.automaticcss.com/3.0/colors/automatic-color-relationships

This example demonstrates how to target and style the second button within a specific background class using the `nth-of-class` syntax.

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

```

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

### Apply Light and Dark Button Variants

Source: https://docs.automaticcss.com/3.0/buttons-links/button-classes

Use `.btn--{color}-{variant}` syntax for light and dark variants. For example, `.btn--primary-light` applies the light variant of the primary button style. Do not combine these with the main button style class; use them independently.

```html
<a href="#" class="btn--primary-light">Primary Light Button</a>
<button class="btn--secondary-dark">Secondary Dark Button</button>
```

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

### Applying Background Utility Classes

Source: https://docs.automaticcss.com/3.0/colors/background-text-assignments

Use these utility classes to apply predefined background color contexts. They are compatible with Automatic Color Relationships.

```html
<div class="bg--light">...</div>
<div class="bg--dark">...</div>
<div class="bg--ultra-light">...</div>
<div class="bg--ultra-dark">...</div>
```

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

### Deploy Content Grid Layout

Source: https://docs.automaticcss.com/3.0/recipes/content-grid-recipe

Use the @content-grid; recipe to deploy a content grid layout. This recipe automatically outputs the %root% selector for direct use in CSS boxes.

```css
@content-grid;

```

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

### Create Background Utility Class

Source: https://docs.automaticcss.com/3.0/colors/palette-setup

Create a custom utility class to apply your new color as a background. This allows for easy application of the custom color across your project.

```css
.bg--my-color {
   background-color: var(--my-color);
}

```

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

### Align Items

Source: https://docs.automaticcss.com/3.0/flexbox/flexbox-classes

Align flex items along the cross axis within their line. Use values such as start, end, center, baseline, and stretch.

```html
.align-items--start
.align-items--end
.align-items--center
.align-items--baseline
.align-items--stretch
```

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

### Justify Items

Source: https://docs.automaticcss.com/3.0/flexbox/flexbox-classes

Control the alignment of flex items along the cross axis within their line. Supported values are start, end, center, and stretch.

```html
.justify-items--start
.justify-items--end
.justify-items--center
.justify-items--stretch
```

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

### Allow Any Columns on Individual Grids with Utility Class

Source: https://docs.automaticcss.com/3.0/grids/auto-grids

Use the `.grid--stack-any` utility class to allow an individual auto grid to stack with any number of columns, overriding the global 'force even columns' setting. This class uses traditional breakpoint logic (max-width).

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

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

### Adjust Section Spacing with calc()

Source: https://docs.automaticcss.com/3.0/spacing/section-spacing-variables

This example shows how to use the calc() function to modify a section spacing variable, such as increasing the large section spacing by 10%.

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

```

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

### Set Gradient Overlay

Source: https://docs.automaticcss.com/3.0/recipes/overlap-recipes

Create a gradient overlay by setting the `--overlay` variable to a linear-gradient with two different transparent color values. Maintaining the linear-gradient value is required.

```css
--overlay: linear-gradient(var(--primary-trans-30), var(--secondary-trans-30));
```

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

### Reduce Spacing with Calc()

Source: https://docs.automaticcss.com/3.0/spacing/spacing-variables

Use calc() with division to reduce the value of a spacing variable, achieving finer control than predefined sizes. This example reduces padding by 10%.

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

```

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

### Apply @list-none Recipe

Source: https://docs.automaticcss.com/3.0/recipes/list-recipes

Use the @list-none recipe to remove default list styling. Apply it directly to the list element.

```css
@list-none;
```

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

### Justify Content

Source: https://docs.automaticcss.com/3.0/flexbox/flexbox-classes

Control the spacing and alignment of flex items along the main axis of the container. Available values include start, end, center, between, around, and stretch.

```html
.justify-content--start
.justify-content--end
.justify-content--center
.justify-content--between
.justify-content--around
.justify-content--stretch
```

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

### Applying Text Utility Classes

Source: https://docs.automaticcss.com/3.0/colors/background-text-assignments

Use these utility classes to apply predefined text color contexts. They are compatible with Automatic Color Relationships.

```html
<p class="text--light">...</p>
<p class="text--dark">...</p>
<p class="text--light-muted">...</p>
<p class="text--dark-muted">...</p>
```

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

### Align Content

Source: https://docs.automaticcss.com/3.0/flexbox/flexbox-classes

Align the flex lines within the flex container when there is extra space in the cross axis. Use values like start, end, center, baseline, and stretch.

```html
.align-content--start
.align-content--end
.align-content--center
.align-content--baseline
.align-content--stretch
```

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

### Expand Recipe in ACSS

Source: https://docs.automaticcss.com/3.0/recipes

Demonstrates how to call a Recipe in ACSS by typing '@' followed by the recipe name and closing with a semicolon.

```css
@columns;
```

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

### Apply Clip Path to Overlap Pseudo-element

Source: https://docs.automaticcss.com/3.0/recipes/overlap-recipes

Create angled or custom divider overlap effects using clip paths applied to the `::before` pseudo-element. This example creates an angled divider.

```css
%root% + *::before {
    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0% 100%);
}
```

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

### Using Color Recipe in ACSS

Source: https://docs.automaticcss.com/3.0/recipes

Illustrates how to use a color Recipe in ACSS by typing '@' followed by the color name and a period. This expands to a full HSL string.

```css
@primary-clr.
```

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

### Apply Icon Sizes with Utility Classes

Source: https://docs.automaticcss.com/3.0/icons/icon-framework

Use the `.icon--{size}` class to change the size of individual icons or groups of icons. Available sizes include 'S', 'M', and 'L' by default.

```html
<ul class="icon-list">
  <li><i class="icon icon--s"></i></li>
  <li><i class="icon icon--m"></i></li>
  <li><i class="icon icon--l"></i></li>
</ul>
```

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

### Exclude Card From Auto Styling

Source: https://docs.automaticcss.com/3.0/cards/card-framework

To exclude specific cards from automatic styling, add their selectors to the `:not()` list within the Auto Card Selector. This example adds `.excluded-card` to the exclusion list.

```css
:is([class*='card']:where(:not([class*='__'], [class*='wrapper'], .excluded-card)))  

```

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

### Mobile First Media Query Mixin

Source: https://docs.automaticcss.com/3.0/mixins/breakpoint-mixins

Use the `breakpoint-up` mixin for mobile-first min-width media queries. Replace 'extension' with your desired breakpoint name (e.g., xl, l, m, s).

```scss
@include breakpoint-up(extension) {
  // Your CSS goes here.
}
```

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

### Manipulate Custom Color with HSL Partials

Source: https://docs.automaticcss.com/3.0/colors/palette-setup

Modify the appearance of your custom color by using its HSL partials within a `calc` function. This example adjusts saturation and lightness for a unique shade.

```css
.my-card {
   background-color: hsl(var(--my-color-h) calc(var(--my-color-s) * .5) calc(var(--my-color-l) * 1.5));
}

```

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

### Set Flexbox Direction

Source: https://docs.automaticcss.com/3.0/flexbox/flexbox-classes

Use these classes to set the display property to flex and establish the primary direction of the flex container. They also set default alignment, simplifying initial setup.

```html
.flex--col
.flex--row
.flex--col-reverse
.flex--row-reverse
```

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

### Basic CSS with Hex Color

Source: https://docs.automaticcss.com/3.0/fundamentals/variables

Illustrates a basic CSS rule using a hardcoded hex color for a background. This approach is less maintainable than using variables.

```css
.my-card {
    background-color: #08001F;
}

```

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

### Define Multiple Transition Properties

Source: https://docs.automaticcss.com/3.0/buttons-links/transition

Transition multiple properties by listing them with their associated transition variables, separated by commas. Avoid using 'all' for performance reasons.

```css
background --transition-duration --transition-timing --transition-delay, color --transition-duration --transition-timing --transition-delay, border --transition-duration --transition-timing --transition-delay
```

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

### Basic Icon Mixin Usage

Source: https://docs.automaticcss.com/3.0/icons/icon-mixin

Applies the default icon style. This is the most basic way to use the mixin.

```scss
.my-icon { @include icon; }
```

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

### Bricks Builder Clickable Parent with BEM and %root%

Source: https://docs.automaticcss.com/3.0/accessibility/clickable-parent

Example of using the Clickable Parent with BEM classes in Bricks Builder, targeting the 'a' element within a heading. The %root% selector is used on the parent.

```css
/* Clickable Parent */
%root% {
    position: relative;
}
%root%__heading a::after {
    content: '';
    position: absolute;
    inset: 0;
    display: flex;
    z-index: 1;
}

```

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

### Basic Auto Grid Usage

Source: https://docs.automaticcss.com/3.0/grids/auto-grid-mixin

Use the auto-grid mixin with a selector to define a basic responsive grid structure. The only required argument is the number of columns.

```scss
.my-grid {
    @include auto-grid(4);
}

```

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

### Align Self

Source: https://docs.automaticcss.com/3.0/flexbox/flexbox-classes

Override the default alignment for individual flex items. Apply these classes directly to an item to control its alignment along the cross axis using start, end, center, or stretch.

```html
.self--start
.self--end
.self--center
.self--stretch
```

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

### Assign Elements to Grid Zones

Source: https://docs.automaticcss.com/3.0/recipes/content-grid-recipe

Assign elements like figures, pictures, and images to the 'feature' grid zone using the grid-column property. This example demonstrates how to target specific elements within the grid.

```css
.my-awesome-grid > :is(figure, picture, img) {
    grid-column: feature;
}

```

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

### Apply Padding Utility Class

Source: https://docs.automaticcss.com/3.0/fundamentals/how-to-use-a-utility-class

Add medium padding to a div by applying the `.pad--m` class directly to the element.

```html
<div class="pad--m"></div>
```

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

### Full Vanilla CSS Gradient Outline Button Implementation

Source: https://docs.automaticcss.com/3.0/buttons-links/gradient-outline-buttons

This Vanilla CSS code provides a direct implementation for gradient outline buttons, including the necessary @property definitions for custom properties and styling for the button and its pseudo-elements.

```css
@property --gradient-color-1 {
	syntax: " <color>";
	inherits: false;
	initial-value: transparent;
}

@property --gradient-color-2 {
	syntax: " <color>";
	inherits: false;
	initial-value: transparent;
}

.btn--primary.btn--primary {
	--gradient-angle: 45deg;
	--gradient-transition: --gradient-color-1 .6s ease, --gradient-color-2 var(--transition-duration) var(--transition-timing);
	position: relative;
	border: none !important;
	padding-block: calc(var(--btn-padding-block) + var(--btn-outline-border-width));
	padding-inline: calc(var(--btn-padding-inline) + var(--btn-outline-border-width));
	transition: var(--gradient-transition);
}

.btn--primary.btn--primary::before {
	--gradient-color-1: var(--secondary);
	--gradient-color-2: var(--primary);
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: var(--btn-outline-border-width);
	background: linear-gradient(var(--gradient-angle), var(--gradient-color-1), var(--gradient-color-2));
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	transition: var(--gradient-transition);
}

.btn--primary.btn--primary:hover {
	--gradient-color-1: var(--primary);
	--gradient-color-2: var(--secondary);
}

.btn--primary.btn--primary:hover::before {
	--gradient-color-1: var(--primary);
	--gradient-color-2: var(--secondary);
}

```

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

### Override Breakpoint for Even/Any Column Stacking

Source: https://docs.automaticcss.com/3.0/grids/auto-grids

Customize the breakpoint at which even or any column stacking behavior is applied using breakpoint-specific classes. The syntax is `.grid--stack-{type}-{breakpoint}`. For example, `.grid--stack-even-m` forces even columns from the 'M' breakpoint upwards.

```html
<div class="grid--stack-even-m">...</div>
```

```html
<div class="grid--stack-any-s">...</div>
```

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

### Assign Element to Feature Zone - Utility Class

Source: https://docs.automaticcss.com/3.0/grids/content-grid

Use the .content--feature utility class to make an element fill the Feature Zone.

```html
<div class="content--feature">...</div>
```

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

### Dynamic Ribbon Styling with Data Attributes

Source: https://docs.automaticcss.com/3.0/elements/ribbons

Style ribbons dynamically based on data attribute values. This approach is useful for applying styles based on dynamic data like custom field values. The example shows how to set ribbon colors and shadows using a `data-ribbon-style` attribute.

```css
[data-ribbon-style="sale"] {
    --ribbon-background-color: var(--primary);
    --ribbon-text-color: var(--primary-ultra-light);
    --ribbon-shadow: 0 0 30px -3px var(--primary-ultra-dark-trans-20);
}

```

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

### Accessing Primary Color with Alpha

Source: https://docs.automaticcss.com/3.0/recipes/color-recipes

Demonstrates how a color recipe like @primary-clr expands to its full HSL string, including the alpha channel for transparency control.

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

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

### Combine Button Classes for Custom Styles

Source: https://docs.automaticcss.com/3.0/buttons-links/button-classes

Mix and match various button classes to achieve specific styles. For example, a small, outline button using the site's action color can be created by combining `.btn--primary`, `.btn--outline`, and `.btn--s`.

```html
<a href="#" class="btn--primary btn--outline btn--s">Small Action Outline Button</a>
```

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

### Force Even Columns on Individual Grids with Utility Class

Source: https://docs.automaticcss.com/3.0/grids/auto-grids

Use the `.grid--stack-even` utility class to force an individual auto grid to maintain even columns, overriding the global setting if necessary. This class applies mobile-first (min-width).

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

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

### Standard Media Query Mixin

Source: https://docs.automaticcss.com/3.0/mixins/breakpoint-mixins

Use the `breakpoint` mixin for standard max-width media queries. Replace 'extension' with your desired breakpoint name (e.g., xl, l, m, s).

```scss
@include breakpoint(extension) {
  // Your CSS goes here.
}
```

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

### Use the @btn Recipe

Source: https://docs.automaticcss.com/3.0/buttons-links/button-recipes

Use the `@btn` recipe in custom CSS to output variables for unique button styling. Attach it to a button class like `.btn--custom` for best results.

```css
@btn;
```

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

### Custom Transition with Global Properties

Source: https://docs.automaticcss.com/3.0/buttons-links/transition

Create a custom transition style while referencing specific global transition properties for flexibility. This allows for mixed custom and global values.

```css
.my-card {
    background-color: var(--bg-light);
    color: var(--text-dark);
    padding: var(--space-l);
    transition: background .7s ease .2s, color var(--transition-duration) var(--transition-timing), border .1s ease-in .3s;
}

```

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

### Apply Outline Button Class

Source: https://docs.automaticcss.com/3.0/buttons-links/button-classes

Add the `.btn--outline` class in addition to the color class to create an outline button. This class swaps the button's style to its outline variant.

```html
<a href="#" class="btn--primary btn--outline">Primary Outline Button</a>
<button class="btn--accent btn--outline">Accent Outline Button</button>
```

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

### Apply Padding and Gap with Spacing Variable

Source: https://docs.automaticcss.com/3.0/spacing/spacing-variables

Demonstrates using the same `--space-m` variable for both padding and gap properties in a flex container.

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

```

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

### 50/50 Split Layout with CSS calc()

Source: https://docs.automaticcss.com/3.0/grids/content-grid

Use this `grid-template-columns` value to create a 50/50 split. It dynamically calculates the width based on viewport, content width, and grid gap, ensuring the left side takes up exactly half the available space.

```css
grid-template-columns: calc((min(50vw - var(--gutter), var(--content-width) / 2)) - (var(--grid-gap) / 2)) minmax(0, 1fr);
```

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

### Basic Mixin Usage

Source: https://docs.automaticcss.com/3.0/mixins/what-are-mixins

Use this snippet to include a mixin without any arguments. The mixin will use its default values.

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

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

### Define Transition Properties

Source: https://docs.automaticcss.com/3.0/buttons-links/transition

Configure the global transition properties by setting duration, timing function, and delay. These map to specific CSS variables.

```css
background --transition-duration --transition-timing --transition-delay
```

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

### Mixin Usage with Multiple Arguments

Source: https://docs.automaticcss.com/3.0/mixins/what-are-mixins

Include a mixin and provide values for multiple arguments to precisely control the generated styles. Arguments must be provided in order.

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

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

### Apply Sticky Behavior with .sticky Class

Source: https://docs.automaticcss.com/3.0/position-zindex/sticky-classes

Add the `.sticky` class to any element to make it sticky. This class enables the element to stick to the top of the browser window as the user scrolls.

```html
<div class="sticky">This element will stick to the top.</div>
```

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

### Make a service grid responsive with variables

Source: https://docs.automaticcss.com/3.0/grids/grid-variables

Adjust the grid to use fewer columns at smaller screen sizes by overriding the `grid-template-columns` property within a media query. This ensures the grid remains functional and visually appealing across different devices.

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

```

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

### Apply Global Light Border Style

Source: https://docs.automaticcss.com/3.0/borders-dividers/global-border-system

Use `var(--border-light)` to specifically apply the light version of the global border style. This is useful when you need to ensure a light border regardless of the default setting.

```css
.card {
    border: var(--border-light);
}
```

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

### Create Responsive Columns with @columns

Source: https://docs.automaticcss.com/3.0/recipes/column-recipes

Use the `@columns` utility to create responsive text-flow columns. This is best applied to rich text elements. Configure column count, minimum width, rule styles, and gaps.

```css
@columns
```