FrankUICommon CSS (Spacing & Position Utilities)
FrankUI provides utility helper classes for rapid layout adjustments, positioning elements, and spacing. These utilities form the foundation for more advanced responsive interfaces.
Cursor Utilities
FrankUI offers a comprehensive suite of utility classes to control the mouse cursor display. All classes use the .c-[type] naming convention.
Interactive Hover Sandbox
Hover your mouse over the cards below to see the respective cursors render live in your browser.
🖱️
c-auto
Default browser cursor
⬀
c-default
Standard arrow
👆
c-pointer
Link / Clickable hand
⏳
c-wait
Busy / Wait hourglass
🌀
c-progress
Background working
⌶
c-text
Text selection I-beam
✛
c-move
Drag / Move element
🚫
c-not-allowed
Disabled action
✊
c-grab
Grabbable item
✊
c-grabbing
Active grabbing
🔍+
c-zoom-in
Zoom in detail
🔍-
c-zoom-out
Zoom out detail
Cursor Reference Table
| Class | CSS Property | Description |
|---|---|---|
| .c-auto | cursor: auto; | Default cursor context |
| .c-default | cursor: default; | Standard arrow |
| .c-none | cursor: none; | No cursor rendered |
| .c-help | cursor: help; | Help question mark |
| .c-pointer | cursor: pointer; | Hand icon for links |
| .c-progress | cursor: progress; | Loading arrow + circle |
| .c-wait | cursor: wait; | Hourglass wait indicator |
| .c-cell | cursor: cell; | Spreadsheet cell target cross |
| .c-crosshair | cursor: crosshair; | Selection crosshair |
| .c-text | cursor: text; | I-beam text select bar |
| .c-text-vertical | cursor: vertical-text; | Vertical text selector |
| .c-alias | cursor: alias; | Shortcut link alias arrow |
| .c-copy | cursor: copy; | Copy utility addition sign |
| .c-move | cursor: move; | Movement drag pointer |
| .c-no-drop | cursor: no-drop; | Cannot release drop here |
| .c-not-allowed | cursor: not-allowed; | Action forbidden / Disabled |
| .c-all-scroll | cursor: all-scroll; | Scroll viewport directions |
| .c-col-resize | cursor: col-resize; | Column adjust horizontal resize |
| .c-row-resize | cursor: row-resize; | Row adjust vertical resize |
| .c-n-resize | cursor: n-resize; | North resize arrow |
| .c-e-resize | cursor: e-resize; | East resize arrow |
| .c-s-resize | cursor: s-resize; | South resize arrow |
| .c-w-resize | cursor: w-resize; | West resize arrow |
| .c-ne-resize | cursor: ne-resize; | Northeast resize diagonal |
| .c-nw-resize | cursor: nw-resize; | Northwest resize diagonal |
| .c-se-resize | cursor: se-resize; | Southeast resize diagonal |
| .c-sw-resize | cursor: sw-resize; | Southwest resize diagonal |
| .c-ew-resize | cursor: ew-resize; | East-West resize arrow |
| .c-ns-resize | cursor: ns-resize; | North-South resize arrow |
| .c-nesw-resize | cursor: nesw-resize; | NE-SW resize diagonal |
| .c-nwse-resize | cursor: nwse-resize; | NW-SE resize diagonal |
| .c-zoom-in | cursor: zoom-in; | Zoom in magnifier |
| .c-zoom-out | cursor: zoom-out; | Zoom out magnifier |
| .c-grab | cursor: grab; | Grabbable open hand |
| .c-grabbing | cursor: grabbing; | Grabbing closed fist |