Skip to main content

Responsive Design

Build responsive layouts with Apex utility classes.

Mobile-First

Apex follows a mobile-first approach. Base styles apply to all screen sizes, and breakpoints target larger screens.

Breakpoints

Apex includes five default breakpoints:

CSS
sm: 640px   /* Small devices */
md: 768px   /* Medium devices */
lg: 1024px  /* Large devices */
xl: 1280px  /* Extra large devices */
2xl: 1536px /* Extra extra large devices */

Responsive Modifiers

Use responsive prefixes to apply styles at specific breakpoints:

HTML
<!-- Stack on mobile, side-by-side on desktop -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Responsive Typography

Adjust text size based on viewport:

HTML
<h1 class="text-xl md:text-2xl lg:text-4xl">
  Responsive Heading
</h1>

Hide/Show Elements

Show or hide elements at different breakpoints:

HTML
<!-- Hide on mobile, show on desktop -->
<div class="hidden md:block">
  Desktop only content
</div>

<!-- Show on mobile, hide on desktop -->
<div class="md:hidden">
  Mobile only content
</div>