### Project Setup: Web App and WordPress Plugin Commands

Source: https://context7.com/context7/coreframework/llms.txt

Instructions for setting up a new Core Framework project, covering both the web application and WordPress plugin installations. The web app involves account creation and project initiation, while the plugin requires installation and activation via the WordPress dashboard.

```bash
# Web App: Visit https://coreframework.com/app
# 1. Create account and login
# 2. Click "Open Web App" in top right
# 3. Enter project name and click "Create"
# 4. Project opens with standard baseline setup

# WordPress Plugin: Install from WordPress repository
# 1. Download and activate Core Framework plugin
# 2. Access from WordPress dashboard
# 3. Configure preferences for site integration
```

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

### Initial Project Configuration via JavaScript

Source: https://context7.com/context7/coreframework/llms.txt

Guides the initial configuration of a Core Framework project using JavaScript. It outlines choices for starting templates (full, variables only, or empty), license key activation for builder addons (WordPress specific), and basic preference settings like root font size and dark mode.

```javascript
// Step 1: Choose your starting template
// Option A: Full experience (recommended for UI kits)
// - Imports colors, typography, spacing
// - Generates utility classes and variables

// Option B: Variables Only (minimalistic)
// - Generates only variables for colors, typography, spacing, radii
// - Smaller CSS output

// Option C: Empty (create your own)
// - Empty setup with default typography and spacing structure

// Step 2 (WordPress only): Add builder addon license keys
// - Enter license keys for Oxygen/Bricks/Gutenberg addons
// - Click checkmark to activate

// Step 3: Basic preferences
// - Root font size: Choose 100% or 62.5%
// - Dark mode: Toggle on to enable light/dark color options
```

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

### Project Import/Export Workflow (JavaScript)

Source: https://context7.com/context7/coreframework/llms.txt

Details the process for exporting a project as a JSON file for backup or offline sharing, and importing a project from a JSON file. Includes an example of the JSON structure.

```javascript
// Export project as file (backup or offline sharing)
// Navigate to "Manage Project" section
// Click "Export Project"
// Downloads JSON file with all settings

// Import project from file
// Navigate to "Manage Project" section
// Click "Import Project"
// Select JSON file
// Project loaded with all settings

// Example JSON structure (simplified)
{
  "projectName": "My Design System",
  "version": "1.6.0",
  "preferences": {
    "rootFontSize": "100%",
    "defaultTheme": "auto",
    "classPrefix": "ds-",
    "variablePrefix": "ds-"
  },
  "colors": [
    {
      "name": "primary",
      "light": "#3b82f6",
      "dark": "#60a5fa",
      "utilities": ["text", "background", "border"],
      "transparentVariants": true,
      "shades": 5,
      "tints": 5
    }
  ],
  "typography": {
    "mode": "automatic",
    "minBase": "16px",
    "maxBase": "18px",
    "ratio": "perfectFourth"
  },
  "spacing": {
    "mode": "automatic",
    "minBase": "16px",
    "maxBase": "24px",
    "ratio": "perfectFourth"
  },
  "components": [
    {
      "type": "button",
      "baseClass": "btn",
      "modifiers": ["btn-primary", "btn-secondary"],
      "states": ["hover", "focus", "active"]
    }
  ]
}
```

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

### Bricks Builder Addon Integration (PHP)

Source: https://context7.com/context7/coreframework/llms.txt

Illustrates how to integrate the Core Framework with Bricks Builder by configuring Theme Styles for color palette and typography, and shows an example of using Core Framework classes within Bricks.

```php
<?php
// After installing Core Framework addon for Bricks
// Configure Theme Styles in Bricks Builder

// Bricks → Theme Styles → Color Palette
// Import Core Framework variables
{
  "colors": [
    {"name": "Primary", "value": "var(--primary)"},
    {"name": "Secondary", "value": "var(--secondary)"},
    {"name": "Text Base", "value": "var(--text-base)"}
  ]
}

// Bricks → Theme Styles → Typography
{
  "body": {
    "fontSize": "var(--text-m)"
  },
  "headings": {
    "h1": "var(--text-3xl)",
    "h2": "var(--text-2xl)",
    "h3": "var(--text-xl)"
  }
}

// Using in Bricks Builder
?>
<section class="p-3xl bg-primary">
  <div class="container">
    <div class="columns-2 columns-1--on-l gap-xl">
      <div>Column 1</div>
      <div>Column 2</div>
    </div>
  </div>
</section>

```

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

### Generic HTML/CSS Integration with Core Framework

Source: https://context7.com/context7/coreframework/llms.txt

This example shows a basic HTML structure for integrating Core Framework. It includes linking the framework's CSS, implementing a dark mode toggle script using local storage and CSS variables, and using Core Framework's utility classes for layout, typography, and components.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Core Framework Site</title>

  <!-- Link Core Framework CSS -->
  <link rel="stylesheet" href="core-framework.css">

  <!-- Optional: Dark mode script -->
  <script>
    // Check system preference or saved preference
    const savedTheme = localStorage.getItem('theme');
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

    if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
      document.documentElement.classList.add('cf-theme-dark');
    }

    function toggleTheme() {
      const html = document.documentElement;
      html.classList.toggle('cf-theme-dark');
      localStorage.setItem('theme', 
        html.classList.contains('cf-theme-dark') ? 'dark' : 'light'
      );
    }
  </script>
</head>
<body>
  <!-- Header with dark mode toggle -->
  <header class="p-l bg-primary text-white">
    <div class="flex-between">
      <h1 class="text-2xl">My Website</h1>
      <button class="btn btn-secondary" onclick="toggleTheme()">
        Toggle Theme
      </button>
    </div>
  </header>

  <!-- Hero section -->
  <section class="p-3xl text-center">
    <h2 class="text-3xl mb-l">Welcome to Our Site</h2>
    <p class="text-l mb-xl">Built with Core Framework</p>
    <button class="btn btn-primary">Get Started</button>
  </section>

  <!-- Grid layout -->
  <section class="p-2xl">
    <div class="columns-3 columns-2--on-l column--on-s gap-l">
      <div class="card p-l">
        <h3 class="text-xl mb-m">Feature 1</h3>
        <p>Description here</p>
      </div>
      <div class="card p-l">
        <h3 class="text-xl mb-m">Feature 2</h3>
        <p>Description here</p>
      </div>
      <div class="card p-l">
        <h3 class="text-xl mb-m">Feature 3</h3>
        <p>Description here</p>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="p-xl bg-base text-center">
    <p class="text-s">© 2024 My Website</p>
  </footer>
</body>
</html>
```

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

### Generating and Using CSS Utility Classes from Colors

Source: https://context7.com/context7/coreframework/llms.txt

Explains how to generate utility classes for text, background, and border colors directly from the Core Framework interface. It provides examples of the generated CSS and how to apply these classes in HTML for quick styling.

```css
/* Click down arrow on color row to expand options
 * Check "Generate Utility Classes" and select:
 * - Text
 * - Background
 * - Border
 */

/* Generated utility classes */
.text-primary { color: var(--primary); }
.bg-primary { background-color: var(--primary); }
.border-primary { border-color: var(--primary); }

/* Usage in HTML */
<div class="bg-primary text-white">Primary background</div>
<h1 class="text-secondary">Secondary heading</h1>
<div class="border-primary">Primary border</div>
```

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

### Get Class Names and Variables using CoreFramework Helper

Source: https://docs.coreframework.com/development/coreframework-helper

This PHP snippet demonstrates how to use the CoreFramework Helper class to retrieve an array of class names and variables. It includes checks for plugin activation and class existence, and shows examples of using the `getClassNames` and `getVariables` methods with and without category grouping.

```php
use CoreFramework\Helper;

if (is_plugin_active('core-framework/core-framework.php')) {
    if (class_exists('CoreFramework\Helper')) {
        $helper = new Helper(); 

        $class_names = $helper->getClassNames(); 
        $class_names = $helper->getClassNames([
            'group_by_category' => false,
        ]); 

        $variables = $helper->getVariables(); 
        $variables = $helper->getVariables([
            'group_by_category' => false,
        ]); 
    }
}
```

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

### CSS Vendor Prefixing Example (PostCSS)

Source: https://docs.coreframework.com/navigating-the-ui/preferences

Demonstrates how PostCSS automatically adds vendor prefixes and fallbacks to CSS rules for cross-browser compatibility. This allows developers to write CSS without manually including prefixes.

```css
::placeholder {
  color: gray;
}
```

```css
::-moz-placeholder {
  color: gray;
}
::placeholder {
  color: gray;
}
```

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

### CSS Color Variables and Formats

Source: https://context7.com/context7/coreframework/llms.txt

Demonstrates the CSS syntax for defining color variables within Core Framework. It shows basic hex, RGB, HSL, and RGBA color formats, along with examples of text, background, and border color variables.

```css
/* Navigate to Colors section
 * Default groups: brand, text, background, base
 * Click + icon under last color to add new color
 * Click color or value field to open color picker
 */

/* Basic color variable */
:root {
  --primary: #3b82f6;
  --secondary: #8b5cf6;
  --text-base: #1f2937;
  --bg-base: #ffffff;
}

/* Color picker supports multiple formats */
:root {
  --color-hex: #3b82f6;
  --color-rgb: rgb(59, 130, 246);
  --color-hsl: hsl(217, 91%, 60%);
  --color-rgba: rgba(59, 130, 246, 0.8);
}
```

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

### Gutenberg Addon Setup for Core Framework

Source: https://context7.com/context7/coreframework/llms.txt

This snippet demonstrates how to integrate Core Framework with Gutenberg blocks by adding custom CSS classes and configuring theme.json for color palettes and font sizes. It leverages Core Framework's utility classes for styling and design system consistency within the WordPress block editor.

```javascript
// After installing Core Framework addon for Gutenberg
// Variables available in block editor

// Using Core Framework classes in Gutenberg blocks
// Add to block's "Additional CSS Class(es)" field:
// "columns-3 gap-l p-xl"

// In theme.json (optional integration)
{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        {
          "name": "Primary",
          "slug": "primary",
          "color": "var(--primary)"
        },
        {
          "name": "Secondary",
          "slug": "secondary",
          "color": "var(--secondary)"
        }
      ]
    },
    "typography": {
      "fontSizes": [
        {
          "name": "Small",
          "slug": "small",
          "size": "var(--text-s)"
        },
        {
          "name": "Medium",
          "slug": "medium",
          "size": "var(--text-m)"
        },
        {
          "name": "Large",
          "slug": "large",
          "size": "var(--text-l)"
        }
      ]
    }
  }
}
```

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

### Generate CSS Shades and Tints

Source: https://context7.com/context7/coreframework/llms.txt

Creates darker versions (shades by mixing with black) and lighter versions (tints by mixing with white) of a base color. Users can select the number of variations from 3 to 10. Examples show usage in gradients and backgrounds.

```css
/* Shades: darker versions (mixing with black)
 * Tints: lighter versions (mixing with white)
 * Select count: 3 to 10 variations
 */

/* Generated shades (darker) - Example with count=5 */
:root {
  --primary: #3b82f6;
  --primary-shade-1: #2e68c4;
  --primary-shade-2: #214e92;
  --primary-shade-3: #143460;
  --primary-shade-4: #071a2e;
  --primary-shade-5: #000000;
}

/* Generated tints (lighter) - Example with count=5 */
:root {
  --primary-tint-1: #5c9bf8;
  --primary-tint-2: #7db4fa;
  --primary-tint-3: #9ecdfc;
  --primary-tint-4: #bfe6fe;
  --primary-tint-5: #ffffff;
}

/* Usage in gradients and variations */
<button style="background: linear-gradient(var(--primary), var(--primary-shade-2));">
  Gradient button
</button>
<div style="background: var(--primary-tint-4);">Light background</div>
```

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

### Global Stylesheet for Core Framework (CSS)

Source: https://docs.coreframework.com/official-ui-kits/violet

This CSS code defines global styles for various elements and components within the Core Framework. It includes styles for text links with icons, gradient text, tagged text, and primary/secondary pills. Ensure this is added to your global stylesheet for proper functionality of imported sections.

```css
.text-link--icon-right > .ct-fancy-icon {
    transition: transform 0.4s;
}
.text-link--icon-right:hover > .ct-fancy-icon {
    transform: translateX(3px);
}
.c-v-text-link--il > .ct-fancy-icon {
    transition: transform 0.4s;
}
.c-v-text-link--il:hover > .ct-fancy-icon {
    transform: translateX(-3px);
}
.text-gradient--primary{
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline;
    background-image: linear-gradient(120deg, var(--primary), var(--primary-l-2));
}
.text-tag--primary:after{
    padding: 4px 6px;
    border-radius: var(--radius-s);
    margin-left: var(--space-2xs);
    font-size: .8rem;
    letter-spacing: 0;
    text-transform: uppercase;
    background-color: var(--primary-10);
    color: var(--text-body);
    border: 1px solid var(--primary);
    font-weight: 500;
    content: attr(data-tag);
    margin-top: auto;
    margin-bottom: auto;
}
.text-tag--secondary:after {
    padding: 4px 6px;
    border-radius: var(--radius-s);
    margin-left: var(--space-2xs);
    font-size: .8rem;
    letter-spacing: 0;
    text-transform: uppercase;
    background-color: var(--secondary-10);
    color: var(--text-body);
    border: 1px solid var(--secondary);
    font-weight: 500;
    content: attr(data-tag);
    margin-top: auto;
    margin-bottom: auto;
}
.pill-primary {
    background-color: var(--primary-10);
    padding: 5px 10px;
    font-size: var(--text-s);
    color: var(--text-body);
    font-weight: 600;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: middle;
    border: 1px solid var(--primary);
}
.pill-secondary {
    background-color: var(--secondary-10);
    padding: 5px 10px;
    font-size: var(--text-s);
    color: var(--text-body);
    font-weight: 600;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: middle;
    border: 1px solid var(--secondary);
}
```

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

### Create Custom CSS Color Groups

Source: https://context7.com/context7/coreframework/llms.txt

Allows users to create custom named color groups (e.g., 'Status Colors') by adding individual colors. The example shows a 'Status Colors' group with utility classes for text and background color manipulation.

```css
/* Click "Create new color group" at bottom
 * Enter group name (e.g., "Status Colors")
 * Add colors with + icon
 */

/* Example: Status color group */
:root {
  /* Status Colors */
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;
}

/* With utility classes enabled */
.text-success { color: var(--success); }
.bg-success { background-color: var(--success); }
.text-error { color: var(--error); }
.bg-error { background-color: var(--error); }
```

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

### Generate Transparent CSS Variants

Source: https://context7.com/context7/coreframework/llms.txt

Automatically generates 9 levels of transparency (10% to 90%) for a base color. This is achieved by creating RGBA values for each transparency level. Usage examples demonstrate applying these variants to backgrounds.

```css
/* Check "Generate Transparent Variants" in color options
 * Automatically creates 9 transparency levels: 10% to 90%
 */

/* Generated transparent variants */
:root {
  --primary: #3b82f6;
  --primary-10: rgba(59, 130, 246, 0.1);
  --primary-20: rgba(59, 130, 246, 0.2);
  --primary-30: rgba(59, 130, 246, 0.3);
  --primary-40: rgba(59, 130, 246, 0.4);
  --primary-50: rgba(59, 130, 246, 0.5);
  --primary-60: rgba(59, 130, 246, 0.6);
  --primary-70: rgba(59, 130, 246, 0.7);
  --primary-80: rgba(59, 130, 246, 0.8);
  --primary-90: rgba(59, 130, 246, 0.9);
}

/* Usage example */
<div style="background: var(--primary-20);">20% opacity overlay</div>
<div style="background: var(--primary-80);">80% opacity background</div>
```

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

### Generate CSS Spacing Utility Classes

Source: https://context7.com/context7/coreframework/llms.txt

Generates CSS utility classes for spacing, including gap, margin, and padding. It utilizes CSS variables for consistent spacing values and provides examples for usage in HTML. These classes are defined within the Spacing section of the framework.

```css
/* Enable utility class generation in Spacing section
 * Three sets available: Gap, Margin, Padding
 */

/* Generated gap classes */
.gap-3xs { gap: var(--space-3xs); }
.gap-xs { gap: var(--space-xs); }
.gap-s { gap: var(--space-s); }
.gap-m { gap: var(--space-m); }
.gap-l { gap: var(--space-l); }
.gap-xl { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }

/* Generated margin classes */
.m-s { margin: var(--space-s); }
.mt-s { margin-top: var(--space-s); }
.mr-s { margin-right: var(--space-s); }
.mb-s { margin-bottom: var(--space-s); }
.ml-s { margin-left: var(--space-s); }
/* Repeats for all sizes */

/* Generated padding classes */
.p-m { padding: var(--space-m); }
.pt-m { padding-top: var(--space-m); }
.pr-m { padding-right: var(--space-m); }
.pb-m { padding-bottom: var(--space-m); }
.pl-m { padding-left: var(--space-m); }
/* Repeats for all sizes */

/* Usage in HTML */
<section class="p-2xl">
  <div class="mb-l">
    <h2 class="mb-m">Section Title</h2>
    <div class="gap-s" style="display: flex;">
      <button class="p-s">Button 1</button>
      <button class="p-s">Button 2</button>
    </div>
  </div>
</section>
```

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

### Custom CSS Utility Selector Groups (CSS)

Source: https://context7.com/context7/coreframework/llms.txt

This CSS code illustrates how to create custom utility classes within the Core Framework by defining selector groups. Examples include width utilities, flexbox utilities, and text alignment classes. These groups can be created by navigating to the relevant section and clicking 'Create a selector group'.

```css
/* Example: Width utility classes */
/* Group name: "Width Utilities" */
.full-width { width: 100%; }
.half-width { width: 50%; }
.third-width { width: 33.333%; }
.quarter-width { width: 25%; }

/* Example: Flexbox utilities */
/* Group name: "Flex Utilities" */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-between {
  display: flex;
  justify-content: space-between;
}
.flex-wrap { flex-wrap: wrap; }

/* Example: Text alignment */
/* Group name: "Text Alignment" */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* Using variables in custom groups */
/* Variables auto-populate in value dropdown */
.card-spacing { padding: var(--space-l); }
.hero-text { font-size: var(--text-3xl); }
.primary-bg { background-color: var(--primary); }
```

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

### Custom CSS Variable Groups (CSS)

Source: https://context7.com/context7/coreframework/llms.txt

This CSS code demonstrates the creation of custom variable groups in the Core Framework, which can then be used throughout your project. Examples include border-radius, z-index, animation durations, and container widths. These variables are defined within `:root` and can be referenced using the `var()` function in selector groups.

```css
/* Example: Border radius variables */
/* Group name: "Border Radius" */
:root {
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
}

/* Example: Z-index system */
/* Group name: "Z-Index" */
:root {
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* Example: Animation durations */
/* Group name: "Animations" */
:root {
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --easing-in: cubic-bezier(0.4, 0, 1, 1);
  --easing-out: cubic-bezier(0, 0, 0.2, 1);
  --easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Example: Container widths */
/* Group name: "Containers" */
:root {
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
}

/* Usage in selector groups */
.btn {
  border-radius: var(--radius-md);
  transition: all var(--duration-normal) var(--easing-out);
}

.modal {
  z-index: var(--z-modal);
  border-radius: var(--radius-lg);
}

.container {
  max-width: var(--container-xl);
  margin: 0 auto;
}
```

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

### Customize Excerpt Length using PHP Filter

Source: https://docs.coreframework.com/official-ui-kits/corekit

This PHP code snippet modifies the default excerpt length in WordPress. It uses the 'excerpt_length' filter to set a custom number of words for excerpts. This is useful for controlling the display of content summaries on blog archives and single posts.

```php
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );
/**
 * Change the length of excerpt.
 *
 * @param int $length The number of words. Default 55.
 * @return int New excerpt length.
 */
function custom_excerpt_length( $length ) {

    return 20; // number of words. Default is 55.

}
```

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

### Creating Shareable Remote Projects (Bash)

Source: https://context7.com/context7/coreframework/llms.txt

This section provides instructions in bash for creating shareable remote projects using the Core Framework web app. It outlines the steps to log in, locate the project, initiate sharing, make the project public, and copy the generated shareable URL. Recipients can preview or clone the shared project.

```bash
# 1. Login to web app: https://coreframework.com/app
# 2. Navigate to project list
# 3. Click share icon (bottom left of project card)
# 4. Modal opens with sharing options
# 5. Toggle "Make project shareable"
# 6. Copy generated URL

# Generated URL format:
# https://coreframework.com/shared/[unique-project-id]

# Recipients can:
# - Preview framework in read-only mode
# - Clone project to their account

```

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

### Implement Manual Theme Switching with JavaScript and HTML

Source: https://context7.com/context7/coreframework/llms.txt

Demonstrates manual theme switching using HTML classes and a JavaScript function. It covers applying dark mode to the entire site, inverting themes for specific sections, locking sections to a theme, and creating a custom toggle button.

```html
<!-- Switch entire site to dark mode -->
<html class="cf-theme-dark">
  <body>
    <!-- All content uses dark mode colors -->
  </body>
</html>

<!-- Switch single section with theme-inverted -->
<body>
  <section>Light mode content</section>
  <section class="theme-inverted">
    Dark mode section in light page
  </section>
  <section>Back to light mode</section>
</body>

<!-- Lock sections to specific theme -->
<div class="theme-always-light">
  Always light, ignores theme toggle
</div>

<div class="theme-always-dark">
  Always dark, ignores theme toggle
</div>

<!-- Custom toggle element (with Oxygen/Bricks addon) -->
<button id="theme-toggle" onclick="toggleTheme()">
  Toggle Theme
</button>

<script>
function toggleTheme() {
  document.documentElement.classList.toggle('cf-theme-dark');
}
</script>
```

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

### Oxygen Builder Addon Integration (PHP)

Source: https://context7.com/context7/coreframework/llms.txt

Shows how to integrate the Core Framework with Oxygen Builder by configuring Global Styles for colors and typography, and demonstrates using Core Framework classes within Oxygen.

```php
<?php
// After installing Core Framework addon for Oxygen
// Configure Global Styles in Oxygen Builder

// Settings → Global Styles → Colors
// Link Core Framework color variables
{
  "Primary Color": "var(--primary)",
  "Secondary Color": "var(--secondary)",
  "Text Color": "var(--text-base)",
  "Background Color": "var(--bg-base)"
}

// Settings → Global Styles → Typography
{
  "Base Font Size": "var(--text-m)",
  "H1 Size": "var(--text-3xl)",
  "H2 Size": "var(--text-2xl)",
  "H3 Size": "var(--text-xl)"
}

// Using Core Framework classes in Oxygen
?>
<div class="columns-3 columns-2--on-l column--on-s gap-l p-2xl">
  <div class="card">
    <h3 class="text-xl mb-m">Card Title</h3>
    <p class="text-m">Content here</p>
    <button class="btn btn-primary">Action</button>
  </div>
</div>

<!-- Dark mode toggle element available in addon -->
<div id="cf-theme-toggle">Toggle Dark Mode</div>

```

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

### WooCommerce Quick View AJAX - PHP

Source: https://docs.coreframework.com/official-ui-kits/woocore

Handles AJAX requests to fetch product details for a quick view modal. It retrieves product name, price, description, stock status, attributes, and images. Requires WooCommerce and WordPress AJAX. Returns JSON data.

```php
function coreframework_quick_view()
{
    if (!isset($_POST['product_id'])) {
        wp_send_json_error('Invalid request');
        wp_die();
    }

    $product_id = absint($_POST['product_id']);
    if (!$product_id) {
        wp_send_json_error('Invalid product ID');
        wp_die();
    }

    $product = wc_get_product($product_id);
    if (!$product) {
        wp_send_json_error('Product not found');
        wp_die();
    }

    $data = [
        'name' => $product->get_name(),
        'price' => $product->get_regular_price(),
        'price_html' => wc_price($product->get_regular_price()),
        'sale' => wc_price($product->get_sale_price()),
        'sale_html' => $product->get_sale_price(),
        'type' => $product->get_type(),
        'short_description' => $product->get_short_description(),
        'stock' => $product->get_stock_status(),
        'attributes' => $product->get_attributes(),
        'image_id' => $product->get_image_id(),
        'image' => $product->get_image(),
        'image_gallery' => $product->get_gallery_image_ids(),
    ];

    wp_send_json($data);
    wp_die();
}

// Register AJAX actions for logged-in and logged-out users
add_action('wp_ajax_coreframework_quick_view', 'coreframework_quick_view');
add_action('wp_ajax_nopriv_coreframework_quick_view', 'coreframework_quick_view');

```

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

### Responsive Grid Layouts with Breakpoints (HTML/CSS)

Source: https://context7.com/context7/coreframework/llms.txt

Demonstrates how to create responsive grid layouts using breakpoint suffixes (--on-s, --on-m, --on-l, --on-xl) to adjust column counts based on screen size. This allows for flexible designs adapting from mobile to desktop.

```html
<!-- Breakpoint suffixes (right to left):
  -- --on-s : Small (smartphones)
  -- --on-m : Medium (large tablets)
  -- --on-l : Large (tablets)
  -- --on-xl : Extra Large (large desktop) 
  -->

<!-- Responsive grid: 3 cols → 2 cols (tablet) → 1 col (mobile) -->
<div class="columns-3 columns-2--on-l column--on-s gap-m full-width">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
</div>

<!-- 4 columns → 2 columns on medium → 1 column on small -->
<div class="columns-4 columns-2--on-m column--on-s gap-l">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
  <div>Card 4</div>
</div>
```

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

### Basic Grid System Classes (HTML/CSS)

Source: https://context7.com/context7/coreframework/llms.txt

Provides utility classes for creating grid layouts with predefined column counts (2 to 8 columns). These classes utilize CSS Grid for layout. No external dependencies are required.

```html
<!-- Core Framework includes grid utility classes by default -->

<style>
/* Available column classes */
.column { display: grid; grid-template-columns: 1fr; }
.columns-2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.columns-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.columns-4 { display: grid; grid-template-columns: repeat(4, 1fr); }
.columns-5 { display: grid; grid-template-columns: repeat(5, 1fr); }
.columns-6 { display: grid; grid-template-columns: repeat(6, 1fr); }
.columns-7 { display: grid; grid-template-columns: repeat(7, 1fr); }
.columns-8 { display: grid; grid-template-columns: repeat(8, 1fr); }
</style>

<!-- Basic 3-column grid -->
<div class="columns-3 gap-m full-width">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
</div>
```

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

### Exporting CSS for Production (JavaScript and HTML)

Source: https://context7.com/context7/coreframework/llms.txt

This section details how to export CSS from the Core Framework for production use. It outlines three methods: downloading a CSS file, copying the full CSS, or copying the minified CSS. The provided HTML shows how to link the downloaded CSS file or embed the copied CSS directly within a `<style>` tag, demonstrating variable and class usage.

```javascript
// Navigate to Preview CSS section
// Three export options available:

// 1. Download CSS file
// Click "Download CSS" button
// File named: {project-title}.css

// 2. Copy full CSS
// Click "Copy Full CSS" button
// Paste into your stylesheet

// 3. Copy minified CSS
// Click "Copy Minified" button
// Smaller file size for production

// Example integration in HTML
```

```html
<!-- Link to downloaded CSS file -->
<link rel="stylesheet" href="my-framework.css">

<!-- Or inline in <style> tag -->
<style>
  /* Paste copied CSS here */
  :root {
    --primary: #3b82f6;
    --space-m: clamp(1.5rem, 1.425rem + 0.375vw, 1.6875rem);
    /* ... all your variables */
  }

  .btn {
    padding: var(--space-s) var(--space-m);
    background-color: var(--primary);
    /* ... all your classes */
  }
</style>
```

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

### Quick View Product Data AJAX Handler (PHP) - CoreFramework

Source: https://docs.coreframework.com/official-ui-kits/woocore

Handles AJAX requests to retrieve detailed product information for a quick view feature. It fetches product data such as name, price, description, stock status, and images using WooCommerce functions. Input is a product ID, and output is a JSON object containing product details.

```php
function coreframework_quick_view()
{
    if (!isset($_POST['product_id'])) {
        wp_send_json_error('Invalid request');
        wp_die();
    }

    $product_id = absint($_POST['product_id']);
    if (!$product_id) {
        wp_send_json_error('Invalid product ID');
        wp_die();
    }

    $product = wc_get_product($product_id);
    if (!$product) {
        wp_send_json_error('Product not found');
        wp_die();
    }

    $data = [
        'name' => $product->get_name(),
        'price' => $product->get_regular_price(),
        'price_html' => wc_price($product->get_regular_price()),
        'sale' => wc_price($product->get_sale_price()),
        'sale_html' => $product->get_sale_price(),
        'type' => $product->get_type(),
        'short_description' => $product->get_short_description(),
        'stock' => $product->get_stock_status(),
        'attributes' => $product->get_attributes(),
        'image_id' => $product->get_image_id(),
        'image' => $product->get_image(),
        'image_gallery' => $product->get_gallery_image_ids(),
    ];

    wp_send_json($data);
    wp_die();
}

// Register AJAX actions for logged-in and logged-out users
// Note: The original text had a comment but no actual add_action for coreframework_quick_view
// Assuming it should be registered similar to the minicart add action:
// add_action('wp_ajax_coreframework_quick_view', 'coreframework_quick_view');
// add_action('wp_ajax_nopriv_coreframework_quick_view', 'coreframework_quick_view');

```

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

### Import Remote Projects (JavaScript)

Source: https://context7.com/context7/coreframework/llms.txt

Demonstrates how to import remote projects into a web application or WordPress plugin by following a few simple steps. This facilitates team collaboration and distribution of design kits.

```javascript
// Import in Web App
// 1. Navigate to project list
// 2. Click "Remote Import" button
// 3. Paste shared project URL
// 4. Choose "Preview" or "Clone to my projects"

// Import in WordPress Plugin
// 1. Open Core Framework in dashboard
// 2. Navigate to "Manage Project" section
// 3. Click "Remote Import"
// 4. Paste shared project URL
// 5. Click "Import"

// Use case: Team workflows
{
  "scenario": "Design system for team",
  "setup": "Lead designer creates master project",
  "sharing": "Generate remote URL and share with team",
  "benefits": [
    "Team always has latest version",
    "No file version management",
    "Instant updates when master changes",
    "Can clone and customize per project"
  ]
}

// Use case: Selling design kits
{
  "scenario": "Marketplace author selling UI kits",
  "setup": "Create polished design system",
  "distribution": "Provide remote URL to customers",
  "benefits": [
    "Customers always get latest updates",
    "No need to send new files for updates",
    "Customers can preview before purchasing",
    "Easy integration into customer projects"
  ]
}
```

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

### Complex Grid Layout with Responsive Breakpoints (HTML)

Source: https://context7.com/context7/coreframework/llms.txt

This HTML snippet demonstrates a complex, magazine-style grid layout using classes from the Core Framework. It includes responsive adjustments for different screen sizes (xl, l, s) and defines article spans for featured content, sidebars, and full-width banners. Ensure your builder settings match the specified breakpoints.

```html
<style>
/* Ensure breakpoints match your builder settings */
/* Core Framework breakpoints */
@media (max-width: 1200px) { /* --on-xl */ }
@media (max-width: 991px) { /* --on-l */ }
@media (max-width: 767px) { /* --on-m */ }
@media (max-width: 479px) { /* --on-s */ }
</style>

<!-- Magazine-style layout -->
<div class="columns-4 columns-2--on-l column--on-s gap-l">
  <!-- Featured article: 2 cols × 2 rows on desktop -->
  <article class="col-span-2 row-span-2 col-span-1--on-l row-span-1--on-l">
    <h2>Featured Article</h2>
    <p>Large featured content...</p>
  </article>

  <!-- Sidebar articles -->
  <article>
    <h3>Article 2</h3>
  </article>
  <article>
    <h3>Article 3</h3>
  </article>

  <!-- Full-width banner: spans all 4 columns -->
  <div class="col-span-4 col-span-2--on-l col-span-1--on-s">
    <div class="banner">Advertisement</div>
  </div>

  <!-- Regular articles -->
  <article>Article 4</article>
  <article>Article 5</article>
  <article>Article 6</article>
  <article>Article 7</article>
</div>
```

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

### Retrieve Core Framework Stylesheet Information

Source: https://docs.coreframework.com/development/coreframework-helper

This PHP snippet shows how to retrieve the URL, server path, and version of the Core Framework stylesheet using the Helper class. These methods are available since version 1.3.3.

```php
use CoreFramework\Helper;

$helper = new Helper();

$stylesheet_url = $helper->getStylesheetUrl();
$stylesheet_path = $helper->getStylesheetPath();
$stylesheet_version = $helper->getStylesheetVersion();
```

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

### Card Component Styling (HTML/CSS)

Source: https://context7.com/context7/coreframework/llms.txt

Defines the styles for a reusable card component, including base styles, hover effects, and a 'featured' modifier. It also includes accessibility enhancements for links and focus states. No external dependencies are required.

```html
<style>
/* Card component with modifiers and states */
.card {
  background-color: var(--bg-base);
  border-radius: 0.75rem;
  padding: var(--space-l);
  box-shadow: 0 2px 8px var(--primary-10);
  transition: all 0.3s ease;
}

.card:hover {
  box-shadow: 0 8px 24px var(--primary-20);
  transform: translateY(-4px);
}

/* Featured modifier */
.card-featured {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
}

.card-featured:hover {
  box-shadow: 0 12px 32px var(--primary-40);
}

/* Card title selector */
.card h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-s);
}

/* Card link selector with expand-click for accessibility */
.card a.expand-click {
  position: relative;
}

.card a.expand-click::after {
  content: '';
  position: absolute;
  inset: 0;
}

.card a:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
</style>

<!-- Usage -->
<div class="card" style="position: relative;">
  <h3>Card Title</h3>
  <p>Card description text here.</p>
  <a href="#" class="expand-click">Read more</a>
</div>

<div class="card card-featured">
  <h3>Featured Card</h3>
  <p>This card has a gradient background.</p>
</div>
```

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

### Production Preferences Configuration in JavaScript

Source: https://context7.com/context7/coreframework/llms.txt

Details the JavaScript object for configuring production-level preferences in Core Framework. This includes project settings (title, theme, font size, screen width), CSS processing options (PostCSS, REM units, gradients), prefixes for classes and variables, accessibility settings, and output formatting.

```javascript
// Navigate to Preferences section
// Project Settings
{
  "projectTitle": "My Website Framework",
  "defaultTheme": "auto", // "light", "dark", or "auto" (system preferences)
  "rootFontSize": "100%", // or "62.5%"
  "minScreenWidth": "375px",
  "maxScreenWidth": "1440px" // Match your builder's max width
}

// CSS Processing
{
  "enablePostCSS": true, // Auto-adds vendor prefixes
  "outputREMUnits": true, // Converts px to rem
  "smoothLinearGradients": true // Enhanced visual gradients
}

// Prefixes (set before building site!)
{
  "classPrefix": "cf-", // Avoid conflicts: "cf-btn" instead of "btn"
  "variablePrefix": "my-" // Avoid conflicts: "--my-primary" instead of "--primary"
}

// Accessibility
{
  "disableHoverOnTouch": true,
  "respectReducedMotion": true,
  "enableClickableParent": true, // Creates .expand-click class
  "disableFocusableParentOnClick": false
}

// Output
{
  "addGroupComments": true // Adds CSS comments for organization
}
```

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

### Create Base Button Component Styles (HTML/CSS)

Source: https://context7.com/context7/coreframework/llms.txt

Defines the base styles for a button component using CSS, including display, padding, font properties, border, and transition effects. It also sets the default background color and text color. This is part of the Component Editor's functionality for creating new components.

```html
<!-- Navigate to Components section
  -- Click + icon to create new component
  -- Select type: button, link, card, icon, avatar, etc. 
  -->

<!-- Example: Creating a button component -->
<!-- 1. Click + icon and select "button" type -->
<!-- 2. Click "Edit" button on component -->
<!-- 3. Name your base class -->

<style>
/* Base button styles - "Default styles" section */
.btn {
  display: inline-block;
  padding: var(--space-s) var(--space-m);
  font-size: var(--text-m);
  font-weight: 600;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: var(--primary);
  color: white;
}
</style>

<!-- Live preview updates as you type -->
```