Foundation Framework

The most advanced responsive front-end framework in the world. Created by ZURB for enterprise-level applications.

What is Foundation?

Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps, and emails that look amazing on any device. It's used by companies like Adobe, Amazon, and Disney.

Enterprise Ready

Built for large-scale applications and professional development

Semantic & Accessible

Focus on semantic HTML and WCAG accessibility standards

Customizable

SASS-based with extensive customization options

Grid System

Key Features:

  • XY Grid - Modern flexbox-based grid system
  • Responsive Breakpoints - Small, medium, large, xlarge, xxlarge
  • Cell-based Layout - Flexible cell sizing and positioning
  • Grid Margins & Padding - Built-in spacing utilities
  • Nesting Support - Complex layouts with nested grids

Grid System Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Foundation Grid System</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
</head>
<body>
  <div class="grid-container">
    <h1 class="text-center">Foundation Grid System</h1>

    <!-- Basic Grid -->
    <div class="callout">
      <h3>Basic Grid - Equal Width Columns</h3>
      <div class="grid-x grid-margin-x">
        <div class="cell small-4" style="background: #1779ba; color: white; padding: 1rem; border: 2px solid white;">
          cell small-4
        </div>
        <div class="cell small-4" style="background: #1779ba; color: white; padding: 1rem; border: 2px solid white;">
          cell small-4
        </div>
        <div class="cell small-4" style="background: #1779ba; color: white; padding: 1rem; border: 2px solid white;">
          cell small-4
        </div>
      </div>
    </div>

    <!-- Responsive Grid -->
    <div class="callout">
      <h3>Responsive Grid</h3>
      <div class="grid-x grid-margin-x">
        <div class="cell small-12 medium-6 large-4" style="background: #3adb76; color: white; padding: 1rem;">
          small-12 medium-6 large-4
        </div>
        <div class="cell small-12 medium-6 large-4" style="background: #3adb76; color: white; padding: 1rem;">
          small-12 medium-6 large-4
        </div>
        <div class="cell small-12 medium-12 large-4" style="background: #3adb76; color: white; padding: 1rem;">
          small-12 medium-12 large-4
        </div>
      </div>
    </div>

    <!-- Grid with Margins -->
    <div class="callout">
      <h3>Grid with Gutters</h3>
      <div class="grid-x grid-margin-x">
        <div class="cell small-6" style="background: #ffae00; color: white; padding: 1rem;">
          cell small-6
        </div>
        <div class="cell small-6" style="background: #ffae00; color: white; padding: 1rem;">
          cell small-6
        </div>
      </div>
    </div>

    <!-- Nested Grid -->
    <div class="callout">
      <h3>Nested Grid</h3>
      <div class="grid-x grid-margin-x">
        <div class="cell small-8" style="background: #cc4b37; color: white; padding: 1rem;">
          Parent cell small-8
          <div class="grid-x grid-margin-x">
            <div class="cell small-6" style="background: #8a1d1d; padding: 0.5rem; margin-top: 0.5rem;">
              Nested small-6
            </div>
            <div class="cell small-6" style="background: #8a1d1d; padding: 0.5rem; margin-top: 0.5rem;">
              Nested small-6
            </div>
          </div>
        </div>
        <div class="cell small-4" style="background: #cc4b37; color: white; padding: 1rem;">
          Parent cell small-4
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Components

Component Library:

ButtonsCardsCalloutsNavigationFormsModalsTabsAccordions

Components Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Foundation Components</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
</head>
<body>
  <div class="grid-container">
    <h1 class="text-center">Foundation Components</h1>

    <!-- Buttons -->
    <div class="callout">
      <h3>Button Components</h3>
      <button class="button primary">Primary Button</button>
      <button class="button secondary">Secondary Button</button>
      <button class="button success">Success Button</button>
      <button class="button alert">Alert Button</button>
      <button class="button warning">Warning Button</button>
      <button class="button hollow">Hollow Button</button>
    </div>

    <!-- Cards -->
    <div class="callout">
      <h3>Card Components</h3>
      <div class="grid-x grid-margin-x">
        <div class="cell medium-6">
          <div class="card">
            <div class="card-divider">
              <h4>Basic Card</h4>
            </div>
            <div class="card-section">
              <p>This is a simple card component with header and content sections.</p>
              <button class="button primary">Learn More</button>
            </div>
          </div>
        </div>
        <div class="cell medium-6">
          <div class="card">
            <div class="card-divider alert">
              <h4>Featured Card</h4>
            </div>
            <div class="card-section">
              <p>Card with different styling and call-to-action button.</p>
              <button class="button success">Get Started</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Callouts -->
    <div class="callout">
      <h3>Callout Components</h3>
      <div class="callout primary">
        <h5>Primary Callout</h5>
        <p>This is a primary callout for important information.</p>
      </div>
      <div class="callout success">
        <h5>Success Callout</h5>
        <p>This callout indicates a successful operation.</p>
      </div>
      <div class="callout warning">
        <h5>Warning Callout</h5>
        <p>This callout shows a warning message to users.</p>
      </div>
      <div class="callout alert">
        <h5>Alert Callout</h5>
        <p>This callout displays an alert or error message.</p>
      </div>
    </div>

    <!-- Navigation -->
    <div class="callout">
      <h3>Navigation Menu</h3>
      <ul class="menu">
        <li class="menu-text">Site Title</li>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</body>
</html>

Forms

Form Features:

  • Accessible Forms - WCAG compliant form controls
  • Input Groups - Combined inputs with buttons and labels
  • Fieldset Support - Group related form elements
  • Validation Styles - Built-in error and success states
  • Custom Controls - Sliders, switches, and file inputs

Forms Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Foundation Forms</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
</head>
<body>
  <div class="grid-container">
    <h1 class="text-center">Foundation Forms</h1>

    <!-- Basic Form -->
    <div class="callout">
      <h3>Contact Form</h3>
      <form>
        <div class="grid-container">
          <div class="grid-x grid-margin-x">
            <div class="cell medium-6">
              <label>First Name
                <input type="text" placeholder="Enter your first name">
              </label>
            </div>
            <div class="cell medium-6">
              <label>Last Name
                <input type="text" placeholder="Enter your last name">
              </label>
            </div>
            <div class="cell medium-12">
              <label>Email Address
                <input type="email" placeholder="Enter your email">
              </label>
            </div>
            <div class="cell medium-12">
              <label>Subject
                <select>
                  <option value="">Select a subject</option>
                  <option value="general">General Inquiry</option>
                  <option value="support">Support Request</option>
                  <option value="feedback">Feedback</option>
                </select>
              </label>
            </div>
            <div class="cell medium-12">
              <label>Message
                <textarea placeholder="Enter your message" rows="4"></textarea>
              </label>
            </div>
            <div class="cell medium-12">
              <fieldset class="fieldset">
                <legend>Preferences</legend>
                <input id="checkbox1" type="checkbox"><label for="checkbox1">Subscribe to newsletter</label>
                <input id="checkbox2" type="checkbox"><label for="checkbox2">Receive notifications</label>
              </fieldset>
            </div>
            <div class="cell medium-12">
              <button type="submit" class="button primary">Submit Form</button>
            </div>
          </div>
        </div>
      </form>
    </div>

    <!-- Form Elements -->
    <div class="callout">
      <h3>Form Elements</h3>
      <div class="grid-x grid-margin-x">
        <div class="cell medium-6">
          <label>Text Input
            <input type="text" placeholder="Regular input field">
          </label>
        </div>
        <div class="cell medium-6">
          <label>Password
            <input type="password" placeholder="Enter password">
          </label>
        </div>
        <div class="cell medium-6">
          <label>File Input
            <input type="file">
          </label>
        </div>
        <div class="cell medium-6">
          <label>Range Slider
            <input type="range" min="0" max="100">
          </label>
        </div>
      </div>
    </div>

    <!-- Input Groups -->
    <div class="callout">
      <h3>Input Groups</h3>
      <div class="input-group">
        <span class="input-group-label">$</span>
        <input class="input-group-field" type="number" placeholder="Amount">
        <div class="input-group-button">
          <button type="submit" class="button">Transfer</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Responsive Features

Responsive Capabilities:

  • Responsive Visibility - Show/hide elements per breakpoint
  • Responsive Navigation - Adaptive menus that adjust across devices
  • Mobile-First Approach - Build for mobile, enhance for desktop
  • Breakpoint Control - Fine-grained responsive behavior
  • Touch-Optimized - Mobile-friendly interactions

Responsive Features Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Foundation Responsive Features</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
</head>
<body>
  <div class="grid-container">
    <h1 class="text-center">Foundation Responsive Features</h1>

    <!-- Responsive Visibility -->
    <div class="callout">
      <h3>Responsive Visibility</h3>
      <div class="show-for-small" style="background: #1779ba; color: white; padding: 1rem; margin-bottom: 1rem;">
        Visible only on small screens
      </div>
      <div class="show-for-medium" style="background: #3adb76; color: white; padding: 1rem; margin-bottom: 1rem;">
        Visible only on medium screens and up
      </div>
      <div class="show-for-large" style="background: #ffae00; color: white; padding: 1rem; margin-bottom: 1rem;">
        Visible only on large screens and up
      </div>
      <div class="hide-for-small" style="background: #cc4b37; color: white; padding: 1rem;">
        Hidden on small screens
      </div>
    </div>

    <!-- Responsive Menu -->
    <div class="callout">
      <h3>Responsive Navigation</h3>
      <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
        <button class="menu-icon" type="button" data-toggle="main-menu"></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><a href="#">Home</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">About</a></li>
          </ul>
        </div>
      </div>
    </div>

    <!-- Responsive Grid -->
    <div class="callout">
      <h3>Responsive Card Layout</h3>
      <div class="grid-x grid-margin-x">
        <div class="cell small-12 medium-6 large-4">
          <div class="card">
            <div class="card-section">
              <h5>Mobile First</h5>
              <p>This card takes full width on mobile, half on medium, one-third on large screens.</p>
            </div>
          </div>
        </div>
        <div class="cell small-12 medium-6 large-4">
          <div class="card">
            <div class="card-section">
              <h5>Responsive Design</h5>
              <p>Foundation's grid system automatically adapts to different screen sizes.</p>
            </div>
          </div>
        </div>
        <div class="cell small-12 medium-12 large-4">
          <div class="card">
            <div class="card-section">
              <h5>Flexible Layout</h5>
              <p>Create complex responsive layouts with Foundation's powerful grid.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Responsive Typography -->
    <div class="callout">
      <h3>Responsive Typography</h3>
      <h1 class="lead">This is a lead paragraph that stands out.</h1>
      <p class="subheader">This is a subheader for additional context.</p>
      <p class="text-justify">This text is justified and will adapt to different screen sizes while maintaining readability across all devices.</p>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
  <script>
    $(document).foundation();
  </script>
</body>
</html>

Quick Start Guide

CDN Method (Quick Start)

<!-- Foundation CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">

<!-- jQuery and Foundation JS -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>

<!-- Initialize Foundation -->
<script>
  $(document).foundation();
</script>

Package Manager (npm)

# Install via npm
npm install foundation-sites

# Import in your project
import 'foundation-sites/dist/css/foundation.min.css';
import $ from 'jquery';
import Foundation from 'foundation-sites';

// Initialize Foundation
$(document).foundation();

// Or use specific components
import { Abide, Accordion, Reveal } from 'foundation-sites';

Best Practices

✅ Do This

  • Use semantic HTML - Maintain accessibility standards
  • Leverage SASS customization - Customize via variables
  • Follow mobile-first - Build for mobile then enhance
  • Use proper grid structure - Follow XY Grid patterns
  • Initialize JavaScript - Remember to call foundation()

❌ Avoid This

  • Overriding core styles - Use SASS variables instead
  • Ignoring accessibility - Foundation is built for a11y
  • Mixing grid systems - Stick to XY Grid consistently
  • Forgetting JavaScript init - Components need initialization
  • Hardcoding values - Use Foundation's spacing scale

Ready to Build with Foundation?

Start creating enterprise-level responsive applications with the professional-grade framework trusted by major companies worldwide.

< PreviousNext >