diff --git a/submissions/examples/css-bundle-optimization-demo/README.md b/submissions/examples/css-bundle-optimization-demo/README.md new file mode 100644 index 00000000..9bb428ba --- /dev/null +++ b/submissions/examples/css-bundle-optimization-demo/README.md @@ -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. diff --git a/submissions/examples/css-bundle-optimization-demo/demo.html b/submissions/examples/css-bundle-optimization-demo/demo.html new file mode 100644 index 00000000..b6aaa73e --- /dev/null +++ b/submissions/examples/css-bundle-optimization-demo/demo.html @@ -0,0 +1,105 @@ + + + + + + + + CSS Bundle Optimization Demo + + + + + +
+ +
+

CSS Bundle Optimization Demo

+

+ Demonstrating how reusable animation tokens and CSS variables + can reduce duplication and improve maintainability. +

+
+ +
+
+

Before Optimization

+ + 
+.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);
+}
+
+ +
+ +
+

After Optimization

+ + 
+:root {
+ --ease-speed: .3s;
+ --ease-standard:
+ cubic-bezier(.4,0,.2,1);
+}
+
+.component {
+ transition:
+ all var(--ease-speed)
+ var(--ease-standard);
+}
+
+ +
+
+ +
+

Reusable Token Examples

+ +
+ + + +
+ Card Component +
+ +
+ Badge Component +
+ +
+ Modal Preview +
+ +
+
+ +
+

Benefits

+ + +
+ + +
+ + + + \ No newline at end of file diff --git a/submissions/examples/css-bundle-optimization-demo/style.css b/submissions/examples/css-bundle-optimization-demo/style.css new file mode 100644 index 00000000..8956aa37 --- /dev/null +++ b/submissions/examples/css-bundle-optimization-demo/style.css @@ -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; + } +} \ No newline at end of file