• Color Variables

Variable

Value

Example HTML

Usage

--primary

#0d6efd

<button class="btn-primary">Button</button>

background: var(--primary);

--secondary

#6c757d

<button class="btn-secondary">Button</button>

background: var(--secondary);

--success

#198754

<div class="alert-success">Success</div>

color: var(--success);

--danger

#dc3545

<div class="alert-danger">Error</div>

background: var(--danger);

--warning

#ffc107

<span class="badge-warning">Warning</span>

color: var(--warning);

--info

#0dcaf0

<div class="info-box">Info</div>

background: var(--info);

--light

#f8f9fa

<section class="light-bg">Section</section>

background: var(--light);

--dark

#212529

<footer class="dark-bg">Footer</footer>

color: var(--dark);

--white

#ffffff

<div class="card">Card</div>

background: var(--white);

--black

#000000

<p>Text</p>

color: var(--black);

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Variables Example</title>

<style>

/* CSS Variables */
:root{
--primary:#0d6efd;
--secondary:#6c757d;
--success:#198754;
--danger:#dc3545;
--warning:#ffc107;
--info:#0dcaf0;
--light:#f8f9fa;
--dark:#212529;
--white:#ffffff;
--black:#000000;
}

/* Button Styles */
.btn-primary{
background:var(--primary);
color:white;
border:none;
padding:10px 20px;
margin:5px;
}

.btn-secondary{
background:var(--secondary);
color:white;
border:none;
padding:10px 20px;
margin:5px;
}

/* Alerts */
.alert-success{
color:var(--success);
padding:10px;
border:1px solid var(--success);
margin:10px 0;
}

.alert-danger{
background:var(--danger);
color:white;
padding:10px;
margin:10px 0;
}

/* Badge */
.badge-warning{
color:var(--warning);
font-weight:bold;
}

/* Info Box */
.info-box{
background:var(--info);
padding:10px;
margin:10px 0;
}

/* Light Section */
.light-bg{
background:var(--light);
padding:20px;
margin:10px 0;
}

/* Dark Footer */
.dark-bg{
color:var(--dark);
padding:20px;
border-top:2px solid var(--dark);
}

/* Card */
.card{
background:var(--white);
padding:20px;
border:1px solid #ddd;
margin:10px 0;
}

/* Text */
.text-black{
color:var(--black);
}

</style>
</head>

<body>

<h2>CSS Variables Demo</h2>

<!-- Primary Button -->
<button class="btn-primary">Button</button>

<!-- Secondary Button -->
<button class="btn-secondary">Button</button>

<!-- Success Alert -->
<div class="alert-success">Success</div>

<!-- Danger Alert -->
<div class="alert-danger">Error</div>

<!-- Warning Badge -->
<span class="badge-warning">Warning</span>

<!-- Info Box -->
<div class="info-box">Info</div>

<!-- Light Section -->
<section class="light-bg">Section</section>

<!-- Card -->
<div class="card">Card</div>

<!-- Black Text -->
<p class="text-black">Text</p>

<!-- Dark Footer -->
<footer class="dark-bg">Footer</footer>

</body>
</html>
  • Typography Variables

Variable

Value

Example HTML

Usage

--font-family-base

Arial, sans-serif

<body>

font-family: var(--font-family-base);

--font-family-heading

Poppins

<h1>

font-family: var(--font-family-heading);

--font-size-xs

12px

<small>

font-size: var(--font-size-xs);

--font-size-sm

14px

<p>

font-size: var(--font-size-sm);

--font-size-md

16px

<p>

font-size: var(--font-size-md);

--font-size-lg

20px

<h3>

font-size: var(--font-size-lg);

--font-size-xl

32px

<h1>

font-size: var(--font-size-xl);

--font-weight-light

300

<p>

font-weight: var(--font-weight-light);

--font-weight-normal

400

<p>

font-weight: var(--font-weight-normal);

--font-weight-bold

700

<strong>

font-weight: var(--font-weight-bold);

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Typography CSS Variables Example</title>

<style>

/* CSS Variables */
:root{
--font-family-base: Arial, sans-serif;
--font-family-heading: Poppins, sans-serif;

--font-size-xs: 12px;
--font-size-sm: 14px;
--font-size-md: 16px;
--font-size-lg: 20px;
--font-size-xl: 32px;

--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-bold: 700;
}

/* Apply Variables */

/* Base font for body */
body{
font-family: var(--font-family-base);
padding:40px;
}

/* Heading font */
.heading-font{
font-family: var(--font-family-heading);
}

/* Font Sizes */
.text-xs{
font-size: var(--font-size-xs);
}

.text-sm{
font-size: var(--font-size-sm);
}

.text-md{
font-size: var(--font-size-md);
}

.text-lg{
font-size: var(--font-size-lg);
}

.text-xl{
font-size: var(--font-size-xl);
}

/* Font Weights */
.font-light{
font-weight: var(--font-weight-light);
}

.font-normal{
font-weight: var(--font-weight-normal);
}

.font-bold{
font-weight: var(--font-weight-bold);
}

</style>
</head>

<body>

<h2>CSS Typography Variables Demo</h2>

<!-- Heading using heading font -->
<h1 class="heading-font text-xl">Heading Example (XL Size)</h1>

<!-- Large heading -->
<h3 class="text-lg">Large Heading (LG Size)</h3>

<!-- Paragraph sizes -->
<p class="text-sm">This paragraph uses small font size.</p>

<p class="text-md">This paragraph uses medium font size.</p>

<!-- Small text -->
<small class="text-xs">This is extra small text.</small>

<br><br>

<!-- Font weight examples -->
<p class="font-light">This paragraph uses light font weight.</p>

<p class="font-normal">This paragraph uses normal font weight.</p>

<strong class="font-bold">This text uses bold font weight.</strong>

</body>
</html>
  • Spacing Variables

Variable

Value

Example HTML

Usage

--space-0

0px

<div>

margin: var(--space-0);

--space-1

4px

<div class="box">

padding: var(--space-1);

--space-2

8px

<div>

padding: var(--space-2);

--space-3

12px

<div>

margin: var(--space-3);

--space-4

16px

<section>

padding: var(--space-4);

--space-5

24px

<div>

margin: var(--space-5);

--space-6

32px

<div>

gap: var(--space-6);

--space-7

40px

<div>

margin: var(--space-7);

--space-8

64px

<section>

padding: var(--space-8);

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Spacing Variables Example</title>

<style>

/* Spacing Variables */
:root{
--space-0:0px;
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:24px;
--space-6:32px;
--space-7:40px;
--space-8:64px;
}

/* Demo styles */
body{
font-family: Arial, sans-serif;
padding:20px;
}

.demo{
background:#e9ecef;
border:1px solid #ccc;
}

/* Usage Examples */

.space-0{
margin:var(--space-0);
}

.space-1{
padding:var(--space-1);
}

.space-2{
padding:var(--space-2);
}

.space-3{
margin:var(--space-3);
}

.space-4{
padding:var(--space-4);
}

.space-5{
margin:var(--space-5);
}

.space-6{
display:flex;
gap:var(--space-6);
}

.space-7{
margin:var(--space-7);
}

.space-8{
padding:var(--space-8);
}

.box{
background:#0d6efd;
color:white;
padding:10px;
}

</style>
</head>

<body>

<h2>CSS Spacing Variables Demo</h2>

<!-- space-0 -->
<div class="demo space-0">Margin: var(--space-0)</div>

<!-- space-1 -->
<div class="demo box space-1">Padding: var(--space-1)</div>

<!-- space-2 -->
<div class="demo space-2">Padding: var(--space-2)</div>

<!-- space-3 -->
<div class="demo space-3">Margin: var(--space-3)</div>

<!-- space-4 -->
<section class="demo space-4">Section Padding: var(--space-4)</section>

<!-- space-5 -->
<div class="demo space-5">Margin: var(--space-5)</div>

<!-- space-6 -->
<div class="space-6">
<div class="box">Item 1</div>
<div class="box">Item 2</div>
<div class="box">Item 3</div>
</div>

<br>

<!-- space-7 -->
<div class="demo space-7">Margin: var(--space-7)</div>

<!-- space-8 -->
<section class="demo space-8">Section Padding: var(--space-8)</section>

</body>
</html>
  • Border Variables

Variable

Value

Example HTML

Usage

--border-width

1px

<div class="box">

border-width: var(--border-width);

--border-color

#dee2e6

<div>

border-color: var(--border-color);

--border-radius-sm

4px

<button>

border-radius: var(--border-radius-sm);

--border-radius-md

8px

<div class="card">

border-radius: var(--border-radius-md);

--border-radius-lg

16px

<div>

border-radius: var(--border-radius-lg);

--border-radius-xl

30px

<button>

border-radius: var(--border-radius-xl);

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Border Variables Example</title>

<style>

/* Border Variables */
:root{
--border-width:1px;
--border-color:#dee2e6;
--border-radius-sm:4px;
--border-radius-md:8px;
--border-radius-lg:16px;
--border-radius-xl:30px;
}

/* Demo base style */
body{
font-family: Arial, sans-serif;
padding:40px;
}

/* Border width */
.box{
border-style:solid;
border-width:var(--border-width);
padding:10px;
margin-bottom:15px;
}

/* Border color */
.border-color{
border-style:solid;
border-width:2px;
border-color:var(--border-color);
padding:10px;
margin-bottom:15px;
}

/* Border radius small */
.btn-sm{
border-radius:var(--border-radius-sm);
padding:10px 20px;
border:1px solid #333;
margin:5px;
}

/* Border radius medium */
.card{
border-radius:var(--border-radius-md);
border:1px solid #ccc;
padding:20px;
margin-bottom:15px;
}

/* Border radius large */
.radius-lg{
border-radius:var(--border-radius-lg);
border:1px solid #ccc;
padding:15px;
margin-bottom:15px;
}

/* Border radius extra large */
.btn-xl{
border-radius:var(--border-radius-xl);
padding:10px 25px;
border:1px solid #333;
}

</style>
</head>

<body>

<h2>CSS Border Variables Demo</h2>

<!-- Border Width -->
<div class="box">
Border width using <code>var(--border-width)</code>
</div>

<!-- Border Color -->
<div class="border-color">
Border color using <code>var(--border-color)</code>
</div>

<!-- Small Radius Button -->
<button class="btn-sm">
Button (border-radius-sm)
</button>

<!-- Card with Medium Radius -->
<div class="card">
Card with <code>border-radius-md</code>
</div>

<!-- Large Radius Div -->
<div class="radius-lg">
Div with <code>border-radius-lg</code>
</div>

<!-- Extra Large Radius Button -->
<button class="btn-xl">
Button (border-radius-xl)
</button>

</body>
</html>
  • Shadow Variables

Variable

Value

Example HTML

Usage

--shadow-sm

0 1px 3px rgba(0,0,0,0.1)

<div class="card">

box-shadow: var(--shadow-sm);

--shadow-md

0 4px 10px rgba(0,0,0,0.15)

<div>

box-shadow: var(--shadow-md);

--shadow-lg

0 10px 25px rgba(0,0,0,0.2)

<div>

box-shadow: var(--shadow-lg);

--shadow-xl

0 20px 40px rgba(0,0,0,0.25)

<div>

box-shadow: var(--shadow-xl);

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Shadow Variables Example</title>

<style>

/* Shadow Variables */
:root{
--shadow-sm:0 1px 3px rgba(0,0,0,0.1);
--shadow-md:0 4px 10px rgba(0,0,0,0.15);
--shadow-lg:0 10px 25px rgba(0,0,0,0.2);
--shadow-xl:0 20px 40px rgba(0,0,0,0.25);
}

/* Page style */
body{
font-family: Arial, sans-serif;
padding:40px;
background:#f5f5f5;
}

/* Card with small shadow */
.card{
box-shadow:var(--shadow-sm);
padding:20px;
background:white;
margin-bottom:20px;
}

/* Medium shadow */
.shadow-md{
box-shadow:var(--shadow-md);
padding:20px;
background:white;
margin-bottom:20px;
}

/* Large shadow */
.shadow-lg{
box-shadow:var(--shadow-lg);
padding:20px;
background:white;
margin-bottom:20px;
}

/* Extra large shadow */
.shadow-xl{
box-shadow:var(--shadow-xl);
padding:20px;
background:white;
margin-bottom:20px;
}

</style>
</head>

<body>

<h2>CSS Shadow Variables Demo</h2>

<!-- Small Shadow -->
<div class="card">
Small Shadow using <code>var(--shadow-sm)</code>
</div>

<!-- Medium Shadow -->
<div class="shadow-md">
Medium Shadow using <code>var(--shadow-md)</code>
</div>

<!-- Large Shadow -->
<div class="shadow-lg">
Large Shadow using <code>var(--shadow-lg)</code>
</div>

<!-- Extra Large Shadow -->
<div class="shadow-xl">
Extra Large Shadow using <code>var(--shadow-xl)</code>
</div>

</body>
</html>
  • Layout Variables

Variable

Value

Example HTML

Usage

--container-width

1200px

<div class="container">

max-width: var(--container-width);

--header-height

80px

<header>

height: var(--header-height);

--sidebar-width

260px

<aside>

width: var(--sidebar-width);

--footer-height

100px

<footer>

height: var(--footer-height);

--grid-gap

20px

<div class="grid">

gap: var(--grid-gap);

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Layout Variables Example</title>

<style>

/* Layout Variables */
:root{
--container-width:1200px;
--header-height:80px;
--sidebar-width:260px;
--footer-height:100px;
--grid-gap:20px;
}

/* Page styling */
body{
font-family: Arial, sans-serif;
margin:0;
background:#f5f5f5;
}

/* Header */
header{
height:var(--header-height);
background:#0d6efd;
color:white;
display:flex;
align-items:center;
padding-left:20px;
}

/* Container */
.container{
max-width:var(--container-width);
margin:auto;
padding:20px;
}

/* Layout wrapper */
.layout{
display:flex;
}

/* Sidebar */
aside{
width:var(--sidebar-width);
background:#dee2e6;
padding:20px;
}

/* Main content */
main{
flex:1;
padding:20px;
}

/* Grid */
.grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:var(--grid-gap);
margin-top:20px;
}

/* Grid items */
.grid div{
background:white;
padding:20px;
border:1px solid #ccc;
}

/* Footer */
footer{
height:var(--footer-height);
background:#212529;
color:white;
display:flex;
align-items:center;
justify-content:center;
margin-top:20px;
}

</style>
</head>

<body>

<!-- Header -->
<header>
Header (height: var(--header-height))
</header>

<!-- Container -->
<div class="container">

<div class="layout">

<!-- Sidebar -->
<aside>
Sidebar (width: var(--sidebar-width))
</aside>

<!-- Main -->
<main>

<h2>Grid Layout</h2>

<!-- Grid -->
<div class="grid">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
</div>

</main>

</div>

</div>

<!-- Footer -->
<footer>
Footer (height: var(--footer-height))
</footer>

</body>
</html>
  • Z-Index Variables

Variable

Value

Example HTML

Usage

--z-dropdown

1000

<div class="dropdown">

z-index: var(--z-dropdown);

--z-sticky

1020

<nav>

z-index: var(--z-sticky);

--z-fixed

1030

<header>

z-index: var(--z-fixed);

--z-modal

1050

<div class="modal">

z-index: var(--z-modal);

--z-tooltip

1080

<div class="tooltip">

z-index: var(--z-tooltip);

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Z-Index Variables Example</title>

<style>

/* Z-Index Variables */
:root{
--z-dropdown:1000;
--z-sticky:1020;
--z-fixed:1030;
--z-modal:1050;
--z-tooltip:1080;
}

body{
font-family: Arial, sans-serif;
margin:0;
height:2000px;
}

/* Sticky Navigation */
nav{
position:sticky;
top:0;
background:#0d6efd;
color:white;
padding:15px;
z-index:var(--z-sticky);
}

/* Fixed Header */
header{
position:fixed;
top:50px;
left:0;
right:0;
background:#212529;
color:white;
padding:15px;
z-index:var(--z-fixed);
}

/* Dropdown */
.dropdown{
position:absolute;
top:120px;
left:20px;
background:#fff;
border:1px solid #ccc;
padding:10px;
z-index:var(--z-dropdown);
}

/* Modal */
.modal{
position:fixed;
top:40%;
left:50%;
transform:translate(-50%,-50%);
background:white;
padding:30px;
border:2px solid #333;
z-index:var(--z-modal);
}

/* Tooltip */
.tooltip{
position:absolute;
top:10px;
right:20px;
background:black;
color:white;
padding:5px 10px;
font-size:12px;
z-index:var(--z-tooltip);
}

</style>
</head>

<body>

<!-- Sticky Navigation -->
<nav>
Navigation (z-index: var(--z-sticky))
</nav>

<!-- Fixed Header -->
<header>
Header (z-index: var(--z-fixed))
</header>

<!-- Dropdown -->
<div class="dropdown">
Dropdown Menu (z-index: var(--z-dropdown))
</div>

<!-- Tooltip -->
<div class="tooltip">
Tooltip (z-index: var(--z-tooltip))
</div>

<!-- Modal -->
<div class="modal">
Modal Window (z-index: var(--z-modal))
</div>

</body>
</html>
  • Transition Variables

Variable

Value

Example HTML

Usage

--transition-fast

0.2s ease

<button>

transition: var(--transition-fast);

--transition-normal

0.4s ease

<div>

transition: var(--transition-normal);

--transition-slow

0.6s ease

<div>

transition: var(--transition-slow);

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Transition Variables Example</title>

<style>

/* Transition Variables */
:root{
--transition-fast:0.2s ease;
--transition-normal:0.4s ease;
--transition-slow:0.6s ease;
}

/* Page style */
body{
font-family: Arial, sans-serif;
padding:40px;
}

/* Button - Fast Transition */
button{
background:#0d6efd;
color:white;
border:none;
padding:10px 20px;
cursor:pointer;
transition:var(--transition-fast);
}

button:hover{
background:#084298;
}

/* Normal Transition Box */
.box-normal{
width:150px;
height:80px;
background:#198754;
color:white;
display:flex;
align-items:center;
justify-content:center;
margin-top:20px;
transition:var(--transition-normal);
}

.box-normal:hover{
transform:scale(1.1);
}

/* Slow Transition Box */
.box-slow{
width:150px;
height:80px;
background:#dc3545;
color:white;
display:flex;
align-items:center;
justify-content:center;
margin-top:20px;
transition:var(--transition-slow);
}

.box-slow:hover{
transform:rotate(10deg);
}

</style>
</head>

<body>

<h2>CSS Transition Variables Demo</h2>

<!-- Fast Transition -->
<button>Hover Button (Fast Transition)</button>

<!-- Normal Transition -->
<div class="box-normal">
Normal Transition
</div>

<!-- Slow Transition -->
<div class="box-slow">
Slow Transition
</div>

</body>
</html>
Back to list
Older Advanced Prompt Engineering for Frontend Developers

Leave a Reply

Your email address will not be published. Required fields are marked *