tessl/npm-primeflex

PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Miscellaneous Utilities

Name: tessl/npm-primeflex
Author: tessl

Miscellaneous utilities provide essential interactive and visual controls including appearance, outlines, pointer events, cursor styles, user selection, and opacity values.

Capabilities

Appearance Control

Remove default browser styling from form elements.

.appearance-none { appearance: none; }

Outline Control

Control element outlines, commonly used for focus states.

.outline-none { outline: none; }

Pointer Events

Control whether elements can be targeted by mouse events.

.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

Cursor Styles

Control the cursor appearance when hovering over elements.

.cursor-auto { cursor: auto; }
.cursor-pointer { cursor: pointer; }
.cursor-wait { cursor: wait; }
.cursor-move { cursor: move; }

User Selection

Control text selection behavior within elements.

.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }
.select-auto { user-select: auto; }

Opacity Values

Control element transparency with predefined opacity levels.

.opacity-0 { opacity: 0; }
.opacity-10 { opacity: 0.1; }
.opacity-20 { opacity: 0.2; }
.opacity-30 { opacity: 0.3; }
.opacity-40 { opacity: 0.4; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }
.opacity-100 { opacity: 1; }

Element Reset

Reset all CSS properties to their initial values.

.reset { all: unset; }

Usage Examples

Custom Form Controls

<!-- Custom dropdown with removed default styling -->
<select class="appearance-none cursor-pointer p-2 border-1 border-round">
  <option>Select an option</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<!-- Custom checkbox -->
<input type="checkbox" class="appearance-none cursor-pointer">

Interactive Elements

<!-- Clickable card -->
<div class="cursor-pointer p-4 border-1 border-round hover:bg-primary-50">
  <h3>Clickable Card</h3>
  <p>Click anywhere on this card</p>
</div>

<!-- Loading button -->
<button class="cursor-wait opacity-50 p-2 bg-primary text-white border-round" disabled>
  Loading...
</button>

<!-- Draggable element -->
<div class="cursor-move p-3 bg-gray-100 border-round" draggable="true">
  Drag me around
</div>

Text Selection Control

<!-- Prevent text selection on UI elements -->
<div class="select-none cursor-pointer p-2 bg-primary text-white border-round">
  Button Text (can't be selected)
</div>

<!-- Force text selection -->
<code class="select-all p-2 bg-gray-100 border-round">
  npm install primeflex
</code>

<!-- Regular text selection -->
<p class="select-text">
  This paragraph allows normal text selection behavior.
</p>

Overlay and Modal Effects

<!-- Semi-transparent overlay -->
<div class="fixed top-0 left-0 w-full h-full bg-black opacity-50 z-4">
</div>

<!-- Disabled overlay content -->
<div class="relative">
  <div class="opacity-30 pointer-events-none">
    <h3>Disabled Content</h3>
    <p>This content cannot be interacted with</p>
    <button class="p-2 bg-primary text-white border-round">Button</button>
  </div>
</div>

Focus Management

<!-- Remove default focus outline -->
<button class="outline-none focus:shadow-2 p-2 bg-primary text-white border-round">
  Custom Focus Style
</button>

<!-- Completely reset element styling -->
<div class="reset">
  This element has all styles reset
</div>