Practical Use Cases for Startr.Style Utilities
Real-world examples showing how to solve common design challenges using Startr.Style utilities. Each use case includes the problem, solution, and complete code examples.
🎯 Common Layout Challenges
Use Case 1: Centering Content Vertically and Horizontally
The Challenge:
You need to center a login form both vertically and horizontally in the viewport.
The Solution:
Use flexbox utilities to create a full-height container with centered content.
<!-- Full height container with centered content -->
<div style="--d: flex; --ai: center; --jc: center; --h: 100vh; --bg: #f8f9fa;">
<div style="--bg: white; --p: 2rem; --br: 8px; --shadow: 0 4px 16px rgba(0,0,0,0.1); --w: 100%; --maxw: 400px;">
<h2 style="--ta: center; --mb: 2rem;">Login</h2>
<form>
<input type="email" placeholder="Email" style="--w: 100%; --p: 0.75rem; --mb: 1rem; outline: 1px solid #ddd; --br: 4px;">
<input type="password" placeholder="Password" style="--w: 100%; --p: 0.75rem; --mb: 1.5rem; outline: 1px solid #ddd; --br: 4px;">
<button style="--w: 100%; --bg: #007bff; --c: white; --p: 1rem; outline: none; --br: 4px; --cursor: pointer;">Login</button>
</form>
</div>
</div>Live Preview:
Login
Use Case 2: Responsive Navigation Bar
The Challenge:
Create a navigation bar that stacks vertically on mobile and horizontally on desktop.
<nav style="--bg: #343a40; --p: 1rem; --d: flex; --fd: column; --fd-md: row; --ai: center; --jc: space-between;">
<div style="--c: white; --fs: 1.5rem; --fw: 600; --mb: 1rem; --mb-md: 0;">
Brand
</div>
<ul style="--d: flex; --fd: column; --fd-md: row; --g: 0; --g-md: 2rem; --list: none; --p: 0; --m: 0;">
<li><a href="#" style="--c: #adb5bd; --td: none; --p: 0.5rem 0; --d: block;">Home</a></li>
<li><a href="#" style="--c: #adb5bd; --td: none; --p: 0.5rem 0; --d: block;">About</a></li>
<li><a href="#" style="--c: #adb5bd; --td: none; --p: 0.5rem 0; --d: block;">Contact</a></li>
</ul>
</nav>Live Preview:
Use Case 3: Image Gallery with Hover Effects
The Challenge:
Create an image gallery that scales images on hover and maintains aspect ratio.
<div style="--d: grid; --grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); --gap: 1rem;">
<div style="--pos: relative; --overflow: hidden; --br: 8px; --aspect-ratio: 16/9; --cursor: pointer;">
<img src="image1.jpg" style="--w: 100%; --h: 100%; --object-fit: cover; --transition: transform 0.3s ease; --transform-hvr: scale(1.1);">
<div style="--pos: absolute; --bottom: 0; --left: 0; --right: 0; --bg: linear-gradient(transparent, rgba(0,0,0,0.7)); --c: white; --p: 1rem;">
<h3 style="--fs: 1.2rem; --fw: 600; --mb: 0.5rem;">Image Title</h3>
<p style="--fs: 0.9rem; --opacity: 0.8;">Description</p>
</div>
</div>
</div>💼 Business Component Patterns
Use Case 4: Pricing Cards
<div style="--d: grid; --grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); --gap: 2rem; --p: 2rem;">
<!-- Basic Plan -->
<div style="--bg: white; outline: 2px solid #e9ecef; --br: 12px; --p: 2rem; --ta: center; --transition: all 0.3s ease;">
<h3 style="--fs: 1.5rem; --fw: 600; --mb: 1rem; --c: #495057;">Basic</h3>
<div style="--fs: 3rem; --fw: 700; --c: #007bff; --mb: 1rem;">$9<span style="--fs: 1rem; --fw: 400; --c: #6c757d;">/month</span></div>
<ul style="--list: none; --p: 0; --mb: 2rem;">
<li style="--mb: 0.5rem; --c: #495057;">5 Projects</li>
<li style="--mb: 0.5rem; --c: #495057;">10GB Storage</li>
<li style="--mb: 0.5rem; --c: #495057;">Email Support</li>
</ul>
<button style="--w: 100%; --bg: transparent; --c: #007bff; outline: 2px solid #007bff; --p: 1rem; --br: 8px; --cursor: pointer; --transition: all 0.3s ease;">
Choose Plan
</button>
</div>
<!-- Popular Plan (Featured) -->
<div style="--bg: #007bff; --c: white; --br: 12px; --p: 2rem; --ta: center; --transform: scale(1.05); --shadow: 0 10px 30px rgba(0,123,255,0.3);">
<div style="--bg: #ffc107; --c: #000; --p: 0.5rem 1rem; --br: 20px; --fs: 0.8rem; --fw: 600; --mb: 1rem; --d: inline-block;">POPULAR</div>
<h3 style="--fs: 1.5rem; --fw: 600; --mb: 1rem;">Pro</h3>
<div style="--fs: 3rem; --fw: 700; --mb: 1rem;">$29<span style="--fs: 1rem; --fw: 400; --opacity: 0.8;">/month</span></div>
<button style="--w: 100%; --bg: white; --c: #007bff; outline: none; --p: 1rem; --br: 8px; --cursor: pointer; --fw: 600;">
Choose Plan
</button>
</div>
</div>Live Preview:
Basic
$9/month
- 5 Projects
- 10GB Storage
- Email Support
POPULAR
Pro
$29/month
- 20 Projects
- 100GB Storage
- Priority Support
⚡ Performance & Accessibility
Use Case 5: Loading States
The Challenge:
Show loading states for buttons and content areas while data is being fetched.
<!-- Loading Button -->
<button style="--bg: #6c757d; --c: white; --p: 0.75rem 2rem; --br: 4px; outline: none; --cursor: not-allowed; --opacity: 0.7;" disabled>
<span style="--d: inline-block; --w: 1rem; --h: 1rem; outline: 2px solid transparent; --border-top: 2px solid white; --br: 50%; --animation: spin 1s linear infinite; --mr: 0.5rem;"></span>
Loading...
</button>
<!-- Skeleton Loading -->
<div style="--p: 1.5rem; --bg: white; --br: 8px; --shadow: 0 2px 8px rgba(0,0,0,0.1);">
<div style="--h: 1.5rem; --bg: #e9ecef; --br: 4px; --mb: 1rem; --animation: pulse 1.5s ease-in-out infinite;"></div>
<div style="--h: 1rem; --bg: #e9ecef; --br: 4px; --mb: 0.5rem; --w: 80%; --animation: pulse 1.5s ease-in-out infinite;"></div>
<div style="--h: 1rem; --bg: #e9ecef; --br: 4px; --w: 60%; --animation: pulse 1.5s ease-in-out infinite;"></div>
</div>Live Preview:
Want to See More Examples?
These use cases show just a fraction of what's possible with Startr.Style utilities.