Instant Cheatsheets & Syntax Vault
Instant syntax references for CSS Flexbox, CSS Grid, Apple Glass specular math, Tailwind utility shorthands, Flutter Dart widgets, and modern CSS tokens. 1-Click code copy.
CSS Flexbox justify-content Playground
Click the alignment pills below to preview dynamic layout changes in real time, then copy the exact property.
01
02
03
04
CSS Flexbox Essentials
display: flex; align-items: center; justify-content: center;
Absolute Center Any Child
flex-wrap: wrap; gap: 1.5rem;
Responsive Dynamic Multi-Row
flex: 1 1 0%; min-width: 0;
Equal-Width & Prevent Text Overflow
margin-left: auto;
Push Right in Flex Row
CSS Grid & Bento Shorthands
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
Responsive Auto-Fit Grid (No Media Query)
grid-column: span 2; grid-row: span 2;
Bento Featured Double-Span Card
place-items: center;
1-Line Center in CSS Grid
grid-template-columns: 1fr auto 1fr;
Header with Centered Logo & Flanked Nav
Apple Glass & Specular Math
backdrop-filter: blur(24px) saturate(180%);
Frosted Blur + Vibrancy Saturator
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.16);
1px Specular Top Light Border
background: rgba(14, 16, 24, 0.65);
Deep Obsidian Semi-Translucent Glass
border: 1px solid rgba(255, 255, 255, 0.08);
Subtle Hairline Edge Boundary
Tailwind CSS Utility Shorthands
backdrop-blur-xl bg-slate-900/60 border border-white/10
Complete Frosted Glass Card
transition-all duration-300 hover:scale-[1.02] hover:-translate-y-0.5
Spring Hover Elevate Micro-Motion
grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6
Responsive 3-Column Grid
bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-cyan-400
Linear Jewel Shimmer Gradient Text
Flutter (Dart) Widget & Layout Cheats
BackdropFilter(filter: ImageFilter.blur(sigmaX: 18, sigmaY: 18))
Flutter Frosted Blur (with ClipRRect)
BoxDecoration(gradient: LinearGradient(...), borderRadius: ...)
Curved Gradient Card Container
LayoutBuilder(builder: (ctx, constraints) => ...)
Responsive Mobile vs Tablet vs Web Layout
InkWell(borderRadius: BorderRadius.circular(12), onTap: () {})
Ripple Touch Feedback Button
Modern CSS Features & Design Tokens
font-size: clamp(1rem, 2.5vw, 2.5rem);
Fluid Typography Scaling (No Breakpoints)
background: color-mix(in srgb, var(--accent) 20%, transparent);
Native Color Mixing & Opacity Tint
aspect-ratio: 16 / 9; object-fit: cover;
Enforce Media Aspect Ratio
container-type: inline-size; @container (min-width: 400px)
Container Query Component Adaptability
Ready to browse live components or read in-depth tutorials?
Explore the Code Snippets Vault for live interactive components, or dive into Technical Documentation for architecture guides.