Space and Typography Systems

:root {
  /* Fluid spacing system */
  --space-3xs: clamp(0.25rem, 0.23rem + 0.11vw, 0.31rem);
  --space-2xs: clamp(0.5rem, 0.46rem + 0.22vw, 0.63rem);
  --space-xs: clamp(0.75rem, 0.69rem + 0.33vw, 0.94rem);
  --space-s: clamp(1rem, 0.91rem + 0.43vw, 1.25rem);
  --space-m: clamp(1.5rem, 1.37rem + 0.65vw, 1.88rem);
  --space-l: clamp(2rem, 1.83rem + 0.87vw, 2.5rem);
  --space-xl: clamp(3rem, 2.74rem + 1.3vw, 3.75rem);
  
  /* Fluid typography */
  --text-xs: clamp(0.75rem, 0.71rem + 0.2vw, 0.88rem);
  --text-sm: clamp(0.88rem, 0.83rem + 0.24vw, 1rem);
  --text-base: clamp(1rem, 0.96rem + 0.22vw, 1.13rem);
  --text-lg: clamp(1.13rem, 1.08rem + 0.22vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.2rem + 0.24vw, 1.38rem);
  --text-2xl: clamp(1.5rem, 1.43rem + 0.33vw, 1.69rem);
  --text-3xl: clamp(1.88rem, 1.78rem + 0.43vw, 2.13rem);
}

.text-system {
  font-size: var(--text-base);
  line-height: 1.6;
  margin-bottom: var(--space-s);
}

.heading-1 {
  font-size: var(--text-3xl);
  line-height: 1.2;
  margin-bottom: var(--space-m);
  font-weight: 700;
}

Modern Layout Patterns

The Holy Grail Layout with CSS Grid

.holy-grail {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav main aside"
    "footer footer footer";
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 200px 1fr 200px;
  min-height: 100vh;
  gap: 1rem;
}

.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

@media (max-width: 768px) {
  .holy-grail {
    grid-template-areas:
      "header"
      "nav"
      "main"
      "aside"
      "footer";
    grid-template-columns: 1fr;
  }
}

Intrinsic Web Design

.intrinsic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 2rem;
}

.card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 400px;
}

.card__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.card__description {
  flex: 1;
}

Advanced Animations and Interactions

Scroll-Driven Animations

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scroll-reveal {
  animation: reveal linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}

/* Progress indicator */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: var(--primary);
  transform-origin: left;
  animation: progress linear;
  animation-timeline: scroll(root);
}

@keyframes progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

Micro-Interactions with CSS

.button {
  position: relative;
  padding: 0.75rem 2rem;
  border: none;
  border-radius: 8px;
  background: var(--primary);
  color: white;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
}

.button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.button:hover::before {
  width: 300px;
  height: 300px;
}

.button:active {
  transform: scale(0.98);
}

/* Loading state */
.button[data-loading="true"] {
  pointer-events: none;
  opacity: 0.7;
}

.button[data-loading="true"]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

Performance Optimization

CSS Containment

.card {
  contain: layout style paint;
}

.sidebar {
  contain: layout;
}

.article-content {
  contain: style;
}

/* For dynamic content */
.dynamic-list-item {
  contain: layout style paint size;
  content-visibility: auto;
  contain-intrinsic-size: 200px;
}

Critical CSS Patterns

/* Above-the-fold critical styles */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

/* Defer non-critical animations */
@media (prefers-reduced-motion: no-preference) {
  .hero__title {
    animation: fadeInUp 1s ease-out;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Browser Support and Progressive Enhancement

/* Feature detection with @supports */
.grid-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

@supports (display: grid) {
  .grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

@supports (container-type: inline-size) {
  .responsive-component {
    container-type: inline-size;
  }
  
  @container (min-width: 400px) {
    .component-content {
      display: grid;
      grid-template-columns: 1fr 2fr;
    }
  }
}

/* Fallback for older browsers */
@supports not (container-type: inline-size) {
  @media (min-width: 400px) {
    .component-content {
      display: grid;
      grid-template-columns: 1fr 2fr;
    }
  }
}

Conclusion

Modern CSS has evolved into a powerful tool that enables developers to create sophisticated, responsive, and performant web interfaces with less code and better maintainability. Key takeaways:

• Container queries revolutionize responsive design by allowing components to respond to their container
• CSS Grid subgrid enables perfect alignment in complex layouts
• Advanced custom properties create flexible design systems
• Scroll-driven animations provide smooth, performant interactions
• CSS containment optimizes rendering performance
• Progressive enhancement ensures broad browser support

By mastering these modern CSS techniques, you'll be equipped to build the next generation of web interfaces that are both beautiful and performant.

Ready to dive deeper? Explore our CSS Grid masterclass and learn advanced layout techniques.

Thanks for reading!

Want to read more articles? Check out our blog for the latest insights and updates.