Responsive Suffix

Airframe uses a simple responsive suffix to make utilities, layouts, and grid classes adapt at specific breakpoints. Add @{bp} to a class name to apply it from that breakpoint and up.

Syntax

base-class@bp
base-class@bp-only

base-class is any Airframe class (utility, layout recipe, grid, etc.)
bp is one of the supported breakpoints (xs, sm, md, lg, xl, 2xl)
@{bp} applies the class from that breakpoint and up (mobile-first)
@{bp}-only applies the class only at that specific breakpoint range (not above or below)

Example

<div class="af-gap-sm af-gap-lg@md">
  <!-- Small gap on mobile, large gap on md+ -->
</div>

Breakpoint-Only Example

<div class="af-hidden@sm-only">
  <!-- Hidden only at sm breakpoint (640px-767px), visible elsewhere -->
</div>

Breakpoints

Suffix	Min Width	Typical Use
`@xs`	360px+	Small phones, compact viewports
`@sm`	640px+	Large phones, small tablets
`@md`	768px+	Tablets (portrait)
`@lg`	1024px+	Tablet landscape, small laptops
`@xl`	1280px+	Standard desktop
`@2xl`	1536px+	Large desktop, wide screens

How It Works

Mobile-first: base classes apply to all sizes, then @{bp} overrides start at the matching breakpoint.
Min-width media queries: @{bp} maps to a min-width query (applies from that breakpoint and up).
Breakpoint-only queries: @{bp}-only maps to both min-width and max-width queries (applies only at that specific breakpoint range).
Stackable: use multiple suffixes to progressively adjust styles.

<div class="af-grid-1 af-grid-2@md af-grid-4@lg">
  <!-- 1 column on mobile, 2 on md+, 4 on lg+ -->
</div>

Breakpoint-Only Variants

Breakpoint-only variants (@{bp}-only) target a specific breakpoint range, not “and up”. This is useful when you need styles that apply only at a particular screen size.

Available for: af-hidden and af-show utilities only.

<div class="af-hidden@sm-only">
  <!-- Hidden only at sm (640px-767px), visible at all other sizes -->
</div>
<div class="af-show@md-only">
  <!-- Visible only at md (768px-1023px), hidden at all other sizes -->
</div>

Breakpoint ranges:

@xs-only: 360px - 639px
@sm-only: 640px - 767px
@md-only: 768px - 1023px
@lg-only: 1024px - 1279px
@xl-only: 1280px - 1535px
@2xl-only: Not available (2xl has no upper limit)

Where You Can Use It

Most Airframe utilities and all layout/grid classes support responsive suffixes. Common categories:

Spacing: af-gap-lg@md, af-p-xl@lg
Layout recipes: af-stack-lg@md, af-inline-sm@lg
Grid: af-grid-2@md, af-col-span-8@lg
Visibility: af-hidden@xs, af-show@md, af-hidden@sm-only, af-show@md-only
Position: af-pos-sticky@md
Alignment: af-text-center@sm, af-text-start@md
Color utilities: af-bg-primary@lg, af-text-muted@md

If a class has a responsive variant, it follows the exact same naming with @{bp} appended.

Base Classes With Responsive Suffix

Add @{bp} to any base class in the lists below.

Spacing Utilities

af-gap-0 / af-gap-xs / af-gap-sm / af-gap-md / af-gap-lg / af-gap-xl / af-gap-2xl / af-gap-3xl / af-gap-4xl
af-p-0 / af-p-xs / af-p-sm / af-p-md / af-p-lg / af-p-xl / af-p-2xl / af-p-3xl / af-p-4xl
af-px-*, af-py-*, af-pt-*, af-pr-*, af-pb-*, af-pl-*
af-m-*, af-mx-auto, af-mx-*, af-my-*, af-mt-*, af-mr-*, af-mb-*, af-ml-*

Display & Alignment Utilities

af-hidden
af-block
af-inline-block
af-flex
af-inline-flex
af-flex-reverse
af-row / af-row-reverse
af-col / af-col-reverse
af-wrap
af-nowrap
af-justify-start
af-justify-center
af-justify-end
af-justify-between
af-justify-around
af-justify-evenly
af-items-start
af-items-center
af-items-end
af-items-stretch
af-items-baseline
af-align-top
af-align-middle
af-align-bottom
af-align-baseline
af-align-top / af-align-middle / af-align-bottom

Position Utilities

af-pos-relative
af-pos-absolute
af-pos-sticky
af-pos-revert

Typography Utilities

af-text-h1
af-text-h2
af-text-h3
af-text-body
af-text-muted
af-text-mono
af-text-sm
af-text-md
af-text-lg
af-text-body-sm
af-text-strong
af-title
af-text-nowrap
af-text-break
af-clamp
af-clamp-1
af-clamp-2
af-clamp-3
af-clamp-4
af-numeric

Text Alignment Utilities

af-text-center
af-text-start
af-text-end

Text Color Utilities

af-text
af-text-muted
af-text-inverse
af-text-primary
af-text-link
af-text-success
af-text-danger
af-text-warning
af-text-info

Background Color Utilities

af-bg-background
af-bg-surface
af-bg-surface-2
af-bg-surface-3
af-bg-primary
af-bg-success
af-bg-danger
af-bg-warning
af-bg-info
af-bg-primary-soft
af-bg-success-soft
af-bg-danger-soft
af-bg-warning-soft
af-bg-info-soft
af-gradient-accent
af-gradient-subtle
af-gradient-border

Border Color Utilities

af-border
af-border-default
af-border-muted
af-border-focus
af-border-strong
af-border-primary
af-border-success
af-border-danger
af-border-warning
af-border-info

Radius & Shadow Utilities

af-radius-sm
af-radius-md
af-radius-lg
af-radius-full
af-shadow-sm
af-shadow-md
af-shadow-lg

State Helpers

af-is-disabled
af-is-loading
af-is-active
af-is-muted
af-has-error
af-has-focus

Visibility Helpers

af-hidden
af-show

Accessibility Helpers

af-sr-only

Layout Recipes

af-stack
af-stack-sm
af-stack-md
af-stack-lg
af-inline
af-inline-sm
af-inline-md
af-inline-lg
af-cluster
af-spread
af-center
af-container
af-container-xs
af-container-sm
af-container-md
af-container-lg
af-container-xl
af-section-sm
af-section
af-section-lg
af-spacer-sm
af-spacer-md
af-spacer-lg
af-surface
af-surface-2

Flex Alignment Utilities

af-justify-start
af-justify-center
af-justify-end
af-justify-between
af-justify-around
af-justify-evenly
af-items-start
af-items-center
af-items-end
af-items-stretch
af-items-baseline

Flex Order & Sizing Utilities

af-order-first
af-order-default
af-order-1 … af-order-6
af-order-last
af-grow / af-grow-0
af-shrink / af-shrink-0
af-basis-0 / af-basis-auto
af-self-start / af-self-center / af-self-end / af-self-stretch / af-self-baseline

Outline & Focus Utilities

af-focus-ring
af-focus-ring-inset
af-focus-none
af-outline
af-outline-0
af-outline-offset-2
af-outline-offset-4

Cursor & Motion Utilities

af-cursor-pointer
af-cursor-not-allowed
af-reduce-motion

Hit Target Utilities

af-hit
af-hit-44

Grid Classes

af-grid
af-grid-1
af-grid-2
af-grid-3
af-grid-4
af-grid-5
af-grid-6
af-col-span-1
af-col-span-2
af-col-span-3
af-col-span-4
af-col-span-5
af-col-span-6
af-col-span-7
af-col-span-8
af-col-span-9
af-col-span-10
af-col-span-11
af-col-span-12

Common Patterns

Progressive Enhancement

<div class="af-stack af-stack-lg@md">
  <!-- Default layout for mobile, larger gap on md+ -->
</div>

Responsive Visibility

<div class="af-hidden@xs af-show@md">
  <!-- Hidden on extra-small screens, visible from md up -->
</div>

Breakpoint-Only Visibility

<div class="af-hidden@sm-only">
  <!-- Hidden only at sm breakpoint (640px-767px), visible elsewhere -->
</div>
<div class="af-show@md-only">
  <!-- Visible only at md breakpoint (768px-1023px), hidden elsewhere -->
</div>

Responsive Alignment

<h2 class="af-text-center af-text-start@md">
  Center on mobile, start-aligned on md+
</h2>

Tips

Start with a sensible base class for mobile, then add responsive overrides.
You can add a responsive class without a base class when you only want behavior at and above a breakpoint.
Keep class lists readable by grouping responsive overrides together.