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.