UtiliKit Help & Documentation

🎨 Welcome to UtiliKit Help! ✨

Think of UtiliKit as your Swiss Army knife for CSS – but instead of tiny scissors and tweezers, you get powerful utility classes that make styling as easy as ordering pizza! 🍕

Blazing Fast Mobile-First Developer-Friendly Utility-First

🚀 Getting Started

Welcome aboard! Think of this as your UtiliKit driver's license course. We'll start slow, but soon you'll be racing through CSS! 🏎️

align content ac, align items ai, aspect ratio ar, background color bg, background size bz, border color bc, border radius br, border style bs, border width bw, bottom bt, clear cl, cursor cu, display dp, flex basis fb, flex direction fd, flex grow fg, flex shrink fk, flex wrap fx, float fl, font size fs, font weight fw, gap gp, grid column gl, grid row gw, grid template columns gc, grid template rows gr, height ht, justify content jc, left lt, letter spacing ls, line height lh, margin mg, max height xh, max width xw, min height nh, min width nw, opacity op, order or, overflow ov, padding pd, position ps, right ri, rotate rt, scale sc, text align ta, text color tc, top tp, user select us, width wd, z-index zi.

1

The Magic Word: "utilikit"

Every UtiliKit element needs the utilikit class. Think of it as the VIP pass that gets your element into the exclusive utility club!

✅ Correct Way

<div class="utilikit uk-pd--20 uk-bg--007bff">I'm special!</div>

❌ Wrong Way (No VIP Pass)

<div class="uk-pd--20 uk-bg--007bff">I'm sad...</div>

2

Class Naming: The UtiliKit Language

Our classes follow a simple pattern, like learning a new language. Once you get it, you'll be speaking UtiliKit fluently!

uk- + [breakpoint-] + property + -- + value

uk-pd--20 → Padding: 20px (like a comfy cushion)

uk-md-pd--40 → Padding: 40px on tablets and up (bigger cushion for bigger screens)

uk-bg--ff0000 → Background: red (like a fire truck! 🚒)

3

Your First UtiliKit Element

Let's create something beautiful! Think of this as your first masterpiece painting. 🎨

Hello, World! I'm your first UtiliKit creation! 🎉

<div class="utilikit
        uk-pd--10-24-24-24
        uk-bg--007bff
        uk-bg--0056b3-h
        uk-bg--003d80-a
        uk-tc--ffffff
        uk-tc--ffff00-h
        uk-tc--00ff00-f
        uk-br--8
        uk-ta--center
        uk-fs--1d125rem
        uk-bw--b-3
        uk-bs--b-dashed
        uk-bc--ff0000
        uk-op--90
        uk-mg--b-1d5rem
        uk-lh--1d6">
        Hello, World! I'm your first UtiliKit creation! 🎉
        </div>

Layout & Spacing

uk-pd--10-24-24-24 → Multi-value padding: 10px top, 24px right, 24px bottom, 24px left

uk-mg--b-1d5rem → Bottom margin 1.5rem (per-side + decimal + rem unit)

Colors & Pseudo-States (static/head mode)

uk-bg--007bff → Blue background (base state)

uk-bg--0056b3-h → Darker blue on :hover (-h suffix)

uk-bg--003d80-a → Darkest blue on :active (-a suffix, when clicking)

uk-tc--ffffff → White text (base state)

uk-tc--ffff00-h → Yellow text on :hover

uk-tc--00ff00-f → Green text on :focus (tab into it!)

Typography

uk-fs--1d125rem → Font size 1.125rem (d = decimal dot, rem = scalable unit)

uk-lh--1d6 → Line height 1.6 (decimal notation)

uk-ta--center → Text align center (keyword value)

Border (Per-Side)

uk-bw--b-3 → 3px border width on bottom only (-b- = bottom side)

uk-bs--b-dashed → Dashed border style on bottom

uk-bc--ff0000 → Red border color

Effects

uk-br--8 → 8px border radius (smooth corners)

uk-op--90 → 90% opacity (0-100 scale)

🧠 How UtiliKit Works

Imagine UtiliKit as a smart robot assistant that watches your HTML and instantly creates the perfect CSS outfit for each element. No waiting, no fuss – just pure styling magic!

👀

Step 1: UtiliKit Watches

Like a fashion consultant, UtiliKit scans your page looking for elements with utility classes. It's always alert, always ready!

⚡

Step 2: Lightning-Fast Processing

Faster than you can say "CSS," UtiliKit translates your classes into beautiful styles. It's like having Google Translate for design!

✨

Step 3: Magic Happens

Your elements transform instantly! No page refresh needed – it's like watching a caterpillar become a butterfly! 🦋

🎭 Three Rendering Modes

🎪 Inline Mode (The Party Mode)

Perfect for Development

Like a live DJ: Changes happen instantly as you type! Great for experimenting and building.

✨ Instant feedback (see changes immediately)
🔧 Perfect for debugging and testing
🎨 Developer-friendly with console logs
🔄 No file generation needed
⚠️ Pseudo-states (:hover, :focus, :active) not supported in this mode

🏎️ Static Mode (The Race Car Mode)

Optimized for Production

Like a Formula 1 car: Pre-built for maximum speed! Generates a CSS file that loads super fast.

⚡ Lightning-fast page loads
📁 Clean, cached CSS file at public://utilikit/utilikit-static-style.css
🗜️ Minified and optimized (configurable)
🚀 Production-ready performance
🔄 Supports pseudo-states (:hover, :focus, :active)
📝 Auto-update on node/block/paragraph save (configurable)

🧠 Head Mode (The Smart Mode)

Server-Side Per-Request

Like a personal tailor: The server scans each page's content and injects only the CSS that page actually needs — right into the <head> tag.

🎯 Zero unused CSS on any page
📦 No external CSS file to manage
⚡ No JavaScript processing needed
🔄 Supports pseudo-states (:hover, :focus, :active)

Mode Comparison at a Glance

Inline → Client-side JS, instant feedback, no pseudo-states, no !important

Static → Pre-generated CSS file, best performance, supports pseudo-states and !important

Head → Server-injected per-request CSS, no file needed, supports pseudo-states and !important

Switch modes at /admin/config/development/utilikit. The !important flag and CSS minification are configurable in Static and Head modes.

🛠️ Developer Mode: Your X-Ray Vision

Developer Mode is like putting on special glasses that let you see the Matrix! 🕶️ Suddenly, you can see exactly what UtiliKit is doing behind the scenes.

🔍

Visual Debugging

Ever played "Where's Waldo?" This is like that, but for CSS! UtiliKit draws blue outlines around all your elements so you can see exactly what's being styled.

I'm wearing a blue outline! 📦

👆 This element would have a blue dashed outline in dev mode

📊

Console Logging

Like having a chatty friend who tells you everything that's happening! Open your browser console (F12) to see:

🛠️ UtiliKit: Settings loaded {devMode: true}

🛠️ UtiliKit: Processing 5 elements

🛠️ UtiliKit: Applied classes to element

🎛️

Debug Control Panel

A mission control center appears in the bottom-right corner!

UtiliKit Debug

Breakpoint: lg

Width: 1200px

Elements: 8

🧪 Testing Developer Mode (Your Science Experiment!)

1️⃣ Go to /admin/config/development/utilikit → Enable "Developer mode"

2️⃣ Enable "Visual debugging" and "Display errors on page"

3️⃣ Set console logging to "Detailed" (be prepared for chatty logs!)

4️⃣ Open browser console (F12) and refresh the page

5️⃣ Look for blue outlines and the debug panel! 🎉

🔧

Feature Details

Each developer mode feature can be toggled independently. Here's what each one does:

Visual Debugging

Adds blue dashed outlines around every element with the utilikit class. In your browser DevTools you'll see outline: 2px dashed rgba(0, 123, 255, 0.7) applied via the uk-admin body class.

Display Errors on Page

Shows validation errors as Drupal status messages at the top of the page. Without this, errors only appear in the browser console. Test it by adding an invalid class like uk-invalid--syntax.

Console Logging Levels

Off — No UtiliKit messages in the console
Warnings only — Shows errors and invalid class warnings
Detailed — Full processing logs: settings loaded, elements found, rules applied, breakpoints detected

Debug Control Panel Buttons

Force Refresh Styles — Re-applies all UtiliKit classes without reloading the page
Clear State & Refresh — Resets internal state and reloads
Log State to Console — Dumps current settings, breakpoint, and element count

🧪

Quick Verification

After enabling all features, create a test element to verify everything works together:

Test Element

<div class="utilikit uk-pd--20 uk-bg--007bff uk-tc--ffffff">Valid element</div>
<div class="utilikit uk-invalid--test">Invalid element</div>

You should see all four indicators working at once:

📊 Console — Detailed processing logs
🔍 Visual — Blue outlines around both elements
⚠️ Page errors — Drupal warning about the invalid class
🎛️ Debug panel — Visible in the bottom-right corner

If nothing appears, run drush cr to clear caches and make sure JavaScript is enabled.

💎 Real-World Examples

Time for some real magic! These aren't just boring code snippets – they're actual components you can use right now. Think of this as your recipe book for delicious web design! 👨‍🍳

🃏 Beautiful Card Component

Like a business card, but for the web! Perfect for profiles, products, or anything that needs to look fancy.

John Doe

Senior Web Developer

Crafting beautiful web experiences with UtiliKit since 2025! 🚀

Show me the code! 👀

<div class="utilikit uk-bg--ffffff uk-br--12 uk-pd--24 uk-mg--16 uk-bs--shadow">
        <div class="utilikit uk-fs--24 uk-fw--700 uk-tc--2563eb uk-mg--b-8">John Doe</div>
        <div class="utilikit uk-fs--16 uk-tc--64748b uk-mg--b-16">Senior Web Developer</div>
        <div class="utilikit uk-fs--14 uk-tc--475569">Crafting beautiful web experiences with UtiliKit since 2025! 🚀</div>
        </div>

📱 Responsive Button Squad

Buttons that adapt like chameleons! They change size and style based on screen size – it's like having shape-shifting superpowers!

Reveal the button magic! ✨

<div class="utilikit uk-dp--flex uk-gp--12 uk-fx--wrap">
        <button class="utilikit uk-pd--12-24 uk-bg--3b82f6 uk-tc--ffffff uk-br--6 uk-fs--14 uk-fw--600 uk-cu--pointer uk-md-pd--16-32 uk-md-fs--16">Primary Action</button>
        <button class="utilikit uk-bg--ffffff-0 uk-tc--3b82f6 uk-br--6 uk-bw--2 uk-bs--solid uk-bc--3b82f6">Secondary</button>
        <button class="utilikit uk-pd--8-16 uk-bg--ef4444 uk-tc--ffffff uk-br--4 uk-cu--pointer">Danger!</button>
        </div>

🏗️ Flexible Layout Grid

Like LEGO blocks for web design! These containers automatically arrange themselves perfectly, no matter the screen size.

🎨

Design

⚡

Speed

🛠️

Tools

Show me the grid secrets! 🏗️

<div class="utilikit uk-dp--grid uk-gc--repeat-3-minmax-200px-1fr uk-gp--16">
        <div class="utilikit uk-bg--f0f9ff uk-pd--16 uk-br--8 uk-ta--center">
        <div class="utilikit uk-fs--32 uk-mg--b-8">🎨</div>
        <div class="utilikit uk-fw--600">Design</div>
        </div>
        <!-- More grid items... -->
        </div>

📱 Responsive Magic

Responsive design with UtiliKit is like having a shape-shifting costume that automatically fits your site perfectly whether you're on a phone, tablet, or cinema display! 🦸‍♀️

🎯 The Breakpoint Family

Think of breakpoints as different sized doorways – your design needs to fit through all of them gracefully!

📱

Mobile First (0px+)

The foundation! Like building a house – you start with the ground floor.

uk-pd--16

📱

Small (576px+)

Large phones in landscape mode. Time to stretch a little!

uk-sm-pd--20

📱

Medium (768px+)

Tablets! Now we're talking. More room to breathe.

uk-md-pd--24

💻

Large (992px+)

Laptops and small desktops. Space to spread out!

uk-lg-pd--32

🖥️

Extra Large (1200px+)

Full desktops. Living the large-screen dream!

uk-xl-pd--40

🖥️

XXL (1400px+)

Cinema displays! Go big or go home!

uk-xxl-pd--48

🎭 Real Responsive Example

Watch this element change as you resize your browser! It's like watching a transformer in action! 🤖

I'm Responsive! 🎉

My padding and font size change based on screen size!

Current size: Detecting...

🔍 What's happening here?

Mobile (0px+): uk-pd--16 uk-fs--14 → Cozy 16px padding, readable 14px text
Small (576px+): uk-sm-pd--20 uk-sm-fs--16 → A bit more breathing room
Medium (768px+): uk-md-pd--24 uk-md-fs--18 → Tablet-friendly spacing
Large (992px+): uk-lg-pd--32 uk-lg-fs--20 → Desktop comfort
XL (1200px+): uk-xl-pd--40 → Premium large-screen experience

💡 Pro Responsive Tips

📏

Start Small, Think Big

Always design for mobile first, then add larger breakpoints. It's like tailoring a suit – easier to let it out than take it in!

🎨

Test on Real Devices

Browser dev tools are great, but nothing beats testing on actual phones and tablets.

⚡

Less is More

Don't change everything at every breakpoint. Pick the important stuff – like a good editor cutting a movie!

🩺 Troubleshooting

Don't panic! Even the best chefs sometimes burn the toast. 🍞 Here's your emergency toolkit for when UtiliKit isn't cooperating. We'll get you back to styling in no time!

😱 "My classes aren't working!"

Symptom: Added UtiliKit classes but nothing happens – like pressing elevator buttons that don't light up! 😤

🔧 Doctor's Orders:

Check the VIP Pass: Make sure you have the utilikit base class!
❌ <div class="uk-pd--20"> ✅ <div class="utilikit uk-pd--20">
Clear the Cobwebs: Run drush cr to clear Drupal cache
Enable Detective Mode: Turn on Developer Mode to see what's happening
JavaScript Check: Make sure JavaScript is enabled (UtiliKit needs it to work its magic!)

🌪️ "Circular dependency errors!"

Symptom: Scary error messages about circular references – like getting stuck in a revolving door! 🚪

🔧 Emergency Fixes:

Check Drupal Core: Run composer reinstall drupal/core --no-dev
Clear Everything: drush cr (the classic "turn it off and on again")
File Permissions: Make sure your web server can read all files

📁 "Static mode not generating CSS!"

Symptom: Switched to static mode but no CSS file appears – like ordering pizza and getting an empty box! 📦

🔧 File Detective Work:

Permission Check: Make sure sites/default/files/utilikit/ is writable
Force Regeneration: Go to UtiliKit settings → "Clear All CSS & Reset" → Save
Add Some Classes: Make sure you actually have UtiliKit classes in your content!

📱 "Responsive classes not working!"

Symptom: Responsive classes not kicking in at the right screen sizes – like wearing winter clothes in summer! 🌞❄️

🔧 Responsive Rescue:

Breakpoint Check: Verify the breakpoint is enabled in UtiliKit settings
Syntax Check: Make sure you're using the right format: uk-md-pd--20
Browser DevTools: Check if the CSS is actually being applied at different screen sizes
Cache Clear: You know the drill... drush cr!

🎭 "Hover/focus states not working!"

Symptom: Added -h, -f, or -a suffixes but nothing happens on hover/focus/active – like pressing a doorbell with no wires! 🔔

🔧 Pseudo-State Fixes:

Check Your Mode: Pseudo-states only work in Static and Head modes. Inline mode does not support them.
Check the Property: Only bg (background) and tc (text color) support pseudo-state suffixes
Syntax: The suffix goes after the hex value: uk-bg--007bff-h ✅ not uk-bg-h--007bff ❌
Regenerate CSS: In static mode, save a node or click "Update CSS" to regenerate the file

🚨 Emergency Toolkit

🔍

Enable Developer Mode

Your first line of defense! It shows you exactly what's happening behind the scenes.

🧹

Clear All Caches

drush cr - The magic spell that fixes 80% of Drupal problems!

🔧

Browser DevTools

Press F12 and investigate! Check the Console and Elements tabs for clues.

📋

Test in Playground

Use the UtiliKit Playground to test classes in isolation – perfect for debugging!

🆘 Still Stuck? We've Got Your Back!

Sometimes you need to call in the cavalry! Here's where to get help:

🐛 Report Issues 👨‍💻 Contact Developer 🎮 Test in Playground

💡 Pro Tips & Tricks

Ready to level up from UtiliKit apprentice to CSS wizard? 🧙‍♂️ These insider secrets will make you the envy of developers everywhere!

🎯 Performance Ninja Moves

🏎️ Choose Your Mode Wisely

Like picking the right vehicle for the job:

Inline Mode: Perfect for development – like driving a convertible with the top down! 🏖️
Static Mode: Production champion – pre-generates a CSS file for maximum speed! ⚡
Head Mode: Server-side per-request – injects only the CSS each page needs, zero waste! 🎯

🧹 Keep It Clean

Enable auto-cleanup in static mode – it's like having a robot butler that removes unused CSS while you sleep! 🤖

🎨 Design System Mastery

🎭 Create Consistent Patterns

Instead of random values, stick to a scale. Like a musician using notes that sound good together! 🎵

Spacing Scale: 8, 12, 16, 20, 24, 32, 40, 48...
Colors: Pick a palette and stick to it!

📏 The 8px Rule

Most designers swear by multiples of 8 for spacing. It makes everything look professional! ✨

🔥 Developer Productivity Hacks

⌨️ IDE Autocomplete Setup

Configure your code editor to suggest UtiliKit classes. It's like having a smart assistant that finishes your sentences! 🤓

🎮 Master the Playground

Use the UtiliKit Playground like a sandbox – experiment freely, copy the code when you're happy. No consequences, just creativity! 🏖️

🔍 Debug Like a Detective

Developer mode + browser DevTools = Sherlock Holmes powers! 🕵️‍♂️ You'll see exactly what's happening and why.

🚀 Advanced Techniques

🎨 Component Building

Create reusable component patterns with UtiliKit classes. It's like building with LEGOs – and you can make your own custom blocks! 🧱

Button Component Pattern:
uk-pd--12-24 uk-br--6 uk-fw--600 uk-cu--pointer
Add color classes for variants!

🔄 Animation-Friendly Classes

Enable transitions in settings, then change classes dynamically with JavaScript. Smooth as butter! 🧈

🎓 Learning & Growth

📚 Study the Reference

The UtiliKit Reference page is like a dictionary for designers. Bookmark it, love it, use it! 📖

🤝 Share Your Creations

Built something cool? Share it! The community loves seeing creative UtiliKit usage. You might inspire someone else! 💫

🏆 The Ultimate UtiliKit Challenge

Ready to prove your skills? Try building a complete landing page using ONLY UtiliKit classes – no custom CSS allowed! 🎯

Share your creation and join the UtiliKit Masters Club! 🎖️

Challenge Tips:

Start with wireframes and plan your utility classes
Use the Playground to test complex components
Think mobile-first, then enhance for larger screens
Don't forget accessibility – semantic HTML is still king! 👑

🌟 Final Words of Wisdom

"UtiliKit is not just a CSS framework – it's a new way of thinking about design. Like learning to ride a bike, it might feel wobbly at first, but once it clicks, you'll wonder how you ever lived without it!" – Every UtiliKit Developer Ever 😄

📏 Supported Units Reference

Complete reference guide for all CSS properties in UtiliKit and their supported measurement units. Know exactly which units you can use with each property.

Quick Unit Reference

(none) → px (default)

pr → % (percentage)

em → em (relative to parent)

rem → rem (relative to root)

vh → vh (viewport height)

vw → vw (viewport width)

Property	Prefix	Supported Units	Additional Support	Example Classes
Padding	`uk-pd`	`px`, `%` (pr), `em`, `rem`	Sides (t,r,b,l) + Shorthand	`uk-pd--20`, `uk-pd--t-15`, `uk-pd--10-20-30-40`
Margin	`uk-mg`	`px`, `%` (pr), `em`, `rem`	Sides (t,r,b,l) + Shorthand	`uk-mg--15`, `uk-mg--r-auto`, `uk-mg--10-20`
Border Width	`uk-bw`	`px`, `%` (pr), `em`, `rem`	Sides (t,r,b,l) + Shorthand	`uk-bw--2`, `uk-bw--t-1`, `uk-bw--1-2-1-2`
Border Radius	`uk-br`	`px`, `%` (pr), `em`, `rem`	Corners (t,r,b,l) + Shorthand	`uk-br--10`, `uk-br--t-5`, `uk-br--5-10-15-20`

Sizing Properties (Dimensions)

Property	Prefix	Supported Units	Additional Support	Example Classes
Width	`uk-wd`	`px`, `%` (pr), `em`, `rem`, `vh`, `vw`	`auto`	`uk-wd--200`, `uk-wd--50pr`, `uk-wd--auto`
Height	`uk-ht`	`px`, `%` (pr), `em`, `rem`, `vh`, `vw`	`auto`	`uk-ht--150`, `uk-ht--100vh`, `uk-ht--auto`
Max Width	`uk-xw`	`px`, `%` (pr), `em`, `rem`, `vh`, `vw`	`auto`	`uk-xw--400`, `uk-xw--80pr`, `uk-xw--auto`
Max Height	`uk-xh`	`px`, `%` (pr), `em`, `rem`, `vh`, `vw`	`auto`	`uk-xh--300`, `uk-xh--50vh`, `uk-xh--auto`
Min Width	`uk-nw`	`px`, `%` (pr), `em`, `rem`, `vh`, `vw`	`auto`	`uk-nw--100`, `uk-nw--25pr`, `uk-nw--auto`
Min Height	`uk-nh`	`px`, `%` (pr), `em`, `rem`, `vh`, `vw`	`auto`	`uk-nh--50`, `uk-nh--20vh`, `uk-nh--auto`

Typography Properties

Property	Prefix	Supported Units	Additional Support	Example Classes
Font Size	`uk-fs`	`px`, `em`, `rem`, `vh`, `vw`	—	`uk-fs--16`, `uk-fs--1d2rem`, `uk-fs--4vw`
Line Height	`uk-lh`	`px`, `em`, `rem`	—	`uk-lh--24`, `uk-lh--1d50em`, `uk-lh--1d4rem`
Letter Spacing	`uk-ls`	`px`, `em`, `rem`	—	`uk-ls--1`, `uk-ls--0d1em`, `uk-ls--0d05rem`
Font Weight	`uk-fw`	Integer only	—	`uk-fw--400`, `uk-fw--700`, `uk-fw--900`

Positioning Properties

Property	Prefix	Supported Units	Additional Support	Example Classes
Top	`uk-tp`	`px`, `%` (pr), `em`, `rem`	`auto`	`uk-tp--20`, `uk-tp--50pr`, `uk-tp--auto`
Right	`uk-ri`	`px`, `%` (pr), `em`, `rem`	`auto`	`uk-ri--15`, `uk-ri--25pr`, `uk-ri--auto`
Bottom	`uk-bt`	`px`, `%` (pr), `em`, `rem`	`auto`	`uk-bt--10`, `uk-bt--30pr`, `uk-bt--auto`
Left	`uk-lt`	`px`, `%` (pr), `em`, `rem`	`auto`	`uk-lt--5`, `uk-lt--10pr`, `uk-lt--auto`

Layout Properties

Property	Prefix	Supported Units	Additional Support	Example Classes
Gap	`uk-gp`	`px`, `%` (p suffix)	Two values (row-col)	`uk-gp--20`, `uk-gp--10p`, `uk-gp--16-32`
Flex Grow	`uk-fg`	Decimal only	—	`uk-fg--1`, `uk-fg--1d500`, `uk-fg--2d25`
Flex Shrink	`uk-fk`	Decimal only	—	`uk-fk--0`, `uk-fk--1d00`, `uk-fk--0d50`
Flex Basis	`uk-fb`	`px`, `%` (pr), `em`, `rem`	`auto`	`uk-fb--200`, `uk-fb--50pr`, `uk-fb--auto`
Order	`uk-or`	Integer only	Negative values	`uk-or--1`, `uk-or---1`, `uk-or--3`

Color Properties

Property	Prefix	Supported Units	Additional Support	Example Classes
Background Color	`uk-bg`	Hex colors only	Optional opacity (0-100)	`uk-bg--ff0000`, `uk-bg--f00`, `uk-bg--ff0000-50`
Text Color	`uk-tc`	Hex colors only	Optional opacity (0-100)	`uk-tc--000000`, `uk-tc--333`, `uk-tc--000000-80`
Border Color	`uk-bc`	Hex colors only	Optional opacity (0-100)	`uk-bc--cccccc`, `uk-bc--ccc`, `uk-bc--cccccc-30`

Transform Properties

Property	Prefix	Supported Units	Additional Support	Example Classes
Rotate	`uk-rt`	Degrees only	0-360	`uk-rt--45`, `uk-rt--90`, `uk-rt--180`
Scale	`uk-sc`	Percentage only	100 = 1x	`uk-sc--120`, `uk-sc--150`, `uk-sc--80`

Special Properties

Property	Prefix	Supported Units	Additional Support	Example Classes
Opacity	`uk-op`	0-100 (converts to 0-1)	—	`uk-op--50`, `uk-op--75`, `uk-op--100`
Z-Index	`uk-zi`	Integer only	Negative values	`uk-zi--10`, `uk-zi---1`, `uk-zi--9999`
Aspect Ratio	`uk-ar`	Ratio format	width-height	`uk-ar--16-9`, `uk-ar--4-3`, `uk-ar--1-1`

Keyword-Only Properties

These properties only accept CSS keywords (no units):

Property	Prefix	Supported Values	Example Classes
Display	`uk-dp`	`block`, `flex`, `grid`, `none`, etc.	`uk-dp--flex`, `uk-dp--grid`, `uk-dp--none`
Position	`uk-ps`	`relative`, `absolute`, `fixed`, etc.	`uk-ps--relative`, `uk-ps--absolute`, `uk-ps--fixed`
Text Align	`uk-ta`	`left`, `center`, `right`, `justify`	`uk-ta--center`, `uk-ta--left`, `uk-ta--right`
Overflow	`uk-ov`	`hidden`, `auto`, `scroll`, `visible`	`uk-ov--hidden`, `uk-ov--auto`, `uk-ov--scroll`
Cursor	`uk-cu`	`pointer`, `default`, `help`, etc.	`uk-cu--pointer`, `uk-cu--help`, `uk-cu--default`
Background Size	`uk-bz`	`cover`, `contain`, `auto`	`uk-bz--cover`, `uk-bz--contain`, `uk-bz--auto`
Border Style	`uk-bs`	`solid`, `dashed`, `dotted`, `none`	`uk-bs--solid`, `uk-bs--dashed`, `uk-bs--b-dashed`
Flex Direction	`uk-fd`	`row`, `column`, `row-reverse`, `column-reverse`	`uk-fd--row`, `uk-fd--column`, `uk-fd--row-reverse`
Justify Content	`uk-jc`	`center`, `flex-start`, `flex-end`, `space-between`, `space-around`, `space-evenly`	`uk-jc--center`, `uk-jc--space-between`
Align Items	`uk-ai`	`center`, `flex-start`, `flex-end`, `stretch`, `baseline`	`uk-ai--center`, `uk-ai--stretch`, `uk-ai--baseline`
Align Content	`uk-ac`	`center`, `flex-start`, `flex-end`, `stretch`, `space-between`, `space-around`	`uk-ac--center`, `uk-ac--space-between`
Flex Wrap	`uk-fx`	`wrap`, `nowrap`, `wrap-reverse`	`uk-fx--wrap`, `uk-fx--nowrap`
Float	`uk-fl`	`left`, `right`, `none`	`uk-fl--left`, `uk-fl--right`, `uk-fl--none`
Clear	`uk-cl`	`left`, `right`, `both`, `none`	`uk-cl--both`, `uk-cl--left`, `uk-cl--none`
User Select	`uk-us`	`none`, `auto`, `text`, `all`	`uk-us--none`, `uk-us--auto`, `uk-us--text`

Grid Template Properties

Property	Prefix	Supported Units	Additional Support	Example Classes
Grid Columns	`uk-gc`	Grid track list	`repeat()`, `minmax()`, `fr`	`uk-gc--repeat-3-1fr`, `uk-gc--200px-1fr-auto`
Grid Rows	`uk-gr`	Grid track list	`repeat()`, `minmax()`, `fr`	`uk-gr--100px-auto-1fr`, `uk-gr--repeat-2-minmax-100px-1fr`
Grid Column	`uk-gl`	Range format	start-end positions	`uk-gl--1-3`, `uk-gl--2-4`, `uk-gl--1-span-2`
Grid Row	`uk-gw`	Range format	start-end positions	`uk-gw--1-2`, `uk-gw--3-5`, `uk-gw--2-span-3`

Unit Reference Guide

Unit Code	Actual CSS Unit	Usage Example	Description
(none)	`px`	`uk-pd--20` → `padding: 20px`	Default unit (pixels)
pr	`%`	`uk-wd--50pr` → `width: 50%`	Percentage
em	`em`	`uk-fs--1d50em` → `font-size: 1.5em`	Relative to parent font size
rem	`rem`	`uk-fs--1d2rem` → `font-size: 1.2rem`	Relative to root font size
vh	`vh`	`uk-ht--100vh` → `height: 100vh`	Viewport height
vw	`vw`	`uk-wd--50vw` → `width: 50vw`	Viewport width
p	`%`	`uk-gp--20p` → `gap: 20%`	Percentage (gap only)

Usage Notes

Default Unit: When no unit is specified, px is used
Viewport Units: Only available for sizing and font-size properties
Auto Support: Available for sizing and positioning properties where applicable
Shorthand Support: Available for padding, margin, border-width, and border-radius
Responsive: All properties support responsive prefixes (uk-sm-, uk-md-, uk-lg-, uk-xl-, uk-xxl-)
Color Format: Use 3-digit (f00) or 6-digit (ff0000) hex without #
Opacity: Add -50 suffix for 50% opacity on color properties

⚡ Quick Reference Cheat Sheet

Essential UtiliKit classes for everyday use. Copy, paste, style!

Spacing

uk-pd--{size} Padding

uk-mg--{size} Margin

uk-pd--t-{size} Padding top

uk-mg--r-auto Margin right auto

Common: 8, 12, 16, 20, 24, 32, 40

Colors

uk-bg--{hex} Background

uk-tc--{hex} Text color

uk-bc--{hex} Border color

uk-bg--ff0000-50 With 50% opacity

Format: 3-digit (f00) or 6-digit (ff0000)

Layout

uk-dp--flex Display flex

uk-dp--grid Display grid

uk-gp--{size} Gap

uk-ta--center Text align center

Sizing

uk-wd--{size} Width

uk-ht--{size} Height

uk-wd--50pr Width 50%

uk-ht--100vh Height 100vh

Typography

uk-fs--{size} Font size

uk-fw--{weight} Font weight

uk-lh--{size} Line height

Weights: 400 (normal), 600 (semi), 700 (bold)

Borders

uk-bw--{size} Border width

uk-bs--solid Border style

uk-br--{size} Border radius

uk-bw--b-2 Bottom border 2px

Sides: t (top), r (right), b (bottom), l (left)

Sizing (min/max)

uk-xw--{size} Max width

uk-xh--{size} Max height

uk-nw--{size} Min width

uk-nh--{size} Min height

Units: px (default), pr (%), em, rem, vh, vw

Positioning

uk-ps--relative Position

uk-tp--{size} Top

uk-ri--{size} Right

uk-bt--{size} Bottom

uk-lt--{size} Left

uk-zi--{int} Z-index

Position values: relative, absolute, fixed, sticky

Flexbox

uk-fd--row Flex direction

uk-jc--center Justify content

uk-ai--center Align items

uk-ac--stretch Align content

uk-fx--wrap Flex wrap

uk-fg--1 Flex grow

uk-fk--0 Flex shrink

uk-fb--auto Flex basis

uk-or--{int} Order

Grid

uk-gc--repeat-3-1fr Grid columns

uk-gr--auto-1fr Grid rows

uk-gl--1-3 Grid column span

uk-gw--1-2 Grid row span

Effects & Transforms

uk-op--{0-100} Opacity

uk-rt--{deg} Rotate

uk-sc--{%} Scale (100 = 1x)

uk-ar--16-9 Aspect ratio

Other Utilities

uk-ls--{size} Letter spacing

uk-ov--hidden Overflow

uk-cu--pointer Cursor

uk-bz--cover Background size

uk-fl--left Float

uk-cl--both Clear

uk-us--none User select

Responsive Prefixes

uk-sm- 576px+

uk-md- 768px+

uk-lg- 992px+

uk-xl- 1200px+

uk-xxl- 1400px+

Common Patterns

Card

uk-bg--ffffff uk-br--8 uk-pd--24

Button

uk-pd--12-24 uk-br--6 uk-fw--600 uk-cu--pointer

Center

uk-dp--flex uk-ai--center uk-jc--center

Grid

uk-dp--grid uk-gc--repeat-3-1fr uk-gp--16

Pseudo-States (Static/Head Mode)

Append a suffix to color values for interactive states:

-h :hover

-f :focus

-a :active

Example: uk-bg--007bff-h = blue background on hover, uk-tc--ff0000-50-f = 50% red text on focus

Decimal Notation

Use d in place of a decimal point (dots are not valid in CSS class names):

uk-lh--1d5 line-height: 1.5

uk-fs--1d125rem font-size: 1.125rem

uk-fg--0d5 flex-grow: 0.5

Syntax Pattern

uk- + [breakpoint-] + property + -- + value

uk-pd--20 → padding: 20px

uk-md-pd--40 → padding: 40px (medium+)

uk-bg--007bff → background: blue

📋 Special Cases & Limitations

Every tool has boundaries. Knowing what UtiliKit can't do is just as important as knowing what it can. This section helps you avoid dead ends and pick the right approach the first time.

📝

Decimal Notation

CSS class names can't contain dots, so UtiliKit uses d as the decimal separator.

✅ Correct

uk-lh--1d5      → line-height: 1.5
uk-fs--1d125rem → font-size: 1.125rem

❌ Will Not Work

uk-lh--1.5      → dot notation is not supported

🎨

Color & Value Restrictions

Hex only — Use 3-digit (f00) or 6-digit (ff0000) hex. No RGB, RGBA, HSL, or named colors.
No CSS variables — uk-bg--var(--my-color) is not supported
No calc() — uk-wd--calc(100%-20px) is not supported
Optional opacity — Append -50 for 50% opacity: uk-bg--ff0000-50

📏

Unit Limitations

Supported units — px (default), % (pr), em, rem, vh, vw
Viewport units restricted — vh and vw only work with sizing (wd, ht, xw, xh, nw, nh) and font-size (fs)
Not supported — ch, ex, vmin, vmax, svh, dvh
Shorthand max 4 values — uk-pd--10-20-30-40 ✅ but not 5+. No mixing units in one shorthand.

📐

Grid Template Limitations

Grid templates support repeat(), minmax(), and fr units, but some combinations are too complex for the parser:

Nested repeat() functions are not supported
fit-content() with auto-fit/auto-fill is not supported
Incomplete functions like uk-gc--repeat-3 (missing track value) will fail
auto with auto-fit/auto-fill is not allowed by the CSS spec

📱

Responsive Breakpoints

One breakpoint per class — uk-md-pd--20 ✅ but uk-sm-md-pd--20 ❌
No range queries — Can't target "between sm and lg" with a single class
Fixed values — Breakpoints (576, 768, 992, 1200, 1400) are set in configuration, not in classes

🔢

Property-Specific Rules

Opacity — Integer 0-100 (converted to 0-1 internally)
Z-index — Integer only, negatives allowed (uk-zi---1)
Font weight — 100-900 in steps of 100
Gap — Integer values only, no decimals
Aspect ratio — Ratio format only: uk-ar--16-9
Scale — Percentage where 100 = 1x: uk-sc--120 = 1.2x

🚫

Not Supported

Pseudo-elements — Can't target ::before or ::after
Pseudo-states — Only bg and tc support -h (hover), -f (focus), -a (active) in static/head modes. Not available in inline mode.
Animations & transitions — No built-in animation classes
Gradients — No gradient background support
Filters — No blur, brightness, contrast, etc.
Logical properties — No inline-start, block-end, etc.
Custom properties — Can't set CSS variables via classes

Our mission is to make Drupal more accessible and user-friendly, empowering businesses of all sizes, especially small enterprises with powerful tools that streamline content customization and enhance digital experiences.

Need help with your Drupal project? Hire Me through Flash Web Center, LLC.

Custom image showing drupal solo theme - google fonts - global fonts page - Professional Drupal theming and development services

UtiliKit Help & Documentation

Breadcrumbs

Main page content

🎨 Welcome to UtiliKit Help! ✨

🚀 Getting Started

The Magic Word: "utilikit"

Class Naming: The UtiliKit Language

Your First UtiliKit Element

Layout & Spacing

Colors & Pseudo-States (static/head mode)

Typography

Border (Per-Side)

Effects

🧠 How UtiliKit Works

Step 1: UtiliKit Watches

Step 2: Lightning-Fast Processing

Step 3: Magic Happens

🎭 Three Rendering Modes

🎪 Inline Mode (The Party Mode)

🏎️ Static Mode (The Race Car Mode)

🧠 Head Mode (The Smart Mode)

Mode Comparison at a Glance

🛠️ Developer Mode: Your X-Ray Vision

Visual Debugging

Console Logging

Debug Control Panel

🧪 Testing Developer Mode (Your Science Experiment!)

Feature Details

Visual Debugging

Display Errors on Page

Console Logging Levels

Debug Control Panel Buttons

Quick Verification

💎 Real-World Examples

🃏 Beautiful Card Component

📱 Responsive Button Squad

🏗️ Flexible Layout Grid

📱 Responsive Magic

🎯 The Breakpoint Family

Mobile First (0px+)

Small (576px+)

Medium (768px+)

Large (992px+)

Extra Large (1200px+)

XXL (1400px+)

🎭 Real Responsive Example

🔍 What's happening here?

💡 Pro Responsive Tips

Start Small, Think Big

Test on Real Devices

Less is More

🩺 Troubleshooting

😱 "My classes aren't working!"

🔧 Doctor's Orders:

🌪️ "Circular dependency errors!"

🔧 Emergency Fixes:

📁 "Static mode not generating CSS!"

🔧 File Detective Work:

📱 "Responsive classes not working!"

🔧 Responsive Rescue:

🎭 "Hover/focus states not working!"

🔧 Pseudo-State Fixes:

🚨 Emergency Toolkit

Enable Developer Mode

Clear All Caches

Browser DevTools

Test in Playground

🆘 Still Stuck? We've Got Your Back!

💡 Pro Tips & Tricks

🎯 Performance Ninja Moves

🏎️ Choose Your Mode Wisely

🧹 Keep It Clean

🎨 Design System Mastery

🎭 Create Consistent Patterns

📏 The 8px Rule

🔥 Developer Productivity Hacks

⌨️ IDE Autocomplete Setup

🎮 Master the Playground

🔍 Debug Like a Detective

🚀 Advanced Techniques