SAPTARSHI-coder · SAPTARSHI-coder · Jun 4, 2026 · Jun 4, 2026
@@ -0,0 +1,85 @@
+# CSS Bundle Optimization Demo
+
+## What does this do?
+
+Demonstrates how reusable CSS variables and centralized animation tokens can reduce repetitive declarations and improve maintainability in a growing CSS framework.
+
+---
+
+## How is it used?
+
+Instead of repeating transition values across multiple components:
+
+```css
+.button {
+    transition: all .3s cubic-bezier(.4,0,.2,1);
+}
+
+.card {
+    transition: all .3s cubic-bezier(.4,0,.2,1);
+}
+```
+
+Use shared design tokens:
+
+```css
+:root {
+    --ease-speed-medium: 0.3s;
+    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.component {
+    transition:
+        all var(--ease-speed-medium)
+        var(--ease-standard);
+}
+```
+
+---
+
+## Why is it useful?
+
+This approach helps frameworks remain scalable as more animations and components are added.
+
+Benefits include:
+
+* Reduced duplication
+* Easier maintenance
+* Consistent animation behavior
+* Cleaner architecture
+* Better preparation for future SCSS mixin adoption
+* Simpler framework expansion
+
+---
+
+## Demonstrated Components
+
+* Button
+* Card
+* Badge
+* Modal Preview
+
+All components reuse the same centralized transition tokens instead of repeating hardcoded values.
+
+---
+
+## Concept Demonstrated
+
+Repeated declarations:
+
+```css
+transition: all .3s cubic-bezier(.4,0,.2,1);
+```
+
+↓
+
+Shared design tokens:
+
+```css
+--ease-speed-medium
+--ease-standard
+```
+
+↓
+
+More maintainable and scalable CSS architecture.
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CSS Bundle Optimization Demo</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+  <div class="container">
+
+    <header>
+      <h1>CSS Bundle Optimization Demo</h1>
+      <p>
+        Demonstrating how reusable animation tokens and CSS variables
+        can reduce duplication and improve maintainability.
+      </p>
+    </header>
+
+    <section class="comparison">
+      <div class="panel">
+        <h2>Before Optimization</h2>
+
+        <pre>
+.button {
+ transition: all .3s cubic-bezier(.4,0,.2,1);
+}
+
+.card {
+ transition: all .3s cubic-bezier(.4,0,.2,1);
+}
+
+.modal {
+ transition: all .3s cubic-bezier(.4,0,.2,1);
+}
+</pre>
+
+      </div>
+
+      <div class="panel">
+        <h2>After Optimization</h2>
+
+        <pre>
+:root {
+ --ease-speed: .3s;
+ --ease-standard:
+ cubic-bezier(.4,0,.2,1);
+}
+
+.component {
+ transition:
+ all var(--ease-speed)
+ var(--ease-standard);
+}
+</pre>
+
+      </div>
+    </section>
+
+    <section>
+      <h2>Reusable Token Examples</h2>
+
+      <div class="component-grid">
+
+        <button class="token-button">
+          Button Component
+        </button>
+
+        <div class="token-card">
+          Card Component
+        </div>
+
+        <div class="token-badge">
+          Badge Component
+        </div>
+
+        <div class="token-modal">
+          Modal Preview
+        </div>
+
+      </div>
+    </section>
+
+    <section class="benefits">
+      <h2>Benefits</h2>
+
+      <ul>
+        <li>Reduces duplicated transition declarations</li>
+        <li>Centralizes animation timing values</li>
+        <li>Improves maintainability</li>
+        <li>Supports future SCSS migration</li>
+        <li>Keeps design tokens consistent</li>
+      </ul>
+    </section>
+
+
+  </div>
+
+</body>
+
+</html>
@@ -0,0 +1,137 @@
+:root {
+  --ease-speed-fast: 0.2s;
+  --ease-speed-medium: 0.3s;
+  --ease-speed-slow: 0.5s;
+
+  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+
+  --ease-radius: 12px;
+  --ease-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+
+  --ease-bg: #ffffff;
+  --ease-border: #d1d5db;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Arial, sans-serif;
+  background: #f5f7fa;
+  color: #222;
+}
+
+.container {
+  width: min(1100px, 90%);
+  margin: auto;
+  padding: 3rem 0;
+}
+
+header {
+  text-align: center;
+  margin-bottom: 3rem;
+}
+
+header p {
+  max-width: 65ch;
+  margin: 1rem auto 0;
+  line-height: 1.7;
+}
+
+.comparison {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 3rem;
+}
+
+.panel {
+  background: var(--ease-bg);
+  border: 1px solid var(--ease-border);
+  border-radius: var(--ease-radius);
+  padding: 1.5rem;
+  box-shadow: var(--ease-shadow);
+}
+
+pre {
+  overflow-x: auto;
+  margin-top: 1rem;
+  line-height: 1.5;
+}
+
+.component-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 1.5rem;
+  margin-top: 2rem;
+}
+
+.token-button,
+.token-card,
+.token-badge,
+.token-modal {
+  transition:
+    all var(--ease-speed-medium) var(--ease-standard);
+}
+
+.token-button {
+  border: none;
+  padding: 1rem;
+  border-radius: var(--ease-radius);
+  background: #2563eb;
+  color: white;
+  cursor: pointer;
+}
+
+.token-button:hover {
+  transform: translateY(-4px);
+}
+
+.token-card,
+.token-modal {
+  background: var(--ease-bg);
+  border: 1px solid var(--ease-border);
+  border-radius: var(--ease-radius);
+  padding: 2rem;
+  box-shadow: var(--ease-shadow);
+}
+
+.token-card:hover,
+.token-modal:hover {
+  transform: translateY(-4px);
+}
+
+.token-badge {
+  align-self: center;
+  justify-self: center;
+  padding: 0.75rem 1rem;
+  border-radius: 999px;
+  background: #111827;
+  color: white;
+}
+
+.token-badge:hover {
+  transform: scale(1.05);
+}
+
+.benefits {
+  margin-top: 3rem;
+}
+
+.benefits ul {
+  margin-top: 1rem;
+  padding-left: 1.5rem;
+}
+
+.benefits li {
+  margin-bottom: 0.75rem;
+}
+
+@media (max-width: 768px) {
+  .comparison {
+    grid-template-columns: 1fr;
+  }
+}