Glory.css Documentation

📦 What is Glory.css?

Glory.css is a clean and lightweight CSS utility framework made by Mehdi Ali. It uses simple class names like btn-primary, card, glass, and grid-container, with powerful visual effects and easy-to-use layout tools.

🚀 Getting Started

CDN Link

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Exoo25/Glory/glory.css">

Or Local File

<link rel="stylesheet" href="css/glory.css">

🧱 Components & Utility Classes

🎨 Buttons

<button class="btn-primary">Primary</button>
<button class="btn-danger">Danger</button>
<button class="btn-secondary">Secondary</button>

🧩 Cards

<div class="card">Basic Card</div>
<div class="card glass">Glass Effect</div>
<div class="card gradient-bg">Gradient Background</div>

📦 Layout Containers

Flex Layout

<div class="card-container">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
</div>

Grid Layout

<div class="grid-container">
    <div class="card">Item 1</div>
    <div class="card">Item 2</div>
    <div class="card">Item 3</div>
</div>

Example grid CSS in glory.css:

.grid-container {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

🧑‍🎨 Customization

Override default values in glory.css:

:root {
     --primary-color: #3b82f6;
     --danger-color: #ef4444;
     --secondary-color: #22c55e;
    --font: 'Segoe UI', sans-serif;
}