Common CSS (Spacing & Position Utilities)

FrankUI provides utility helper classes for rapid layout adjustments, positioning elements, and spacing. These utilities form the foundation for more advanced responsive interfaces.

Demo: This element has class fixed-top. It is fixed at the top of the viewport.

Demo: This element has class fixed-bottom. It is fixed at the bottom of the viewport.

Color Utilities

Apply background, foreground (text), and border colors quickly using prefix-based utility classes. All color utilities are defined with !important to guarantee they apply consistently.

Usage Pattern:

.bg-[color-name] - Sets background color
.fg-[color-name] - Sets text/foreground color
.bd-[color-name] - Sets border color

Primary Colors

#a4c400

lime

#60a917

green

#008a00

emerald

#00aba9

teal

#1ba1e2

cyan

#0050ef

cobalt

#6a00ff

indigo

#aa00ff

violet

#f472d0

pink

#d80073

magenta

#a20025

crimson

#e51400

red

#fa6800

orange

#f0a30a

amber

#e3c800

yellow

#825a2c

brown

#6d8764

olive

#2d89ef

blue

Extended Colors

#647687

steel

#76608a

mauve

#87794e

taupe

#fad6a5

champagne

#f0e68c

khaki

#555555

charcoal

#cd7f32

bronze

#6997c3

windstorm

#e6b8a2

nude

#c25e3a

terracotta

#ff7f50

coral

#4b5320

army

#fff5ee

seashell

#c2b280

sand

Neutral & Special Colors

#1d1d1d

dark

#f8f9fa

light

#808080

gray

#5d6d7e

gray-blue

#f5f6f8

gray-white

#a0a0a0

gray-mouse

#1a1a1a

almost

#ff00ff

clown

Code Example

<!-- Custom alert panel using theme colors -->
<div class="bg-light border border-solid border-size-1 bd-orange p-3 rounded">
    <h4 class="fg-crimson mt-0">Warning Notice</h4>
    <p class="fg-charcoal mb-0">This action cannot be undone.</p>
</div>

<!-- Cobalt colored badge -->
<span class="bg-cobalt fg-white p-1 rounded">Admin</span>