NO PRODUCT SETTINGS FOUND FOR:

documentation

Gentle remainder that the product name comes from the `origin` first subfolder (after `/pms` ).

Fragment Architecture Guide

HTML Structure Pattern

Consistent Two-Level Architecture

All fragments follow this pattern:

&lt;div class="fragment-wrapper {custom-classes}" data-f_type="{type}"&gt;
  &lt;{element} class="fragment {element-specific-classes}" data-f_type="{type}"&gt;
    {content}
  &lt;/{element}&gt;
&lt;/div&gt;

Benefits of This Approach

Dual-level data attributes: Both wrapper and inner element have data-f_type
Enables flexible CSS targeting: .fragment[data-f_type="h1_"] or .fragment-wrapper[data-f_type="h1_"]
Better JavaScript selectors for different use cases
Clearer debugging in browser DevTools
Wrapper for layout control:
Handles spacing between fragments
Applies custom classes from markdown
Controls max-width and alignment
Inner element for content:
Has semantic HTML element (h1, p, blockquote, etc.)
Carries the fragment class for consistent styling
Contains the actual content

Fragment Types and Their Elements

Fragment Type	Inner Element	Notes
`h1_`	`<h1>`	Direct heading element
`h2_`	`<h2>`	Direct heading element
`h3_`	`<h3>`	Direct heading element
`h4_`	`<h4>`	Direct heading element
`p_`	`<p>`	Paragraph element
`q_`	`<blockquote>`	Quote element
`hr_`	`<hr>`	Horizontal rule
`ul_`	`<ul>`	Unordered list
`ol_`	`<ol>`	Ordered list
`table_`	`<div>`	Container for table
`image_`	`<div>`	Container for img
`svg_`	`<div>`	Container for SVG
`code_`	`<div>`	Container for pre/code
`codex_`	`<div>`	Container for CodeMirror
`radio_`	`<div>`	Interactive radio container
`maths_`	`<div>`	Math input container
`graph_`	`<div>`	Graph visualization
`tabvar_`	`<div>`	Variation table
`toc_`	`<nav>`	Table of contents

CSS Targeting Examples

/* Target all fragments of a specific type */
.fragment[data-f_type="h1_"] {
  /* Styles for h1 content */
}

/* Target wrapper for spacing */
.fragment-wrapper[data-f_type="p_"] + .fragment-wrapper[data-f_type="h2_"] {
  margin-top: 2rem;
}

/* Target by both class and type */
.fragment.lead[data-f_type="p_"] {
  font-size: 1.25rem;
}

/* Custom class on wrapper */
.fragment-wrapper.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

JavaScript Selectors

// Select all headings
const headings = document.querySelectorAll('.fragment[data-f_type^="h"]');

// Select specific fragment type
const radios = document.querySelectorAll('.fragment[data-f_type="radio_"]');

// Select wrapper for layout manipulation
const wrappers = document.querySelectorAll('.fragment-wrapper[data-f_type="image_"]');

// Query within a specific fragment
const radioButtons = fragment.querySelectorAll('button[data-flag]');

Special Cases

Radio Fragments

Radio fragments have additional nested structure for feedback:

&lt;div class="fragment-wrapper" data-f_type="radio_"&gt;
  &lt;div class="fragment" data-f_type="radio_"&gt;
    &lt;!-- Radio buttons --&gt;
    &lt;div id="radio-feedback-{index}"&gt;...&lt;/div&gt;
    &lt;div id="radio-explanation-{index}"&gt;...&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

Tables

Tables maintain their semantic structure:

&lt;div class="fragment-wrapper" data-f_type="table_"&gt;
  &lt;div class="fragment overflow-x-auto" data-f_type="table_"&gt;
    &lt;table class="fragment-table"&gt;
      &lt;!-- Table content --&gt;
    &lt;/table&gt;
  &lt;/div&gt;
&lt;/div&gt;

Migration Notes

When updating existing code: 1. Remove unnecessary intermediary divs 2. Apply fragment class directly to semantic elements 3. Add data-f_type to both wrapper and fragment 4. Ensure custom classes go on the wrapper

Benefits Summary

Consistency: All fragments follow the same pattern
Flexibility: Dual targeting for CSS and JS
Semantic: Uses appropriate HTML elements
Maintainable: Clear separation of concerns
Debuggable: Easy to identify in DevTools
Extensible: Easy to add new fragment types