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.

UtiliKit uses modern logical CSS properties (inlineSize, blockSize, insetBlockStart, insetInlineEnd, etc.) for better internationalization and automatic RTL support.

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 with cache-busting URLs for lightning-fast delivery
Optional CSS minification: Optimize file size for production environments

Head Mode (Cloud & Container-Friendly)

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 API 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

Optional !important Flag for Utility Classes

Configurable importance: Toggle !important on all utility classes (Static/Head modes)
Override inline styles: Ensure utility classes always take precedence over theme and 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 — 47 Prefixes

Every element must have the utilikit base class for UtiliKit to process its utility classes. All 47 prefixes support responsive breakpoint variants (sm, md, lg, xl, xxl).

Box Model & Spacing

Padding (pd): uk-pd--20, uk-pd--t-15, uk-pd--x-30, uk-pd--2d5rem (directional control with any unit)
Margin (mg): uk-mg--16, uk-mg--b-auto, uk-mg--x-3d25em (full shorthand support, auto keyword)
Border Width (bw): uk-bw--1, uk-bw--t-2 (directional sides)
Border Radius (br): uk-br--8, uk-br--t-12 (directional corners)
Border Style (bs): uk-bs--solid, uk-bs--b-dashed (solid, dashed, dotted, double, groove, ridge, inset, outset)
Border Color (bc): uk-bc--dee2e6, uk-bc--f00-50 (hex with optional alpha transparency)
Gap (gp): uk-gp--24, uk-gp--16-32 (Flexbox/Grid gap with row-column control)

Sizing

Width (wd): uk-wd--200, uk-wd--100pr, uk-wd--auto (uses logical inline-size)
Height (ht): uk-ht--100, uk-ht--50vh, uk-ht--auto (uses logical block-size)
Max Width (xw): uk-xw--1200, uk-xw--none (constraint utilities)
Min Width (nw): uk-nw--100 (minimum size constraints)
Max Height (xh): uk-xh--300 (height constraints)
Min Height (nh): uk-nh--50 (minimum height)

Layout & Positioning

Display (dp): uk-dp--flex, uk-dp--grid, uk-dp--none, uk-dp--block, uk-dp--inline-block
Position (ps): uk-ps--relative, uk-ps--absolute, uk-ps--fixed, uk-ps--sticky
Top (tp): uk-tp--20, uk-tp--0 (uses logical inset-block-start)
Right (ri): uk-ri--15 (uses logical inset-inline-end)
Bottom (bt): uk-bt--5 (uses logical inset-block-end)
Left (lt): uk-lt--auto, uk-lt--12 (uses logical inset-inline-start)
Z-Index (zi): uk-zi--999, uk-zi--10
Overflow (ov): uk-ov--hidden, uk-ov--scroll, uk-ov--auto
Float (fl): uk-fl--left, uk-fl--right, uk-fl--none
Clear (cl): uk-cl--both, uk-cl--left, uk-cl--none

Flexbox

Flex Direction (fd): uk-fd--column, uk-fd--row, uk-fd--row-reverse, uk-fd--column-reverse
Justify Content (jc): uk-jc--center, uk-jc--between, uk-jc--around, uk-jc--evenly
Align Items (ai): uk-ai--center, uk-ai--start, uk-ai--stretch, uk-ai--baseline
Align Content (ac): uk-ac--center, uk-ac--between, uk-ac--around
Flex Wrap (fx): uk-fx--wrap, uk-fx--nowrap, uk-fx--wrap-reverse
Flex Grow (fg): uk-fg--1, uk-fg--0
Flex Shrink (fk): uk-fk--0, uk-fk--1
Flex Basis (fb): uk-fb--200, uk-fb--auto
Order (or): uk-or--1, uk-or---1

CSS Grid

Grid Template Columns (gc): uk-gc--repeat-3-1fr, uk-gc--200px-1fr, uk-gc--repeat-auto-fit-minmax-250px-1fr
Grid Template Rows (gr): uk-gr--auto-1fr-auto, uk-gr--repeat-4-1fr
Grid Column (gl): uk-gl--1-3, uk-gl--2-4 (span positioning: start / end)
Grid Row (gw): uk-gw--1-2, uk-gw--2-4 (span positioning: start / end)

Advanced Grid Patterns: repeat, minmax, fit-content (fitc), auto-fit, auto-fill, min-content (minc), max-content (maxc). Example: uk-gc--repeat-auto-fit-minmax-280px-1fr

Typography & Text Control

Font Size (fs): uk-fs--18, uk-fs--2d5rem, uk-fs--4vw (any unit supported)
Line Height (lh): uk-lh--140, uk-lh--1d5 (unitless or with units)
Font Weight (fw): uk-fw--400, uk-fw--700 (numeric precision)
Text Alignment (ta): uk-ta--center, uk-ta--justify, uk-ta--left, uk-ta--right
Letter Spacing (ls): uk-ls--2, uk-ls--0d1em

Color System

Background Colors (bg): uk-bg--007bff, uk-bg--f8f9fa, uk-bg--ff0000-75 (with alpha transparency)
Text Colors (tc): uk-tc--ffffff, uk-tc--333 (3-digit and 6-digit hex, alpha support)
Border Colors (bc): uk-bc--dee2e6, uk-bc--f00-50 (alpha channel support)

Color formats: 3-digit hex (f00), 6-digit hex (ff0000), with alpha 0-100 (ff0000-50 = 50% opacity). No hash required—clean class names without special characters.

Pseudo-State Colors (Static/Head Modes)

All color prefixes (bg, tc, bc) support hover, focus, and active states by appending a suffix to the value:

-h for :hover — uk-bg--007bff-h (blue background on hover)
-f for :focus — uk-tc--ff0000-f (red text on focus)
-a for :active — uk-bc--dee2e6-a (border color on active)
Combine with alpha: uk-bg--007bff-50-h = 50% opacity blue on hover

Transform & Effects

Rotation (rt): uk-rt--45, uk-rt--180, uk-rt--37d5 (degree precision with decimal support)
Scale (sc): uk-sc--120, uk-sc--75 (percentage-based: 120 = 1.2x scaling)
Opacity (op): uk-op--75, uk-op--25 (0-100 range converted to 0-1)

Additional Utilities

Aspect Ratio (ar): uk-ar--16-9, uk-ar--1-1, uk-ar--3-2
Background Size (bz): uk-bz--cover, uk-bz--contain, uk-bz--auto
Cursor (cu): uk-cu--pointer, uk-cu--grab, uk-cu--not-allowed
User Select (us): uk-us--none, uk-us--text, uk-us--all

Special Value Notations

Decimal Notation (`d` = decimal point)

Since . is not valid in CSS class names, use d between digits as a decimal point:

uk-lh--1d5 → line-height: 1.5
uk-mg--3d75rem → margin: 3.75rem
uk-rt--45d5 → rotate: 45.5deg

Percentage Notation (`pr` = %)

Since % is not valid in CSS class names, use pr suffix:

uk-wd--100pr → width: 100%
uk-ht--50pr → height: 50%
uk-gc--minmax-50pr-2fr → minmax(50%, 2fr)

Directional Sides

Box model properties support directional suffixes for per-side control:

-t (top), -r (right), -b (bottom), -l (left)
-x (horizontal: left + right), -y (vertical: top + bottom)
Example: uk-pd--t-20 → padding-top: 20px
Example: uk-mg--x-auto → margin-left: auto; margin-right: auto

Mobile-First Responsive Design System

Intelligent Breakpoint System

(none): All screens — base styles applied at every viewport
uk-sm-*: ≥576px (Small devices — landscape phones)
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)

All 47 utility prefixes support responsive variants. Breakpoints can be individually enabled/disabled in settings to reduce CSS size.

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>

<!-- Hide/show at different breakpoints -->
<div class="utilikit uk-dp--none uk-md-dp--block">
  Hidden on mobile, visible from medium screens up
</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: All 47 utility prefixes 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
Console Logging: Three levels — off, warnings, detailed — for browser dev tools

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 with cookie-based CSRF tokens
Permission-Based Access: 3 granular permissions for different user roles
Rate Limiting: 60 requests/min per IP, 5000 classes/request limit
Sanitized Output: All generated CSS is sanitized and validated before output

Performance Optimization

Intelligent Caching: Multi-tier cache invalidation (render, page, CSS/JS assets, theme registry)
Minimal Footprint: Only loads utilities that are actually used on the page
Queue Processing: Background CSS processing via cron queue worker for heavy operations
CSS Minification: Optimized output for production environments (Static/Head modes)
Automatic Cache Rebuild: CSS regenerated during Drupal cache flushes via hook_cache_flush()

Advanced Configuration

Scope Control: Global, per-content-type, or admin-page exclusion
Entity Integration: Automatic CSS updates on node, block, and paragraph saves
Cache Management: Configurable cache TTL and fine-grained cache control
Development Modes: Separate configurations for development and production
Experimental Features: Toggle grid auto-generation, advanced selectors, CSS variables, and media query optimization

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 via hook_library_info_alter()
RTL Support: Full right-to-left language support via logical CSS properties

Administrative Excellence

User-Friendly Settings: Comprehensive admin interface with logical organization
Permission Management: Role-based access control — administer utilikit, access utilikit reference, use utilikit update button
Bulk Operations: Mass CSS regeneration and content scanning
System Integration: Deep integration with Drupal's menu, routing, and service systems
8 Drush Commands: Full CLI management for generate, scan, clear, mode, status, classes, validate, and cache-clear

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)
Short hex with alpha: uk-bg--f00-25 (red at 25% opacity)
Pseudo-state suffixes: uk-bg--007bff-h (hover), uk-tc--ff0000-f (focus), uk-bc--dee2e6-a (active) — Static/Head modes
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

Installation & Setup

Quick Installation

composer require drupal/utilikit
drush en utilikit

# Enable sub-modules as needed
drush en 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
drush utilikit:scan --entity-types=node,paragraph --batch-size=100

# 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
drush utilikit:mode inline  # Switch to inline 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 > UtiliKit > Settings (/admin/config/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
Configure auto-update triggers for entity saves (Static/Head modes)
Test installation using the interactive Playground at /admin/config/utilikit/playground

Permission Configuration

Administer UtiliKit: Full access to settings, developer tools, and cache management (restricted access)
Access UtiliKit reference: View documentation and utility class browser
Use UtiliKit update button: Manual CSS regeneration in Static/Head modes

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 all 47 utility prefixes 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 88+, Firefox 85+, Safari 14+, Edge 88+
Mobile Support: iOS Safari 14+, Android Chrome 88+
Progressive Enhancement: Graceful degradation for older browsers
Accessibility: WCAG 2.1 compliant with semantic HTML output
Required JS Features: ES6 Modules, CSS.escape() API (with fallback), Fetch API, Performance API

Community & Ecosystem

Module Compatibility

Drupal 10 & 11 support
Layout Builder integration
Paragraphs module support
Views integration
Media module compatibility
CKEditor / WYSIWYG support
Multisite support
Any Drupal theme

Why Choose UtiliKit?

Developer Benefits

Unlimited Values: No predefined classes — any number, any unit, any combination
47 Utility Prefixes: Complete CSS property coverage in a consistent system
3 Rendering Modes: Choose the mode that fits your infrastructure and workflow
Logical CSS Properties: Modern properties with automatic RTL support
8 Drush Commands: Full CLI management for automation and CI/CD
Debugging Tools: Visual tools and comprehensive error reporting
Learning Curve: Intuitive 2-letter prefix system that matches CSS properties

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 with CSRF, rate limiting, and input validation
Performance Optimized: Minimal overhead with queue processing and smart caching
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/utilikit/settings
Choose Mode: Select Inline (dev), Static (production), 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.

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.4	Stable	Mar 14, 2026
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