### Generate CSS Utility Classes from Design Tokens

Source: https://cube.fyi/utility

Example of CSS utility classes generated from design tokens for background and text colors, demonstrating how tokens translate to reusable CSS properties.

```CSS
.bg-primary {
  background: #ff00ff;
}
.bg-secondary {
  background: #ffbf81;
}
.color-primary {
  color: #ff00ff;
}
.color-secondary {
  color: #ffbf81;
}
```

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

### Define Design Tokens in JSON

Source: https://cube.fyi/utility

Example of design tokens defined in a JSON file, typically used for colors, serving as a single source of truth for design values.

```JSON
{
  "colors": {
    "primary": "#ff00ff",
    "secondary": "#ffbf81",
    "base": "#252525"
  }
}
```

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

### HTML Example Applying Flow Class

Source: https://cube.fyi/composition

This HTML snippet demonstrates how to apply the 'flow' utility class to a container element, specifically 'card__content'. Any direct children within this 'div' will automatically have the defined top margin applied, creating consistent vertical spacing.

```html
<article class="card">
  <img class="card__image" alt="" />
  <div class="[ card__content ] [ flow ]">
    <!-- our content in here will auto-flow now -->
  </div>
</article>
```

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

### Apply Generated Utility Classes in HTML

Source: https://cube.fyi/utility

Demonstrates how to apply the generated `bg-primary` and `color-base` utility classes to an HTML article element, abstracting repeatability to the HTML.

```HTML
<article class="bg-primary color-base"></article>
```

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

### HTML Class Grouping with Pipes

Source: https://cube.fyi/grouping

This snippet provides an alternative method for grouping CSS classes within the HTML `class` attribute, using pipe characters (`|`) instead of square brackets. It illustrates that while square brackets are recommended, other delimiters can be used as long as consistency is maintained across the project for developer experience and team communication.

```HTML
<article
  class="card | section box | bg-base color-primary"
  data-state="reversed"
></article>
```

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

### Contextual CSS Override for Flow Spacing

Source: https://cube.fyi/composition

This CSS snippet shows how to override the default '--flow-space' value for a specific context, in this case, the '.card__content' element. By defining '--flow-space' here, all elements within '.card__content' that are affected by the 'flow' rule will use '1.4rem' as their top margin instead of the global default.

```css
.card__content {
  --flow-space: 1.4rem;
}
```

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

### Define a Wrapper Utility Class in CUBE CSS

Source: https://cube.fyi/utility

This CSS class provides a consistent max width, padded container that sits in the middle of the viewport when the viewport is greater than 60rem wide.

```CSS
.wrapper {
  margin-inline: auto;
  padding-inline: 1rem;
  max-width: 60rem;
}
```

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

### Style a CUBE CSS exception with CSS using a data attribute selector

Source: https://cube.fyi/exception

This CSS snippet shows how to style a CUBE CSS block based on a `data-state` attribute. It targets a 'card' element with `data-state='reversed'` to change its display properties, such as `flex` and `flex-direction`, effectively reversing its layout.

```CSS
.card[data-state='reversed'] {
  display: flex;
  flex-direction: column-reverse;
}
```

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

### HTML Class Grouping with Square Brackets

Source: https://cube.fyi/grouping

This snippet demonstrates the recommended method for grouping CSS classes within the HTML `class` attribute using square brackets. This approach helps organize related classes, such as block, section, and utility classes, improving readability and maintainability of the HTML structure.

```HTML
<article
  class="[ card ] [ section box ] [ bg-base color-primary ]"
  data-state="reversed"
></article>
```

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

### CSS Rule for Flow Layout

Source: https://cube.fyi/composition

This CSS rule defines the core behavior of the 'flow' utility class. It applies a top margin to all sibling elements (except the first) within an element that has the 'flow' class. The margin value defaults to '1em' but can be overridden by the '--flow-space' CSS custom property.

```css
.flow > * + * {
  margin-top: var(--flow-space, 1em);
}
```

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

### Apply a CUBE CSS exception using a data attribute in HTML

Source: https://cube.fyi/exception

This HTML snippet demonstrates how to apply an exception to a CUBE CSS block, specifically a 'card', by using a `data-state` attribute. This attribute serves as a useful hook for both CSS and JavaScript to modify the element's appearance or behavior based on its state.

```HTML
<article class="card" data-state="reversed"></article>
```

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

### Targeting elements within a CUBE CSS block using class selectors

Source: https://cube.fyi/block

This CSS snippet demonstrates how to target elements within a CUBE CSS block using class selectors. The parent block class provides an extra specificity point, allowing for flexible internal styling without requiring formal element syntax like BEM.

```css
.my-block {
}

.my-block .image {
}

.my-block .content {
}

```

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

### Targeting HTML elements within a CUBE CSS block

Source: https://cube.fyi/block

This CSS snippet illustrates how to target raw HTML elements (e.g., img, article) directly within a CUBE CSS block. The block's class provides a specificity boost, enabling direct element targeting while maintaining contextual control and consistency.

```css
.my-block {
}

.my-block img {
}

.my-block article {
}

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.