Responsive design
Using responsive utility variants to build adaptive user interfaces.
Overview
Every utility class in Sprig can be applied conditionally at different breakpoints, which makes it a piece of cake to build complex responsive interfaces without ever leaving your HTML.
Breakpoint prefix | Minimum width | CSS |
|---|---|---|
| 40rem (640px) |
|
| 48rem (768px) |
|
| 64rem (1024px) |
|
| 80rem (1280px) |
|
| 96rem (1536px) |
|
<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<img class="w-16 md:w-32 lg:w-48" src="..." />Working mobile-first
Sprig uses a mobile-first breakpoint system. Unprefixed utilities (like uppercase) take effect on all screen sizes, while prefixed utilities (like md:uppercase) only take effect at the specified breakpoint and above.
Don't use sm: to target mobile devices. Use unprefixed utilities for mobile and override them at larger breakpoints.
Container queries
Mark an element as a container with @container, then style children based on the container's size with variants like @md: and @lg:.
<div class="@container">
<div class="flex flex-col @md:flex-row">
<!-- ... -->
</div>
</div>