### Install augmented-ui with NPM Source: https://augmented-ui.com/docs/index This command shows how to install the augmented-ui library using NPM, a package manager for Node.js. After installation, the CSS file needs to be included in your project. ```bash $ npm install augmented-ui ``` -------------------------------- ### Augmented-UI Mixin Example with Customization (CSS) Source: https://augmented-ui.com/docs/index This CSS snippet demonstrates how to use the augmented-ui mixin layer to apply custom styles. It sets properties for borders, backgrounds, inlays, and extensions, offering a quick way to achieve complex UI effects. ```css .pitch-mixin { --aug-tr: 25px; --aug-b-extend1: 50%; --aug-border-all: 7px; --aug-border-bg: radial-gradient( at top, gold 25%, transparent 50% ), url("/img/what_a_save.gif") 50% 50% / 100% 100%; --aug-inlay-all: 4px; --aug-inlay-bg: radial-gradient(gold, black); --aug-inlay-opacity: 0.5; } ``` -------------------------------- ### Augmented-UI Core Example with Hover States (CSS) Source: https://augmented-ui.com/docs/index This CSS demonstrates the core approach of augmented-ui, allowing direct manipulation of CSS variables for various effects like borders, inlays, and clipping. It also includes hover states to dynamically change the UI, showcasing the power of CSS selectors over JavaScript for state management. ```css .pitch-core { --aug-border: initial; --aug-border-all: 7px; --aug-border-bg: radial-gradient( at top, gold 25%, transparent 50% ), url("/img/what_a_save.gif") 50% 50% / 100% 100%; --aug-inlay: initial; --aug-inlay-all: 4px; --aug-inlay-bg: radial-gradient( at center center, gold, black ); --aug-inlay-opacity: 0.5; --aug-clip-b1: initial; --aug-clip-b2: initial; --aug-b-extend1: 50%; } .pitch-core:not(:hover) { --aug-clip-tl1: initial; --aug-tl-inset1: 30px; --aug-tl1-alt-join-in: initial; --aug-scoop-tr1: initial; --aug-tr1: 25px; } .pitch-core:hover { --aug-clip-t1: initial; --aug-clip-t2: initial; --aug-clip-r1: initial; --aug-clip-r2: initial; --aug-clip-l1: initial; --aug-clip-l2: initial; --aug-t-extend1: 50%; --aug-r-extend1: 50%; --aug-l-extend1: 50%; } ``` -------------------------------- ### Overriding default styles with class selector Source: https://augmented-ui.com/docs/index This CSS example illustrates how to override augmented-ui's default styles. Due to augmented-ui using attribute selectors, a CSS class selector must be used to ensure higher specificity, as demonstrated by setting the --aug-t variable. ```css div { --aug-t: 50px; } /* This will NOT override */ .divclass { --aug-t: 50px; } /* This WILL override */ ``` -------------------------------- ### CSS: Disabling Augmented UI Core Augs Source: https://augmented-ui.com/docs/index This CSS example demonstrates how to disable or turn off an augmented UI aug at a specific position. It involves setting the corresponding CSS variable to a single space character (`: ;`). This technique is useful for conditional styling, such as when dealing with element states like `:last-child` or other dynamic selector logic. ```css --aug-clip-tl1: ; ``` -------------------------------- ### CSS: Initializing Augmented UI Core Augs Source: https://augmented-ui.com/docs/index This snippet shows the basic CSS syntax for initializing a core augmented UI ('aug') on a specific position. It explains how to use the `--aug-[aug name]-[aug position]: initial;` format. This is fundamental for enabling any of the five core aug types (clip, round, scoop, rect, step) on the 16 available positions. ```css --aug-clip-tl1: initial; --aug-round-t1: initial; --aug-scoop-br1: initial; --aug-rect-b1: initial; --aug-step-l1: initial; ``` -------------------------------- ### Augmented UI Initialization with Leading Comma (CSS) Source: https://augmented-ui.com/docs/index Augmented UI utilizes a specific initialization pattern involving a leading comma within a CSS custom property and an empty fallback in `var()`. This approach is necessary for compatibility with how Augmented UI parses CSS but requires feature detection to avoid issues in older browser versions. ```css @supports (--foo: , 0 0) { /* Styles that use the Augmented UI leading comma pattern */ .element { --aug-overlay: 1; /* ... other augmented-ui properties */ } } /* Fallback for browsers that don't support @supports or the pattern */ .element { --aug-overlay: 0; /* ... potentially default styles */ } /* Example of the var() usage with empty fallback */ .element-with-aug { background-color: var(--aug-background, var(--aug-overlay, 0) == 1 ? #eee : transparent); } ``` -------------------------------- ### Nesting Augmented Elements with Reset Layer (HTML) Source: https://augmented-ui.com/docs/index Demonstrates how to nest augmented elements. A reset layer (`data-augmented-ui-reset`) is typically required between a parent and child augmented element to ensure proper styling and inheritance. This is crucial for managing unique configurations on descendant elements. ```html
  Augmented Parent Container   
``` -------------------------------- ### Include augmented-ui CSS via CDN Source: https://augmented-ui.com/docs/index This HTML snippet demonstrates how to include the augmented-ui CSS file directly from a CDN. This method is suitable for small projects and requires the link tag to be placed before other stylesheets that utilize augmented-ui. ```html ``` -------------------------------- ### Enabling Delegated Inlay for Augmented UI (CSS) Source: https://augmented-ui.com/docs/index Sets up a delegated inlay for augmented UI. `--aug-inlay` activates the inlay augmentation, and `--aug-delegated-inlay` indicates that a child element will function as the inlay. ```css --aug-inlay: initial; --aug-delegated-inlay: initial; ``` -------------------------------- ### Designating a Delegate Inlay Element (HTML) Source: https://augmented-ui.com/docs/index Identifies a child element as the delegated inlay for its augmented UI parent. The content of this element will be displayed as the inlay, and its appearance is governed by the parent's augmented UI configurations. ```html
``` -------------------------------- ### Adding Inlay to Augmented UI Element (CSS) Source: https://augmented-ui.com/docs/index Configures an augmented UI inlay using the `--aug-inlay` CSS variable. Setting it to 'initial' activates the default inlay augmentation. ```css --aug-inlay: initial; ``` -------------------------------- ### Adding Both Border and Inlay to Augmented UI Element (HTML) Source: https://augmented-ui.com/docs/index Applies both border and inlay augmentations to an element simultaneously using the 'both' value for the `data-augmented-ui` attribute. This is a convenient shorthand for elements requiring both decorative borders and inlays. ```html
``` -------------------------------- ### Augmented UI Special Mixins - All Triangle Variants Source: https://augmented-ui.com/docs/index These mixins apply a triangle shape across all edge regions. Variants include 'up', 'down', 'right', and 'left'. Sizing requires using '--aug-all-width' or '--aug-all-height' to preserve the aspect ratio, as standard CSS sizing is not supported. Inlay is not supported. ```HTML
``` -------------------------------- ### Conditional Styling with CSS @supports Source: https://augmented-ui.com/docs/index This CSS snippet demonstrates how to conditionally apply augmented-ui styles only in browsers that support it. It uses the @supports rule to check for custom property support and clip-path functionality, ensuring older browsers are not affected by potential visual obstructions. ```css @supports (--foo: , 0 0) and ((clip-path: polygon(0 0, 100% 0, 50% 50%)) or (-webkit-clip-path: polygon(0 0, 100% 0, 50% 50%))) { /* augmented-ui styles here */ } ``` -------------------------------- ### Adding Inlay to Augmented UI Element (HTML) Source: https://augmented-ui.com/docs/index Applies an inlay to an element using the `data-augmented-ui` attribute with the 'inlay' value. This enables the inlay augmentation, typically visualized using the ::before pseudo-element. ```html
``` -------------------------------- ### Augmented UI Special Mixins - All Hex and Alt Hex Source: https://augmented-ui.com/docs/index These mixins configure all edge regions simultaneously to create a hexagonal shape. '--aug-all-hex' and '--aug-all-hex-alt' offer variations. Sizing is controlled via '--aug-all-width' or '--aug-all-height' to maintain aspect ratio, not with standard CSS properties. Inlay is not supported. ```HTML
``` -------------------------------- ### Adding Border to Augmented UI Element (CSS) Source: https://augmented-ui.com/docs/index Configures an augmented UI border using the `--aug-border` CSS variable. Setting it to 'initial' enables the default border augmentation behavior. ```css --aug-border: initial; ``` -------------------------------- ### Enabling Delegated Inlay for Augmented UI (HTML) Source: https://augmented-ui.com/docs/index Activates a delegated inlay for an augmented UI element via the `data-augmented-ui` attribute set to 'delegated-inlay'. This designates a child element to render the inlay. ```html
``` -------------------------------- ### Designating a Delegate Border Element (HTML) Source: https://augmented-ui.com/docs/index Marks a child element to serve as the delegated border for its augmented UI parent. Any content within this element will be rendered as the border, with styles controlled by the parent's augmented UI settings. ```html
``` -------------------------------- ### CSS: Multi-Gradient Background for Augmented Border Source: https://augmented-ui.com/docs/index This CSS code demonstrates how to apply multiple radial gradients to an augmented border. It utilizes custom CSS properties to define the size, color, and positioning of each gradient, creating a visually complex border effect. This approach is useful for creating unique UI elements with depth and texture. ```css .reticle { --aug-all-width: 150px; --reticle-color: #00bfff; --reticle-size: calc(var(--aug-all-width) * 0.25); --aug-border-bg: radial-gradient( circle at top center, var(--reticle-color) var(--reticle-size), transparent var(--retize) ), radial-gradient( circle at bottom 13.92% right 6.89%, var(--reticle-color) var(--reticle-size), transparent var(--retize) ), radial-gradient( circle at bottom 13.92% left 6.89%, var(--reticle-color) var(--retize), transparent var(--retize) ); } ``` -------------------------------- ### Adding Border to Augmented UI Element (HTML) Source: https://augmented-ui.com/docs/index Applies a border to an element using the `data-augmented-ui` attribute with the 'border' value. This is a shorthand for enabling the border augmentation, which is typically rendered using the ::after pseudo-element. ```html
``` -------------------------------- ### Augmented UI Edge Region Mixins - Step, Round, and Scoop Variants Source: https://augmented-ui.com/docs/index These mixins create distinct visual effects on edge regions: 'step' for a stepped appearance, 'round' for rounded corners, and 'scoop' for a scooped or carved look. Variants like '-x', '-y', and '-xy' allow for axis-specific application of these effects. They are useful for adding depth and unique styling to UI elements. ```CSS .element { /* Example for top edge step */ --aug-t-step-xy: 8px; /* Example for right edge round */ --aug-r-round-xy: 15px; /* Example for bottom edge scoop */ --aug-b-scoop: 10px; /* Example for left edge scoop with y-axis */ --aug-l-scoop-y: 12px; } ``` -------------------------------- ### Enabling Delegated Border for Augmented UI (HTML) Source: https://augmented-ui.com/docs/index Enables a delegated border for an augmented UI element using the `data-augmented-ui` attribute with 'delegated-border'. This allows a child element to be designated as the border. ```html
``` -------------------------------- ### Augmented UI Special Mixins - All Hexangle Variants Source: https://augmented-ui.com/docs/index These mixins create a hexagonal-angled shape across all edge regions, with variations for 'up', 'down', 'right', and 'left'. Sizing must be managed using '--aug-all-width' or '--aug-all-height' to maintain aspect ratio, as standard CSS properties are not effective. Inlay is not supported. ```HTML
``` -------------------------------- ### Enabling Delegated Border for Augmented UI (CSS) Source: https://augmented-ui.com/docs/index Configures a delegated border for an augmented UI element. `--aug-border` enables the feature, and `--aug-delegated-border` signifies that a child element will serve as the border. ```css --aug-border: initial; --aug-delegated-border: initial; ``` -------------------------------- ### Augmented UI Edge Region Mixins - Clip and Rect Variants Source: https://augmented-ui.com/docs/index These mixins configure specific edge regions (top, right, bottom, left) with clipping or rectangular shapes. Variants include '-x', '-y', and '-xy' to control clipping/rectangles along axes. They are essential for creating detailed UI elements by defining precise borders and shapes. ```CSS .element { /* Example for top edge clip */ --aug-t-clip: 10px; /* Example for right edge clip with x-axis */ --aug-r-clip-x: 15px; /* Example for bottom edge clip with y-axis */ --aug-b-clip-y: 20px; /* Example for left edge rect */ --aug-l-rect: 5px; /* Example for top edge rect with xy-axis */ --aug-t-rect-xy: 12px; } ``` -------------------------------- ### Nesting Augmented Elements CSS Selector (CSS) Source: https://augmented-ui.com/docs/index This CSS selector illustrates the structure for nesting augmented elements, emphasizing the use of a reset layer between parent and child augmented elements. It ensures that styles applied to nested elements do not unintentionally affect their augmented ancestors. ```css [data-augmented-ui] [data-augmented-ui-reset] [data-augmented-ui] ``` -------------------------------- ### Augmented UI Mixin Scaling Properties Source: https://augmented-ui.com/docs/index These CSS custom properties allow you to scale the visual size of mixins applied to specific edge regions. They default to 15px and accept `` values (e.g., px), but not percentages. They act as shortcuts to adjust multiple core properties simultaneously. ```CSS .element { /* Scale top-left corner mixin */ --aug-tl: 20px; /* Scale top edge mixin */ --aug-t: 18px; /* Scale top-right corner mixin */ --aug-tr: 22px; /* Scale right edge mixin */ --aug-r: 16px; /* Scale bottom-right corner mixin */ --aug-br: 19px; /* Scale bottom edge mixin */ --aug-b: 17px; /* Scale bottom-left corner mixin */ --aug-bl: 21px; /* Scale left edge mixin */ --aug-l: 14px; } ``` -------------------------------- ### Setting Aug Position Dimensions (CSS) Source: https://augmented-ui.com/docs/index These CSS custom properties control the size, width, and height of augmented elements positioned on an element. They accept length or percentage values. If an aug is not present, the dimension is treated as 0px. Using percentages with certain clip modes can lead to visual distortions if the aspect ratio is not 1:1. ```css /* Example using --aug-t1 for top-center position */ .element { --aug-t1: 20px; /* Sets the overall size */ --aug-t1-width: 30px; /* Explicitly sets width */ --aug-t1-height: 10px; /* Explicitly sets height */ } /* Example using percentages */ .element-percent { --aug-t1: 50%; /* Size relative to the element */ --aug-t1-width: 75%; /* Width relative to the element */ --aug-t1-height: 25%; /* Height relative to the element */ } ``` -------------------------------- ### Adjusting Aug Clipping Modifiers (CSS) Source: https://augmented-ui.com/docs/index These CSS custom properties (`--aug-[aug pos]-clipmod-x` and `--aug-[aug pos]-clipmod-y`) allow fine-tuning of clip angles for augmented elements, particularly when using custom width-to-height ratios. They are used to prevent pinching of borders and inlay gaps. The values are calculated based on the aug's width and height. ```css /* Example for a specific position like top-left 1 */ .element { --aug-tl1-width: 40px; --aug-tl1-height: 20px; /* Calculate clipmod values */ --aug-tl1-clipmod-x: calc(var(--aug-tl1-width) / (var(--aug-tl1-width) + var(--aug-tl1-height))); --aug-tl1-clipmod-y: calc(var(--aug-tl1-height) / (var(--aug-tl1-width) + var(--aug-tl1-height))); } /* Example using Sass/SCSS for calculation */ .element-sass { $aug-w: 60px; $aug-h: 30px; --aug-tl1-width: #{$aug-w}; --aug-tl1-height: #{$aug-h}; --aug-tl1-clipmod-x: #{$aug-w / ($aug-w + $aug-h)}; --aug-tl1-clipmod-y: #{$aug-h / ($aug-w + $aug-h)}; } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.