FrankUICommon CSS & Utilities
FrankUI provides utility helper classes for rapid layout adjustments, positioning elements, spacing, typography, and more. Select a section below to explore the reference documentation and interactive playgrounds:
📏 Spacing Utilities
Configure margin and padding rules across all sides or individual directions based on the 4px design token scale.
📍 Position Utilities
Position elements using static, relative, absolute, fixed, or sticky layouts with live scroll sandboxes.
📱 Responsive Positions
Apply position rules dynamically at specific viewport breakpoints (xs, sm, md, lg, xl, xxl, xxxl).
✍️ Typography
Customize header sizes, weights, display classes, and test layout typography render scalings in real-time.
👇 Cursors
Interactive hover cards demonstrating cursors mapping for grabs, movements, loading, and zoom states.
👁️ Visibility & Display
Manage block levels, inline tags, tables, and responsiveness visibility rules dynamically.
🔲 Borders
Define solid, dashed, or double border styles, radius rounding levels, and contextual border themes.
🎨 Colors
Browse primary, extended, and neutral background/foreground shade utility classes.
📦 Flexbox
Create complex aligned items, justifications, layout growth indexes, and gap listings easily.
🖼️ Images
Build fluid image wrappers, rounded frames, and mouse-hover zoom slide-up card containers.
💲 Selector Wrapper ($)
jQuery-like lightweight Vanilla JS querying helpers API references and sandbox logger.