Foundation Responsive Design

Live Preview: Responsive Grid

Foundation Code:

<div class="grid-x grid-margin-x">
  <div class="cell small-12 medium-6 large-4">
    Full on mobile, 6 on medium, 4 on large
  </div>
  <div class="cell small-12 medium-6 large-4">
    Full on mobile, 6 on medium, 4 on large
  </div>
  <div class="cell small-12 large-4">
    Full on mobile and medium, 4 on large
  </div>
</div>

Live Preview: Show/Hide Based on Screen Size

Foundation Code:

<!-- Show only on small screens -->
<div class="show-for-small-only">
  🔬 Visible only on mobile
</div>

<!-- Show only on medium screens -->
<div class="show-for-medium-only">
  📱 Visible only on tablet
</div>

<!-- Show only on large screens -->
<div class="show-for-large">
  💻 Visible only on desktop
</div>

<!-- Hide on specific screens -->
<div class="hide-for-medium">
  Hidden on medium screens
</div>

<div class="hide-for-large">
  Hidden on large screens
</div>

Live Preview: Responsive Text

This text scales with screen size

This paragraph text also scales responsively.

Foundation Code:

<!-- Responsive heading -->
<h3 class="small-6 medium-4 large-2">This text scales with screen size</h3>

<!-- Responsive text alignment -->
<p class="text-left medium-text-center large-text-right">
  This text aligns differently on each screen size
</p>

<!-- Responsive text sizing -->
<p class="small-12 medium-10 large-8">
  This paragraph uses different column widths for text
</p>

Live Preview: Responsive Menu

Foundation Code:

<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="main-menu">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Responsive Site</li>
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
    </ul>
  </div>
</div>

Live Preview: Responsive Images

Fluid image that scales

Content that adjusts with image

Foundation Code:

<!-- Responsive image -->
<img src="/placeholder.jpg" class="thumbnail" alt="Responsive image">

<!-- Responsive image with different sizes -->
<img src="/placeholder.jpg" 
     srcset="/placeholder-small.jpg 300w,
             /placeholder-medium.jpg 600w,
             /placeholder-large.jpg 1200w"
     sizes="(max-width: 640px) 300px,
            (max-width: 1024px) 600px,
            1200px"
     alt="Responsive image">

<!-- Image in responsive grid -->
<div class="grid-x grid-margin-x">
  <div class="cell medium-6">
    <img src="/placeholder.jpg" alt="Image">
  </div>
  <div class="cell medium-6">
    <p>Content that adjusts with image</p>
  </div>
</div>

Live Preview: Responsive Spacing

Foundation Code:

<!-- Responsive padding -->
<div class="padding-1 medium-padding-3 large-padding-5">
  Responsive padding: small on mobile, large on desktop
</div>

<!-- Responsive flexbox -->
<div class="flex-container flex-dir-column medium-flex-dir-row">
  <div class="flex-child-grow">Stacked on mobile</div>
  <div class="flex-child-grow">Horizontal on desktop</div>
</div>

<!-- Responsive margin -->
<div class="margin-bottom-1 medium-margin-bottom-3">
  Responsive bottom margin
</div>

<!-- Responsive text -->
<div class="text-center medium-text-left large-text-right">
  Responsive text alignment
</div>