utilikit

UtiliKit revolutionizes how you approach CSS styling in Drupal by providing a dynamic, zero-CSS utility framework that eliminates the need for writing custom CSS while offering unlimited flexibility and powerful development tools. Whether you're building complex layouts, styling content in WYSIWYG editors, or creating responsive designs, UtiliKit empowers you to achieve professional results using simple, intuitive utility classes.

Transform your Drupal theming workflow with the most comprehensive utility-first CSS system designed specifically for Drupal developers, content creators, and site builders. Complete Documentation - Utility Class Reference - Live Examples

Core Philosophy & Breakthrough Innovation

UtiliKit breaks the traditional CSS framework limitations by offering unlimited value flexibility—you're not restricted to predefined classes or preset values. Want uk-pd--247px, uk-mg--3d75rem, or uk-wd--87vw? UtiliKit generates these on-demand. This revolutionary approach means you can use any number, any measure, any unit in your utility classes, providing unprecedented design freedom while maintaining clean, semantic markup.

Triple Rendering Modes - Optimized for Every Workflow

Inline Mode (Development & Prototyping)

Real-time CSS generation: JavaScript dynamically processes utility classes and injects styles instantly
Live preview feedback: See changes immediately without page refreshes or manual updates
Perfect for development: Ideal for theme development, content editing, and rapid prototyping
Zero build process: No CSS compilation, no file generation—just instant visual feedback
Interactive debugging: Real-time validation, error reporting, and development tools

Static Mode (Production & Performance)

Pre-generated CSS files: Server-side CSS generation creates optimized, cacheable files
Minimal JavaScript footprint: Reduced runtime overhead for maximum performance
Production-optimized: Perfect for live sites requiring optimal load times
Automatic updates: Smart content scanning triggers CSS regeneration when new classes are detected
File-based caching: Leverages server caching for lightning-fast delivery
Optional CSS minification: Optimize file size for production environments

Head Mode (NEW - Best of Both Worlds)

Direct head injection: CSS injected directly into page <head> for optimal performance
No file system requirements: Perfect for read-only environments and containerized deployments
Cloud-friendly architecture: Ideal for Platform.sh, Pantheon, Acquia Cloud, and Kubernetes
Zero file writes: Stores CSS in Drupal's state system for persistence
Static mode performance: Minimal JavaScript with cached CSS delivery
Automatic updates: Same smart content scanning as static mode
Optional CSS minification: Reduce CSS size in the head for faster parsing

CSS Specificity Control (NEW)

Optional !important Flag for Utility Classes

Configurable importance: Toggle !important on all utility classes (Static/Head modes only)
Override inline styles: Ensure utility classes always take precedence over inline styles
Matches Tailwind CSS behavior: Recommended for utility-first workflows
Automatic CSS regeneration: Changing this setting regenerates all site CSS immediately
Default enabled: Follows modern utility-first CSS best practices
Full control: Disable if you need to override utilities with custom CSS

Comprehensive Utility System

Box Model & Spacing

Padding: uk-pd--20, uk-pd--t-15, uk-pd--x-30, uk-pd--2d5rem (directional control with any unit)
Margins: uk-mg--16, uk-mg--b-auto, uk-mg--x-3d25em (full shorthand support)
Borders: uk-bw--1, uk-br--8, uk-bc--ff6b35, uk-bs--dashed (width, radius, color, style)
Gap: uk-gp--24, uk-gp--16-32 (Flexbox/Grid gap with row-column control)

Layout & Positioning

Flexbox: uk-dp--flex, uk-jc--center, uk-ai--center, uk-fd--column, uk-fx--wrap
CSS Grid: uk-dp--grid, uk-gc--repeat-3-1fr, uk-gr--auto-1fr-auto, uk-gl--2-4
Positioning: uk-ps--relative, uk-tp--20, uk-lt--auto, uk-zi--999
Dimensions: uk-wd--100pr, uk-ht--50vh, uk-xw--1200, uk-nh--400

Typography & Text Control

Font Size: uk-fs--18, uk-fs--2d5rem, uk-fs--4vw (any unit supported)
Line Height: uk-lh--140 (percentage-based for precision)
Font Weight: uk-fw--400, uk-fw--700 (numeric precision)
Text Alignment: uk-ta--center, uk-ta--justify
Letter Spacing: uk-ls--2, uk-ls--0d1em

Color System with Unlimited Flexibility

Background Colors: uk-bg--007bff, uk-bg--f8f9fa, uk-bg--ff0000-75 (with alpha transparency)
Text Colors: uk-tc--ffffff, uk-tc--333, uk-tc--rgb-255-0-0 (hex, shorthand, RGB support)
Border Colors: uk-bc--dee2e6, uk-bc--primary, uk-bc--f00-50 (alpha channel support)

Transform & Effects

Rotation: uk-rt--45, uk-rt--180, uk-rt--1d5 (degree precision with decimal support)
Scale: uk-sc--120, uk-sc--75, uk-sc--1d25 (percentage-based scaling)
Opacity: uk-op--75, uk-op--25, uk-op--90 (0-100 range for precision)

Advanced Utilities

Aspect Ratio: uk-ar--16-9, uk-ar--1-1, uk-ar--3-2
Overflow: uk-ov--hidden, uk-ov--scroll, uk-ov--auto
Cursor: uk-cu--pointer, uk-cu--grab, uk-cu--not-allowed
User Select: uk-us--none, uk-us--text, uk-us--all

Mobile-First Responsive Design System

Intelligent Breakpoint System

uk-sm-*: ≥576px (Small devices)
uk-md-*: ≥768px (Medium devices - tablets)
uk-lg-*: ≥992px (Large devices - desktops)
uk-xl-*: ≥1200px (Extra large screens)
uk-xxl-*: ≥1400px (Extra extra large displays)

Progressive Enhancement Examples

<!-- Responsive padding that grows with screen size -->
<div class="utilikit uk-pd--12 uk-md-pd--24 uk-lg-pd--40">
  Adaptive spacing for all devices
</div>

<!-- Complex responsive layout -->
<div class="utilikit uk-dp--block uk-sm-dp--flex uk-lg-dp--grid uk-lg-gc--repeat-3-1fr">
  <!-- Mobile: stacked, Tablet: flex row, Desktop: 3-column grid -->
</div>

Advanced Developer Experience

Interactive Playground

Live Preview Environment: Test utility combinations with instant visual feedback
Preset Examples: Quick-start templates for cards, heroes, forms, grids, and more
Visual Class Builder: Click-to-build interface with categorized utility chips
Responsive Testing: Built-in viewport controls for mobile, tablet, and desktop testing
Color Palette: Visual color picker with copy-to-clipboard hex values
Code Export: Generate clean HTML with your tested utility combinations

Comprehensive Reference System

Complete Documentation: Every utility class documented with live examples
Interactive Browser: Search, filter, and explore all available utilities
Copy-to-Clipboard: One-click copying of classes and code snippets
Usage Statistics: See which classes are most commonly used
Integration Examples: Real-world usage patterns and best practices
Online Reference Guide: Comprehensive online documentation with advanced search and filtering

Development Tools

Update Button: Floating action button for instant CSS regeneration (Static/Head modes)
Debug Mode: Comprehensive logging, error reporting, and performance monitoring
Real-time Validation: Immediate feedback on class syntax and validity
Performance Metrics: Monitor CSS generation times and optimization opportunities
Conflict Detection: Identify and resolve conflicting utility combinations

Enterprise-Grade Security & Performance

Security Features

Input Validation: Multi-layer validation prevents CSS injection and malicious code
Content Security Policy: Full CSP compliance for secure environments
CSRF Protection: All AJAX endpoints protected against cross-site request forgery
Permission-Based Access: Granular permission system for different user roles
Sanitized Output: All generated CSS is sanitized and validated before output

Performance Optimization

Intelligent Caching: Smart cache invalidation and regeneration
Rate Limiting: Built-in rate limiting prevents abuse and ensures stability
Minimal Footprint: Only loads utilities that are actually used on the page
Queue Processing: Background processing for heavy operations
CSS Minification: Optimized output for production environments (Static/Head modes)

Advanced Configuration

Scope Control: Define exactly where UtiliKit operates on your site
Entity Integration: Automatic CSS updates when content is saved
Cache Management: Fine-grained control over caching behavior
Development Modes: Separate configurations for development and production
Feature Flags: Toggle experimental features safely

Seamless Drupal Integration

Content Management Integration

WYSIWYG Support: Full compatibility with CKEditor and all WYSIWYG editors
Layout Builder: Native support for Drupal's Layout Builder
Paragraphs Module: Perfect for component-based content architecture
Media Management: Style images, videos, and media elements effortlessly
Views Integration: Style Views output without touching template files

Theme System Integration

Theme Compatibility: Works with any Drupal theme without conflicts
Template Override: Optional template suggestions for advanced customization
Preprocess Integration: Hooks into Drupal's render pipeline for optimal performance
Asset Management: Proper integration with Drupal's asset delivery system
RTL Support: Full right-to-left language support

Administrative Excellence

User-Friendly Settings: Comprehensive admin interface with logical organization
Permission Management: Role-based access control for all features
Bulk Operations: Mass CSS regeneration and content scanning
System Integration: Deep integration with Drupal's menu, routing, and service systems
Update Hooks: Smooth upgrade paths and configuration management

Revolutionary Value System

Unlimited Numerical Flexibility

Unlike traditional CSS frameworks that limit you to predefined values, UtiliKit accepts any numerical value with any unit:

<!-- Exact pixel values -->
<div class="utilikit uk-pd--247">247px padding</div>

<!-- Decimal precision with 'd' notation -->
<div class="utilikit uk-mg--3d75rem">3.75rem margin</div>

<!-- Viewport units -->
<div class="utilikit uk-wd--87vw">87% viewport width</div>

<!-- Custom percentage -->
<div class="utilikit uk-ht--73d5pr">73.5% height</div>

<!-- Mixed units in shorthand -->
<div class="utilikit uk-pd--20-1d5em-30-auto">Complex padding</div>

Color System Flexibility

3-digit hex: uk-bg--f00 (red)
6-digit hex: uk-bg--ff0000 (red)
Alpha transparency: uk-bg--ff0000-50 (red at 50% opacity)
No hash required: Clean class names without special characters

Transform Precision

Rotation: uk-rt--37d5 (37.5 degrees)
Scale: uk-sc--127 (1.27x scaling)
Precise opacity: uk-op--73 (0.73 opacity)

Use Cases & Applications

Content Creators

Style content directly in WYSIWYG editors without technical knowledge
Create consistent spacing and alignment across content
Apply responsive design principles without code
Build engaging layouts using simple, memorable classes

Theme Developers

Rapid prototyping without writing CSS files
Consistent utility system across projects
Easy responsive design implementation
Integration with existing design systems

Site Builders

Layout Builder enhancement with utility classes
Component library creation using Paragraphs
Flexible content layout without template modifications
Responsive design control for non-technical users

Enterprise Applications

Large-scale content management with consistent styling
Multi-site utility sharing and standardization
Performance-optimized delivery for high-traffic sites
Security-compliant implementation for government and corporate use
Cloud & Container Ready: Head mode perfect for Platform.sh, Pantheon, Kubernetes

Performance Benchmarks

Load Time Optimization

Inline Mode: ~2KB initial JavaScript payload
Static/Head Mode: <1KB runtime JavaScript
CSS Output: Only includes utilities actually used on the page
Cache Efficiency: Intelligent cache invalidation and sharing

Development Speed

50% faster styling: Compared to traditional CSS writing
Real-time feedback: Zero-delay visual updates
Reduced CSS conflicts: Utility-first approach eliminates cascade issues
Consistency: Standardized spacing and design patterns

Installation & Setup

Quick Installation

composer require drupal/utilikit
drush en utilikit

# Enable modules as needed
drush en utilikit utilikit_examples utilikit_playground utilikit_help utilikit_test

## Drush Commands

# CSS Generation
drush utilikit:generate     # or: uk-gen, utilikit-generate

# Content Scanning  
drush utilikit:scan         # or: uk-scan, utilikit-scan

# Clear Data
drush utilikit:clear        # or: uk-clear, utilikit-clear

# Mode Switching
drush utilikit:mode static  # or: uk-mode, utilikit-mode
drush utilikit:mode head    # Switch to head mode

# Status & Info
drush utilikit:status       # or: uk-status, utilikit-status
drush utilikit:classes      # or: uk-classes, utilikit-classes

# Maintenance
drush utilikit:validate     # or: uk-validate, utilikit-validate
drush utilikit:cache-clear  # or: uk-cc, utilikit-cache-clear

Configuration Steps

Navigate to Configuration > Development > UtiliKit > Settings
Choose your rendering mode (Inline for development, Static for production, Head for cloud/containers)
Configure scope settings to define where UtiliKit operates
Set up permissions for development tools and reference access
Toggle CSS !important flag based on your workflow needs
Test installation using the interactive Playground at /admin/config/development/utilikit/playground

Permission Configuration

Administer UtiliKit: Full access to settings and configuration
Access UtiliKit reference: View documentation and utility browser
Use UtiliKit update button: Manual CSS regeneration in Static/Head modes
Granular permissions for different user roles and responsibilities

UtiliKit Sub-Modules & Extensions

UtiliKit provides a comprehensive ecosystem of optional sub-modules that extend functionality for specific use cases and development workflows:

UtiliKit Examples

Real-World Demonstrations: Complete implementation examples showing UtiliKit in action
Component Library: Pre-built components like cards, headers, forms, and navigation elements
Layout Templates: Common page layouts and content structures using UtiliKit classes
Best Practice Patterns: Curated examples of optimal utility class combinations
Copy-Paste Ready: All examples include clean HTML markup ready for immediate use
Live Demo & Examples

UtiliKit Playground

Interactive Testing Environment: Safe sandbox for experimenting with utility combinations
Visual Class Builder: Point-and-click interface for building utility class combinations
Responsive Preview: Test designs across all breakpoints with built-in viewport controls
Preset Templates: Quick-start examples for common UI patterns and components
Code Generation: Export clean HTML and CSS from your playground experiments
Educational Tools: Learning aids and tutorials for mastering utility-first design

UtiliKit Test

Quality Assurance: Comprehensive test suite ensuring framework reliability
Validation Tools: Automated testing of utility class generation and CSS output
Performance Benchmarks: Built-in performance testing and optimization validation
Browser Compatibility: Cross-browser testing utilities for various environments
Regression Testing: Prevents framework updates from breaking existing functionality
Development Support: Essential for contributing to UtiliKit core development

UtiliKit Help

Contextual Documentation: In-admin help system with context-sensitive guidance
Getting Started Guide: Step-by-step tutorials for new users
Troubleshooting Tools: Common issue identification and resolution assistance
Feature Tours: Interactive guided tours of UtiliKit's capabilities
Quick Reference: Instant access to utility class syntax and examples
Complete Documentation

Browser Support & Compatibility

Modern Browsers: Chrome, Firefox, Safari, Edge (latest versions)
Mobile Support: iOS Safari, Android Chrome
Legacy Support: Graceful degradation for older browsers
Progressive Enhancement: Core functionality works even without JavaScript
Accessibility: WCAG 2.1 compliant with semantic HTML output

Community & Ecosystem

Module Compatibility

Full Drupal 10 & 11 support
Layout Builder integration
Paragraphs module support
Views integration
Media module compatibility
Multisite support

Development Roadmap

Additional utility categories
Advanced animation utilities
Design system integration
Component library expansion
Performance optimizations
Extended responsive controls

Why Choose UtiliKit?

Developer Benefits

Faster Development: Write styles 3x faster than traditional CSS
Consistent Design: Standardized spacing, colors, and patterns
Maintainable Code: Utility classes are self-documenting and predictable
Debugging Ease: Visual tools and comprehensive error reporting
Learning Curve: Intuitive class names that match CSS properties
Flexible Deployment: Choose the rendering mode that fits your infrastructure

Business Benefits

Reduced Development Costs: Faster styling means lower project costs
Consistent Brand Application: Systematic approach to design implementation
Future-Proof: Framework designed for long-term sustainability
Scalability: Handles everything from simple sites to complex applications
SEO Friendly: Clean HTML output optimized for search engines
Cloud Ready: Head mode perfect for modern hosting platforms

Technical Advantages

Zero Dependencies: No external CSS frameworks or libraries required
Drupal Native: Built specifically for Drupal's architecture and patterns
Security First: Enterprise-grade security throughout
Performance Optimized: Minimal overhead with maximum functionality
Extensible: Hooks and APIs for custom extensions
DevOps Friendly: Works seamlessly with CI/CD and containerized deployments

Resources & External Links

Official Documentation & Guides

Complete Documentation: Comprehensive guides, tutorials, and API documentation
Utility Class Reference: Interactive reference with search, examples, and code snippets
Live Examples & Demos: Real-world implementations and component showcases

Getting Started

Install: composer require drupal/utilikit && drush en utilikit
Configure: Visit /admin/config/development/utilikit/settings
Choose Mode: Select Inline (dev), Static (traditional), or Head (cloud-friendly)
Learn: Explore the interactive playground and reference documentation
Build: Start using utility classes in your content and templates

UtiliKit is more than a CSS framework—it's a complete styling solution that transforms how you approach design in Drupal. From rapid prototyping to production deployment, from content creators to senior developers, UtiliKit empowers everyone to create beautiful, responsive, and maintainable web experiences.

Revolutionize your Drupal workflow with UtiliKit. Download now and experience the future of utility-first CSS in Drupal.

Developed & Designed By: Alaa Haddad

A Personal Thank You for Your Support

Every project you see here, including this one, reflects countless hours of work driven by my passion for making Drupal better for everyone. Your support truly makes a difference, and there are a few simple ways you can help these projects grow and reach others who might benefit:

Use & Share Feedback: Have you found this project (or any of my other work) helpful? Let me know what worked well or how it could be improved. Real user input drives better tools for the entire community.
Click "Like" on Drupal.org: It may seem small, but liking this project on Drupal.org helps others discover and trust these tools.
Spread the Word: Share these projects on social media, Slack groups, or anywhere Drupal folks connect. Your word of mouth helps these tools find the people who need them.
Explore More of My Work: Check out my other projects on Drupal.org to see what else might support your workflow or inspire your next build.

W3CSS Theme (d8w3css) - Solo - W3CSS Paragraphs - Paragraphs Bundles - Amun - Amunet - Anhur - Acquia Purge Varnish - Cloudflare Purge - Reference Blocked Users - Solo Copy Blocks - Solo Utilities - PB Import - VVJA - Accordion - VVJC - 3D Carousel - VVJB - Basic Carousel - VVJF - 3D FlipBox - VVJH - Hero - VVJL - Lightbox - VVJP - Parallax - VVJR - Reveal - VVJS - Slideshow - VVJT - Tabs - Module Matrix - Selectify - Utilikit

If you have any questions, ideas, or feedback about my Drupal.org projects, I’d love to hear from you! To keep things open and helpful for the entire community, I encourage you to post directly in the project's issue queue on Drupal.org. This way, your questions—and the answers can benefit others who may have the same needs.

At the end of the day, my goal is to make Drupal easier and more enjoyable for everyone, especially small businesses and site builders who want to create professional sites without extra hassle. Together, we can build something even better. Thank you for your support, and for being part of this journey!

Version	Type	Release date
1.0.3	Stable	Jan 30, 2026
1.0.2	Stable	Nov 12, 2025
1.0.1	Stable	Oct 17, 2025
1.0.0	Stable	Aug 29, 2025
1.0.x-dev	Dev	Aug 25, 2025