UtiliKit - Utility Class Reference

This reference page lists all available UtiliKit dynamic utility classes, their prefixes, and usage examples for your site.

Quick Reference Guide

▢Box Model

paddinguk-pd--value

marginuk-mg--value

border-widthuk-bw--value

border-radiusuk-br--value

border-styleuk-bs--value

●Colors

border-coloruk-bc--value

background-coloruk-bg--value

coloruk-tc--value

↕Sizing

inline-sizeuk-wd--value

block-sizeuk-ht--value

max-inline-sizeuk-xw--value

min-inline-sizeuk-nw--value

max-block-sizeuk-xh--value

min-block-sizeuk-nh--value

⊞Positioning

inset-block-startuk-tp--value

inset-inline-startuk-lt--value

inset-inline-enduk-ri--value

inset-block-enduk-bt--value

positionuk-ps--value

TTypography

font-sizeuk-fs--value

line-heightuk-lh--value

font-weightuk-fw--value

letter-spacinguk-ls--value

text-alignuk-ta--value

✦Effects

opacityuk-op--value

z-indexuk-zi--value

•Spacing

gapuk-gp--value

▦Layout

aspect-ratiouk-ar--value

displayuk-dp--value

overflowuk-ov--value

cursoruk-cu--value

floatuk-fl--value

clearuk-cl--value

user-selectuk-us--value

⇄Flexbox

flex-growuk-fg--value

flex-shrinkuk-fk--value

flex-basisuk-fb--value

orderuk-or--value

flex-directionuk-fd--value

justify-contentuk-jc--value

align-itemsuk-ai--value

align-contentuk-ac--value

flex-wrapuk-fx--value

▦Grid

grid-template-columnsuk-gc--value

grid-template-rowsuk-gr--value

grid-columnuk-gl--value

grid-rowuk-gw--value

↻Transform

rotateuk-rt--value

scaleuk-sc--value

•Background

background-sizeuk-bz--value

Background

Property	Prefix	Example	Responsive	Value Type	Notes
backgroundSize	`uk-bz`	`uk-bz--cover`	`uk-md-bz--cover`	CSS keyword	CSS keywords

Box Model

Property	Prefix	Example	Responsive	Value Type	Notes
borderRadius	`uk-br`	`uk-br--t-20`	`uk-md-br--t-20`	px, %, em, rem	Supports sides + shorthand
borderStyle	`uk-bs`	`uk-bs--t-20`	`uk-md-bs--t-20`	CSS keyword	Supports sides + shorthand
borderWidth	`uk-bw`	`uk-bw--t-20`	`uk-md-bw--t-20`	px, %, em, rem	Supports sides + shorthand
margin	`uk-mg`	`uk-mg--t-20`	`uk-md-mg--t-20`	px, %, em, rem	Supports sides + shorthand
padding	`uk-pd`	`uk-pd--t-20`	`uk-md-pd--t-20`	px, %, em, rem	Supports sides + shorthand

Colors

Property	Prefix	Example	Responsive	Value Type	Notes
backgroundColor	`uk-bg`	`uk-bg--ff0000, uk-bg--ff0000-h`	`uk-md-bg--ff0000, uk-bg--ff0000-h`	Hex color	Hex + opacity + hover/focus/active
borderColor	`uk-bc`	`uk-bc--ff0000`	`uk-md-bc--ff0000`	Hex color	Hex + optional opacity
color	`uk-tc`	`uk-tc--ff0000, uk-tc--ff0000-h`	`uk-md-tc--ff0000, uk-tc--ff0000-h`	Hex color	Hex + opacity + hover/focus/active

Effects

Property	Prefix	Example	Responsive	Value Type	Notes
opacity	`uk-op`	`uk-op--50`	`uk-md-op--50`	0-100 (%)	0-100 → 0-1
zIndex	`uk-zi`	`uk-zi--10`	`uk-md-zi--10`	Integer	Integer only

Flexbox

Property	Prefix	Example	Responsive	Value Type	Notes
alignContent	`uk-ac`	`uk-ac--center`	`uk-md-ac--center`	CSS keyword	CSS keywords
alignItems	`uk-ai`	`uk-ai--center`	`uk-md-ai--center`	CSS keyword	CSS keywords
flexBasis	`uk-fb`	`uk-fb--20`	`uk-md-fb--20`	px, %, em, rem	Multiple units
flexDirection	`uk-fd`	`uk-fd--row`	`uk-md-fd--row`	CSS keyword	CSS keywords
flexGrow	`uk-fg`	`uk-fg--1d500`	`uk-md-fg--1d500`	Decimal number	Decimal values
flexShrink	`uk-fk`	`uk-fk--1d500`	`uk-md-fk--1d500`	Decimal number	Decimal values
flexWrap	`uk-fx`	`uk-fx--wrap`	`uk-md-fx--wrap`	CSS keyword	CSS keywords
justifyContent	`uk-jc`	`uk-jc--center`	`uk-md-jc--center`	CSS keyword	CSS keywords
order	`uk-or`	`uk-or--2`	`uk-md-or--2`	Integer	Integer only

Grid

Property	Prefix	Example	Responsive	Value Type	Notes
gridColumn	`uk-gl`	`uk-gl--1-3`	`uk-md-gl--1-3`	Range (start-end)	Range format
gridRow	`uk-gw`	`uk-gw--1-3`	`uk-md-gw--1-3`	Range (start-end)	Range format
gridTemplateColumns	`uk-gc`	`uk-gc--repeat-3-1fr`	`uk-md-gc--repeat-3-1fr`	Grid track list	Grid syntax
gridTemplateRows	`uk-gr`	`uk-gr--100px-auto-1fr`	`uk-md-gr--100px-auto-1fr`	Grid track list	Grid syntax

Layout

Property	Prefix	Example	Responsive	Value Type	Notes
aspectRatio	`uk-ar`	`uk-ar--16-9`	`uk-md-ar--16-9`	Range (start-end)	Range format
clear	`uk-cl`	`uk-cl--both`	`uk-md-cl--both`	CSS keyword	CSS keywords
cursor	`uk-cu`	`uk-cu--pointer`	`uk-md-cu--pointer`	CSS keyword	CSS keywords
display	`uk-dp`	`uk-dp--flex`	`uk-md-dp--flex`	CSS keyword	CSS keywords
float	`uk-fl`	`uk-fl--inline-start`	`uk-md-fl--inline-start`	CSS keyword	CSS keywords
overflow	`uk-ov`	`uk-ov--hidden`	`uk-md-ov--hidden`	CSS keyword	CSS keywords
userSelect	`uk-us`	`uk-us--none`	`uk-md-us--none`	CSS keyword	CSS keywords

Positioning

Property	Prefix	Example	Responsive	Value Type	Notes
insetBlockEnd	`uk-bt`	`uk-bt--20`	`uk-md-bt--20`	px, %, em, rem	Multiple units
insetBlockStart	`uk-tp`	`uk-tp--20`	`uk-md-tp--20`	px, %, em, rem	Multiple units
insetInlineEnd	`uk-ri`	`uk-ri--20`	`uk-md-ri--20`	px, %, em, rem	Multiple units
insetInlineStart	`uk-lt`	`uk-lt--20`	`uk-md-lt--20`	px, %, em, rem	Multiple units
position	`uk-ps`	`uk-ps--relative`	`uk-md-ps--relative`	CSS keyword	CSS keywords

Sizing

Property	Prefix	Example	Responsive	Value Type	Notes
blockSize	`uk-ht`	`uk-ht--100pr`	`uk-md-ht--100pr`	px, %, em, rem, vh, vw	Multiple units
inlineSize	`uk-wd`	`uk-wd--100pr`	`uk-md-wd--100pr`	px, %, em, rem, vh, vw	Multiple units
maxBlockSize	`uk-xh`	`uk-xh--100pr`	`uk-md-xh--100pr`	px, %, em, rem, vh, vw	Multiple units
maxInlineSize	`uk-xw`	`uk-xw--100pr`	`uk-md-xw--100pr`	px, %, em, rem, vh, vw	Multiple units
minBlockSize	`uk-nh`	`uk-nh--100pr`	`uk-md-nh--100pr`	px, %, em, rem, vh, vw	Multiple units
minInlineSize	`uk-nw`	`uk-nw--100pr`	`uk-md-nw--100pr`	px, %, em, rem, vh, vw	Multiple units

Spacing

Property	Prefix	Example	Responsive	Value Type	Notes
gap	`uk-gp`	`uk-gp--16-32`	`uk-md-gp--16-32`	px, %, em, rem	Multiple units

Transform

Property	Prefix	Example	Responsive	Value Type	Notes
rotate	`uk-rt`	`uk-rt--45`	`uk-md-rt--45`	Degrees	Transform value
scale	`uk-sc`	`uk-sc--150`	`uk-md-sc--150`	Scale (%)	Transform value

Typography

Property	Prefix	Example	Responsive	Value Type	Notes
fontSize	`uk-fs`	`uk-fs--1d5rem`	`uk-md-fs--1d5rem`	px, %, em, rem, vh, vw	Multiple units
fontWeight	`uk-fw`	`uk-fw--700`	`uk-md-fw--700`	Integer	Integer only
letterSpacing	`uk-ls`	`uk-ls--20`	`uk-md-ls--20`	px, %, em, rem	Multiple units
lineHeight	`uk-lh`	`uk-lh--1d5rem`	`uk-md-lh--1d5rem`	px, %, em, rem	Multiple units
textAlign	`uk-ta`	`uk-ta--center`	`uk-md-ta--center`	CSS keyword	CSS keywords

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.

Global Fonts

Google Fonts offers a diverse range of typographic styles that can significantly enhance the visual appeal of a website. By incorporating these fonts, users can effortlessly apply them to their entire website with just a ...

Color Schemes

The Solo Drupal theme offers an exceptional feature with its 50 predefined color schemes, allowing users to effortlessly transform the aesthetic of their entire website. This feature is particularly useful for those who ...

Text Animation

The Drupal Theme named Solo offers an exciting feature for web designers and content creators – 24 predefined text animations. This versatile feature allows users to bring their website to life by applying dynamic and ...

Global Breakpoints

The "Solo" Drupal theme introduces a critical feature for modern web design: customizable responsive breakpoints. This functionality is pivotal in crafting websites that offer an optimal viewing experience across a wide ...

Developed & Designed by Alaa Haddad

UtiliKit - Utility Class Reference

Quick Reference Guide

Background

Box Model

Colors

Effects

Flexbox

Grid

Layout

Positioning

Sizing

Spacing

Transform

Typography

Global Fonts

Color Schemes

Text Animation

Global Breakpoints

Menu Breakpoints

Regions' Gap

Global Font Size

UtiliKit - Utility Class Reference

Breadcrumbs

Main page content

Quick Reference Guide

Background

Box Model

Colors

Effects

Flexbox

Grid

Layout

Positioning

Sizing

Spacing

Transform

Typography

Mission

Home Blocks - Four

Global Fonts

Home Blocks - Five

Color Schemes

Home Blocks - Six

Text Animation

Home Blocks - Seven

Global Breakpoints

Home Blocks - Eight

Menu Breakpoints

Home Blocks - Nine

Regions' Gap

Home Blocks - Ten

Global Font Size