Conditional Classes

Responsive Breakpoints

Foundation.css uses a mobile-first approach with progressive breakpoints. By default, all classes apply to all screens. Conditional prefixes allow you to apply styles only from certain screen sizes.

Usage Examples

<!-- Responsive layout -->
<div class="d-block sm:d-flex md:d-grid lg:d-inline-flex">
  <!-- Mobile: block -->
  <!-- 600px+: flex -->
  <!-- 1008px+: grid -->
  <!-- 1280px+: inline-flex -->
</div>

<!-- Adaptive spacing -->
<div class="p2 sm:p4 md:p6 lg:p8">
  <!-- Padding increases with screen size -->
</div>

<!-- Responsive grid -->
<div class="d-grid grid__1 sm:grid__2 md:grid__3 lg:grid__4 g4">
  <!-- 1 column on mobile, 2 on tablet, 3 on desktop, 4 on large screen -->
</div>

Hover Classes

Classes with the h: prefix apply only when hovering over the element.

Usage Examples

<!-- Button with hover effect -->
<button class="bg-light h:bg-green h:fc-white t">
  Interactive Button
</button>

<!-- Card with hover effect -->
<div class="bg-white bs-sm h:bs-lg t">
  <!-- Shadow intensifies on hover -->
</div>

<!-- Link with color change -->
<a href="#" class="fc-blue h:fc-green h:underline">
  Link with hover effect
</a>

Focus Classes

Classes with the f: prefix apply only when the element has focus (keyboard navigation, click, etc.).

Usage Examples

<!-- Input field with visible focus -->
<input type="text" class="bc-light f:bc-blue f:bs-sm"
       placeholder="Enter text">

<!-- Button with focus state -->
<button class="bg-light f:bg-blue f:fc-white">
  Accessible Button
</button>

<!-- Link with focus for keyboard navigation -->
<a href="#" class="fc-blue f:fc-green f:underline">
  Accessible Link
</a>

Conditional Class Combinations

You can combine conditional prefixes to create complex and responsive behaviors.

Responsive + Hover

<!-- Hover effect that changes based on screen size -->
<div class="bg-white sm:h:bg-light md:h:bg-blue lg:h:bg-green">
  <!-- Mobile: no hover effect -->
  <!-- 600px+: white hover -->
  <!-- 1008px+: blue hover -->
  <!-- 1280px+: green hover -->
</div>

Responsive + Focus

<!-- Adaptive focus based on screen -->
<input type="text"
       class="bc-light sm:f:bc-blue md:f:bc-green lg:f:bc-purple">

Complete Example

<!-- Responsive button with hover and focus states -->
<button class="
  bg-light fc-dark
  sm:bg-blue sm:fc-white
  md:p4 md:fs-h3
  lg:p6 lg:fs-h2
  h:bg-green h:bs-lg
  sm:h:bg-purple
  f:bg-orange f:fc-white
  t
">
  Complete Button
</button>

Best Practices

Mobile-First

Always start by defining styles for mobile, then add larger breakpoints:

<!-- ✅ Good -->
<div class="d-block sm:d-flex md:d-grid">

<!-- ❌ Avoid -->
<div class="sm:d-flex md:d-grid d-block">

Accessibility

Always think about users who navigate with the keyboard:

<!-- ✅ Good - Visible focus -->
<button class="bg-blue f:bg-green f:bs-md">

<!-- ❌ Avoid - No focus -->
<button class="bg-blue h:bg-green">

Performance

Avoid overloading elements with too many conditional classes:

<!-- ✅ Good - Targeted and necessary -->
<div class="d-grid grid__1 sm:grid__2 md:grid__3">

<!-- ❌ Avoid - Too many variations -->
<div class="grid__1 sm:grid__2 md:grid__3 lg:grid__4 xl:grid__5">

Readability

Organize your classes logically:

<!-- ✅ Good - Logical and readable -->
<div class="
  p2 sm:p4 md:p6
  bg-white h:bg-light
  bs-sm h:bs-md
">