Skip to content

Utilities Overview

Introduction

The Phenix Utilities provide a collection of JavaScript enhancements that improve the functionality, user experience, and performance of your web applications. These utilities are designed to be easy to implement, highly customizable, and optimized for modern web development.

Initialization

Phenix Utilities can be initialized all at once or selectively by type:

js
// Initialize all utilities
Phenix(document).utilities();

// Initialize specific utility types
Phenix(document).utilities({
  type: 'form'  // Only initialize form utilities
});

// Initialize multiple utility types
Phenix(document).utilities({
  type: 'form,text,seo'  // Initialize form, text, and SEO utilities
});

Available Utility Types

TypeDescriptionDocumentation
formForm-related utilitiesForm Utilities
otherGeneral utilities like item removal and countersItem Remover, Counter
textText and color manipulationDynamic Colors
iconsIcon-related utilitiesIcons List
copyrightsContent protectionCopyright Protection
seoSEO enhancementsSEO Utilities, Table of Content
allAll utilities (default)All of the above

Core Features

Form Enhancements

Improve form interactions with placeholder effects, form repeaters, rating controllers, and counter inputs. These utilities make forms more interactive and user-friendly.

Learn more about Form Utilities

Content Management

Easily remove elements, create animated counters, and enhance lists with icons. These utilities simplify common DOM manipulation tasks.

Learn more about Item Remover
Learn more about Counter
Learn more about Icons List

Visual Enhancements

Automatically calculate color variations, create dynamic shadows, and enhance visual elements. These utilities improve the visual appeal of your website.

Learn more about Dynamic Colors

SEO and Accessibility

Automatically enhance images, links, and headings for better SEO and accessibility. Generate table of contents from headings for easier navigation.

Learn more about SEO Utilities
Learn more about Table of Content

Content Protection

Protect your content from casual copying with simple JavaScript techniques.

Learn more about Copyright Protection

Best Practices

  • Initialize only the utilities you need to optimize performance
  • Combine utilities with CSS for the best visual results
  • Test utilities across different browsers and devices
  • Use data attributes for configuration when available
  • Follow accessibility guidelines even when using automatic enhancements

Browser Compatibility

The Phenix Utilities are compatible with all modern browsers and use standard DOM manipulation techniques. Some features may have fallbacks for older browsers, but the best experience is provided in up-to-date browsers.

Released under the MIT License.