Utilities
Position
Position reference for TicFrame utilities, covering usage, accessibility, responsive behavior, dark mode, RTL, source examples, and production guidance.
Requirements
Position is implemented with semantic HTML, TicFrame classes, design tokens, responsive utilities, and documented data attributes. It does not require website-specific CSS.
tf-* namespace consistently so the class validator can prove every visual dependency ships from TicFrame.Usage Guidance
Start with the semantic element, add the matching TicFrame component or utility classes, and use data attributes only for behavior that TicFrame documents. Keep labels, headings, and landmarks visible to assistive technology.
Responsive
Mobile-first utilities such as md:tf-grid-cols-3 scale the layout.
Dark mode
Colors resolve through data-tf-theme and semantic tokens.
RTL
Logical spacing and direction-aware JS keep the component mirrored safely.
Live Example
This feature uses official TicFrame classes, tokens, and progressive JavaScript where needed.
<div class="tf-card"><div class="tf-card-body"><p class="tf-text-muted">This feature uses official TicFrame classes, tokens, and progressive JavaScript where needed.</p></div></div>Reference
| Area | Contract |
|---|---|
| Classes | tf-container, tf-card, tf-btn, and feature-specific tf-* classes. |
| Accessibility | Keyboard access, visible focus, associated labels, ARIA only where native HTML needs support. |
| JavaScript | Automatic initialization through TicFrame.init() and the documented data API. |
| Tokens | --tf-color-*, --tf-space-*, --tf-radius-*, and --tf-shadow-*. |
Generated Source
Utilities are generated by scripts/generate-utilities.mjs, indexed in dist/metadata/classes.json, and validated before the site ships.
<div class="tf-flex tf-gap-4 md:tf-grid md:tf-grid-cols-3">
<span class="tf-badge">Responsive</span>
<span class="tf-badge">State variants</span>
</div>