Overview
UtiliKit is a revolutionary Drupal module I developed to bring modern utility-first CSS development directly into your Drupal projects. With UtiliKit, you can rapidly build responsive, professional interfaces using a comprehensive utility class system—without external build tools, complex setup, or sacrificing performance.
Unlike traditional CSS frameworks that require compilation steps or external dependencies, UtiliKit generates CSS dynamically based on the utility classes you actually use. This means faster development, smaller CSS files, and a seamless integration with Drupal's architecture. Whether you're building custom themes, rapid prototypes, or production sites, UtiliKit adapts to your workflow.
Why Use UtiliKit?
Modern web development demands speed, flexibility, and maintainability. Traditional CSS approaches often lead to bloated stylesheets, naming conflicts, and maintenance headaches. UtiliKit solves these problems by providing:
- Utility-first approach that promotes consistent, scalable design systems.
- Dynamic CSS generation that only includes styles you actually use.
- Dual rendering modes—inline for development speed, static for production performance.
- Zero external dependencies—no Node.js, webpack, or build processes required.
- Comprehensive responsive system with mobile-first breakpoints.
- Developer-friendly tools including interactive playground and complete documentation.
How UtiliKit Works
UtiliKit uses a smart 2-letter prefix system to generate CSS utilities on-demand. The module scans your content for utility classes and generates only the CSS you need. It operates in two distinct modes:
- Inline Mode: JavaScript processes utility classes in real-time, perfect for development and content editing.
- Static Mode: Pre-generates CSS files for optimal production performance with minimal JavaScript overhead.
- Smart Scoping: Configure global application, specific content types, or exclude admin areas entirely.
- Automatic Updates: CSS regenerates automatically when content changes, or manually via the update button.
Feature Breakdown
Comprehensive Utility System
- Box Model: Padding (
uk-pd--20), margins (uk-mg--auto), borders, and dimensions. - Layout: Flexbox (
uk-dp--flex), CSS Grid (uk-gd--2-1fr), positioning, and floats. - Typography: Font sizes, weights, line heights, letter spacing, and text alignment.
- Colors: Background (
uk-bg--ff0000), text (uk-tc--333), and border colors with alpha support. - Effects: Transforms, opacity, shadows, and transitions.
- Responsive Design: Breakpoint prefixes (
uk-md-pd--30,uk-lg-wd--50pr) for mobile-first development.
Developer Tools
Interactive Playground
- Live editor with real-time preview of utility classes.
- Responsive testing across all breakpoints.
- Copy-to-clipboard functionality for generated code.
Comprehensive Reference
- Searchable documentation of all available utility classes.
- Interactive examples with visual previews.
- Organized by CSS property categories for easy navigation.
Update Button
- Floating interface for manual CSS regeneration in static mode.
- Real-time progress feedback and utility class counts.
- One-click CSS file regeneration with cache invalidation.
Smart CSS Generation
- Automatic Class Detection: Scans entities and content for utility classes.
- Selective Loading: Only generates CSS for classes actually used on your site.
- Optimization: Minified CSS output in static mode with smart caching.
- Rate Limiting: Built-in protection against abuse with configurable limits.
Configuration & Setup
Initial Setup
- Install via Composer:
composer require drupal/utilikit - Enable the module:
drush en utilikit - Visit Configuration > UtiliKit Settings (
/admin/config/utilikit) - Choose your rendering mode and configure scope settings
Rendering Mode Selection
For Development
- Select Inline Mode for real-time CSS generation
- Enable Development Mode for enhanced debugging
- Configure Admin Preview for visual debugging
For Production
- Switch to Static Mode for optimal performance
- Enable CSS Optimization for minified output
- Configure caching settings for your server environment
Scope Configuration
- Global Application: Enable UtiliKit site-wide with admin exclusion options
- Content Type Scoping: Limit UtiliKit to specific content types
- Responsive Breakpoints: Enable/disable specific breakpoints to optimize CSS size
Permission Management
Configure user access via People > Permissions:
- Administer UtiliKit: Full configuration access (administrators only)
- Use UtiliKit update button: Manual CSS regeneration (content editors)
- Access UtiliKit reference: Documentation and examples (developers)
Developer-Friendly Features
- Clean 2-letter prefix system (
uk-pd,uk-mg,uk-bg) for intuitive class naming - Flexible value system: Support for pixels, percentages, rem, em, viewport units, and CSS keywords
- Decimal precision: Use
uk-pd--10d5forpadding: 10.5px - Side-specific utilities:
uk-pd--t-20forpadding-top: 20px - Alpha channel support:
uk-bg--ff0000-50for semi-transparent backgrounds - Comprehensive logging with configurable verbosity levels for debugging
- Performance monitoring with microsecond timing for optimization
Performance & Security
UtiliKit is built with production requirements in mind, featuring comprehensive security measures and performance optimizations:
- CSRF Protection: All AJAX endpoints use cookie-based authentication with token validation
- Input Sanitization: Comprehensive validation of all utility class inputs
- Rate Limiting: Configurable limits prevent abuse of CSS generation endpoints
- Smart Caching: Intelligent cache management with automated invalidation
- Selective Loading: Only generates CSS for classes actually used on your site
- Locking Mechanisms: Prevents concurrent CSS generation conflicts
Browser Support & Accessibility
UtiliKit supports all modern browsers and follows current web standards:
- Modern Browser Support: Chrome 88+, Firefox 85+, Safari 14+, Edge 88+
- Progressive Enhancement: Graceful degradation when JavaScript is limited
- Standards Compliant: Valid CSS output following W3C specifications
- Accessible Interface: Admin interfaces follow WCAG guidelines
- Performance API Integration: Real-time monitoring with fallbacks
Why Choose UtiliKit?
UtiliKit isn't just another CSS framework—it's a complete development solution tailored specifically for Drupal. Whether you're a theme developer seeking rapid prototyping tools, a site builder wanting consistent styling across content types, or an agency standardizing development workflows, UtiliKit provides the perfect balance of power, performance, and simplicity.
With its unique dual-mode architecture, comprehensive utility system, and deep Drupal integration, UtiliKit eliminates the complexity of traditional CSS frameworks while providing more flexibility than static alternatives. Start building beautiful, responsive interfaces in minutes—not hours.
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
