Foundation

Foundation is a responsive front-end CSS framework by ZURB. It provides a flexible grid system, UI components, and JavaScript plugins for building responsive websites.

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

<!-- JavaScript (requires jQuery) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites/dist/js/foundation.min.js"></script>
<script>
  $(document).foundation();
</script>

npm install foundation-sites

# Using CLI
npm install -g foundation-cli
foundation new

<div class="grid-container">
  <div class="grid-x grid-padding-x">
    <div class="cell medium-6 large-4">
      <div class="callout primary">
        <h5>This is a card</h5>
        <p>Using Foundation grid and callout.</p>
        <a href="#" class="button">Click me</a>
      </div>
    </div>
  </div>
</div>

<!-- Default (1200px max) -->
<div class="grid-container">...</div>

<!-- Full width -->
<div class="grid-container fluid">...</div>

<!-- No padding -->
<div class="grid-container full">...</div>

<div class="grid-x">
  <div class="cell">Full width</div>
</div>

<div class="grid-x grid-margin-x">
  <div class="cell small-6">Half</div>
  <div class="cell small-6">Half</div>
</div>

<div class="grid-x grid-padding-x">
  <div class="cell small-4">Third</div>
  <div class="cell small-4">Third</div>
  <div class="cell small-4">Third</div>
</div>

<div class="grid-x grid-margin-x">
  <div class="cell small-12 medium-6 large-4">Responsive sizing</div>
  <div class="cell small-12 medium-6 large-8">Changes at breakpoints</div>
</div>

<!-- Auto width -->
<div class="cell auto">Auto</div>

<!-- Shrink to content -->
<div class="cell shrink">Shrink</div>

<!-- Offset -->
<div class="cell large-6 large-offset-3">Centered with offset</div>

<div class="grid-x small-up-2 medium-up-4 large-up-6">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
</div>

Equal-width cells at each breakpoint.

<div class="grid-y" style="height: 500px;">
  <div class="cell small-6">Top half</div>
  <div class="cell small-6">Bottom half</div>
</div>

<!-- Still supported (v5 style) -->
<div class="row">
  <div class="small-6 columns">Half</div>
  <div class="small-6 columns">Half</div>
</div>

<div class="cell small-12 medium-6 large-4">
  Stacks on small, half on medium, third on large
</div>

$breakpoints: (
  small: 0,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
);

<h1>Heading 1 (48px)</h1>
<h2>Heading 2 (40px)</h2>
<h3>Heading 3 (32px)</h3>
<h4>Heading 4 (25px)</h4>
<h5>Heading 5 (20px)</h5>
<h6>Heading 6 (16px)</h6>

<p class="lead">Lead paragraph (larger text)</p>

<p class="subheader">Subheader text (lighter)</p>

<p class="text-left">Left aligned</p>
<p class="text-right">Right aligned</p>
<p class="text-center">Center aligned</p>
<p class="text-justify">Justified text</p>

<ul class="no-bullet">
  <li>No bullets</li>
</ul>

<a href="#" class="button">Default</a>
<button class="button">Button Element</button>
<input type="submit" class="button" value="Submit" />

<a class="button tiny">Tiny</a>
<a class="button small">Small</a>
<a class="button">Default</a>
<a class="button large">Large</a>
<a class="button expanded">Full Width</a>

<a class="button primary">Primary</a>
<a class="button secondary">Secondary</a>
<a class="button success">Success</a>
<a class="button warning">Warning</a>
<a class="button alert">Alert</a>

<button class="hollow button">Hollow</button>
<button class="clear button">Clear</button>
<button class="button" disabled>Disabled</button>

<button class="dropdown button" data-toggle="dropdown">Dropdown Button</button>

<div class="button-group">
  <a class="button">One</a>
  <a class="button">Two</a>
  <a class="button">Three</a>
</div>

<div class="button-group expanded">
  <a class="button">Expanded</a>
  <a class="button">Group</a>
</div>

<label>
  Label Text
  <input type="text" placeholder="Placeholder" />
</label>

<label>
  Textarea
  <textarea rows="4"></textarea>
</label>

<label>
  Select
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</label>

<input id="checkbox1" type="checkbox" /> <label for="checkbox1">Checkbox</label>

<input id="radio1" name="group" type="radio" />
<label for="radio1">Radio Option 1</label>

<input id="radio2" name="group" type="radio" />
<label for="radio2">Radio Option 2</label>

<div class="input-group">
  <span class="input-group-label">$</span>
  <input class="input-group-field" type="number" />
</div>

<div class="input-group">
  <input class="input-group-field" type="text" />
  <div class="input-group-button">
    <input type="submit" class="button" value="Search" />
  </div>
</div>

<label>
  Password
  <input type="password" aria-describedby="passwordHelp" />
</label>
<p class="help-text" id="passwordHelp">Minimum 8 characters</p>

<label class="is-invalid-label">
  Error Field
  <input type="text" class="is-invalid-input" />
</label>
<span class="form-error is-visible"> This field is required. </span>

<div class="top-bar">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li><a href="#">Link</a></li>
      <li>
        <a href="#">Dropdown</a>
        <ul class="menu vertical">
          <li><a href="#">Submenu Item</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><input type="search" placeholder="Search" /></li>
      <li><button class="button">Search</button></li>
    </ul>
  </div>
</div>

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

<div class="top-bar" id="menu">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

<!-- Horizontal -->
<ul class="menu">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
</ul>

<!-- Vertical -->
<ul class="vertical menu">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
</ul>

<nav aria-label="You are here:">
  <ul class="breadcrumbs">
    <li><a href="#">Home</a></li>
    <li><a href="#">Features</a></li>
    <li class="disabled">Disabled</li>
    <li><span class="show-for-sr">Current:</span> Item</li>
  </ul>
</nav>

<ul class="pagination">
  <li class="pagination-previous disabled">Previous</li>
  <li class="current"><span class="show-for-sr">Current:</span> 1</li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li class="pagination-next"><a href="#">Next</a></li>
</ul>

<div class="callout">Default callout with neutral color</div>

<div class="callout primary">Primary</div>
<div class="callout secondary">Secondary</div>
<div class="callout success">Success</div>
<div class="callout warning">Warning</div>
<div class="callout alert">Alert</div>

<div class="callout" data-closable>
  <p>Closable callout content.</p>
  <button class="close-button" aria-label="Dismiss" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<div class="callout small">Small callout</div>
<div class="callout large">Large callout</div>

<div class="card">
  <div class="card-divider">Card Title</div>
  <div class="card-section">
    <p>Card content goes here.</p>
  </div>
</div>

<div class="card">
  <img src="assets/img/card.jpg" alt="Card image" />
  <div class="card-section">
    <h4>Image Card</h4>
    <p>Card with image on top.</p>
  </div>
</div>

<div class="card">
  <div class="grid-x grid-margin-x">
    <div class="cell medium-6">
      <img src="assets/img/card.jpg" alt="Card image" />
    </div>
    <div class="cell medium-6">
      <div class="card-section">
        <h4>Horizontal Card</h4>
        <p>Image on the side.</p>
      </div>
    </div>
  </div>
</div>

<ul class="accordion" data-accordion>
  <li class="accordion-item is-active" data-accordion-item>
    <a href="#" class="accordion-title">Accordion 1</a>
    <div class="accordion-content" data-tab-content>
      <p>Panel content 1</p>
    </div>
  </li>
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">Accordion 2</a>
    <div class="accordion-content" data-tab-content>
      <p>Panel content 2</p>
    </div>
  </li>
</ul>

<ul class="accordion" data-accordion data-multi-expand="true">
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">Item 1</a>
    <div class="accordion-content" data-tab-content>
      <p>Multiple items can be open.</p>
    </div>
  </li>
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">Item 2</a>
    <div class="accordion-content" data-tab-content>
      <p>At the same time.</p>
    </div>
  </li>
</ul>

<ul class="tabs" data-tabs id="example-tabs">
  <li class="tabs-title is-active">
    <a href="#panel1" aria-selected="true">Tab 1</a>
  </li>
  <li class="tabs-title">
    <a href="#panel2">Tab 2</a>
  </li>
  <li class="tabs-title">
    <a href="#panel3">Tab 3</a>
  </li>
</ul>

<div class="tabs-content" data-tabs-content="example-tabs">
  <div class="tabs-panel is-active" id="panel1">
    <p>Panel 1 content.</p>
  </div>
  <div class="tabs-panel" id="panel2">
    <p>Panel 2 content.</p>
  </div>
  <div class="tabs-panel" id="panel3">
    <p>Panel 3 content.</p>
  </div>
</div>

<div class="grid-x">
  <div class="cell medium-3">
    <ul class="tabs vertical" data-tabs id="v-tabs">
      <li class="tabs-title is-active"><a href="#v1">Tab 1</a></li>
      <li class="tabs-title"><a href="#v2">Tab 2</a></li>
    </ul>
  </div>
  <div class="cell medium-9">
    <div class="tabs-content vertical" data-tabs-content="v-tabs">
      <div class="tabs-panel is-active" id="v1">
        <p>Vertical panel 1.</p>
      </div>
      <div class="tabs-panel" id="v2">
        <p>Vertical panel 2.</p>
      </div>
    </div>
  </div>
</div>

<button class="button" data-open="exampleModal">Open Modal</button>

<div class="reveal" id="exampleModal" data-reveal>
  <h1>Modal Title</h1>
  <p>Modal content goes here.</p>
  <button
    class="close-button"
    data-close
    aria-label="Close modal"
    type="button"
  >
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<!-- Tiny -->
<div class="reveal tiny" id="tinyModal" data-reveal>
  <p>Tiny modal</p>
</div>

<!-- Small -->
<div class="reveal small" id="smallModal" data-reveal>
  <p>Small modal</p>
</div>

<!-- Large -->
<div class="reveal large" id="largeModal" data-reveal>
  <p>Large modal</p>
</div>

<!-- Full screen -->
<div class="reveal full" id="fullModal" data-reveal>
  <p>Full screen modal</p>
</div>

<div
  class="reveal"
  id="modal"
  data-reveal
  data-close-on-click="false"
  data-close-on-esc="false"
>
  <p>Can't close by clicking outside or Esc</p>
  <button class="close-button" data-close>&times;</button>
</div>

<span data-tooltip aria-haspopup="true" class="has-tip" title="Tooltip text">
  Hover over me
</span>

<span data-tooltip tabindex="2" title="Top tooltip" data-position="top">
  Top
</span>

<span class="badge">1</span>
<span class="badge primary">2</span>
<span class="badge secondary">3</span>
<span class="badge success">4</span>
<span class="badge warning">5</span>
<span class="badge alert">6</span>

<span class="label">Default</span>
<span class="label primary">Primary</span>
<span class="label success">Success</span>
<span class="label warning">Warning</span>
<span class="label alert">Alert</span>

<div
  class="progress"
  role="progressbar"
  aria-valuenow="50"
  aria-valuemin="0"
  aria-valuemax="100"
>
  <div class="progress-meter" style="width: 50%"></div>
</div>

<div class="progress success">
  <div class="progress-meter" style="width: 75%">
    <p class="progress-meter-text">75%</p>
  </div>
</div>

<table>
  <thead>
    <tr>
      <th>Header</th>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

<!-- Hover effect -->
<table class="hover">
  ...
</table>

<!-- Stack on small -->
<table class="stack">
  ...
</table>

<!-- Horizontal scroll -->
<table class="scroll">
  ...
</table>

<p class="show-for-small-only">Small only</p>
<p class="show-for-medium">Medium and up</p>
<p class="show-for-medium-only">Medium only</p>
<p class="show-for-large">Large and up</p>
<p class="show-for-large-only">Large only</p>

<p class="hide-for-small-only">Hide on small</p>
<p class="hide-for-medium">Hide on medium+</p>
<p class="hide-for-medium-only">Hide on medium</p>
<p class="hide-for-large">Hide on large+</p>
<p class="hide-for-large-only">Hide on large</p>

<p class="show-for-sr">Screen reader only text</p>

<p class="show-for-landscape">Landscape</p>
<p class="show-for-portrait">Portrait</p>

<p class="hide">display: none</p>
<p class="invisible">visibility: hidden</p>

<div class="float-left">Float left</div>
<div class="float-right">Float right</div>
<div class="float-center">Float center (block)</div>

<div class="clearfix">
  <div class="float-left">Floated</div>
  <div class="float-right">Floated</div>
</div>

<div class="flex-container">
  <div class="flex-child-auto">Auto</div>
  <div class="flex-child-shrink">Shrink</div>
</div>

<div class="flex-container align-right">
  <div>Right aligned</div>
</div>

<div class="flex-container align-center">
  <div>Center aligned</div>
</div>

<div class="flex-container align-justify">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<div class="flex-container align-spaced">
  <div>Spaced</div>
  <div>Items</div>
</div>

<div class="flex-dir-row">Row</div>
<div class="flex-dir-column">Column</div>

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

// Re-initialize specific plugin
Foundation.reInit("dropdown");

// Create plugin instance
var modal = new Foundation.Reveal($("#myModal"));

// Access plugin methods
modal.open();
modal.close();

// Listen to plugin events
$("#myModal").on("open.zf.reveal", function () {
  console.log("Modal opened");
});

$("#myModal").on("closed.zf.reveal", function () {
  console.log("Modal closed");
});

// Destroy plugin instance
$("#myModal").foundation("_destroy");

$global-width: 1200px;
$grid-columns: 12;
$global-font-size: 100%;
$global-lineheight: 1.5;

$foundation-palette: (
  primary: #1779ba,
  secondary: #767676,
  success: #3adb76,
  warning: #ffae00,
  alert: #cc4b37,
);

$breakpoints: (
  small: 0,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
);

$body-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
$header-font-family: $body-font-family;
$header-sizes: (
  small: (
    "h1": 24,
    "h2": 20,
    "h3": 19,
    "h4": 18,
    "h5": 17,
    "h6": 16,
  ),
  medium: (
    "h1": 48,
    "h2": 40,
    "h3": 31,
    "h4": 25,
    "h5": 20,
    "h6": 16,
  ),
);

// Import only what you need
@import "foundation-sites/scss/foundation";

@include foundation-global-styles;
@include foundation-grid;
@include foundation-typography;
@include foundation-button;
@include foundation-forms;
@include foundation-visibility-classes;
@include foundation-float-classes;
@include foundation-accordion;
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-button-group;
@include foundation-callout;
@include foundation-card;
@include foundation-close-button;
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;
@include foundation-responsive-embed;
@include foundation-label;
@include foundation-media-object;
@include foundation-off-canvas;
@include foundation-orbit;
@include foundation-pagination;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-sticky;
@include foundation-reveal;
@include foundation-switch;
@include foundation-table;
@include foundation-tabs;
@include foundation-thumbnail;
@include foundation-title-bar;
@include foundation-tooltip;
@include foundation-top-bar;

Foundation 6.4+ uses XY Grid (.grid-x/.cell) by default. Old tutorials using .row/.columns are the legacy Float Grid system.

<!-- ✅ Modern XY Grid -->
<div class="grid-x">
  <div class="cell small-6">Cell</div>
</div>

<!-- ❌ Legacy Float Grid -->
<div class="row">
  <div class="small-6 columns">Column</div>
</div>

Foundation's JavaScript components require jQuery to be loaded first.

<!-- ✅ Correct order -->
<script src="jquery.min.js"></script>
<script src="foundation.min.js"></script>
<script>
  $(document).foundation();
</script>

<!-- ❌ Wrong order -->
<script src="foundation.min.js"></script>
<script src="jquery.min.js"></script>

JavaScript components need data- attributes to work.

<!-- ✅ Works -->
<div class="reveal" data-reveal id="modal">...</div>

<!-- ❌ Doesn't work -->
<div class="reveal" id="modal">...</div>

Using .grid-container.full with .grid-margin-x can cause horizontal scrollbar.

<!-- ❌ Causes overflow -->
<div class="grid-container full">
  <div class="grid-x grid-margin-x">...</div>
</div>

<!-- ✅ Fix with overflow -->
<div class="grid-container full" style="overflow-x: hidden;">
  <div class="grid-x grid-margin-x">...</div>
</div>

Don't skip aria-* attributes—Foundation examples include them for good reason.

<!-- ✅ Accessible -->
<button class="close-button" data-close aria-label="Close modal">
  <span aria-hidden="true">&times;</span>
</button>

<!-- ❌ Not accessible -->
<button class="close-button" data-close>&times;</button>

CDN includes all components. With npm, you must import only what you need in Sass.

// ✅ Selective import (smaller file size)
@import "foundation-sites/scss/foundation";
@include foundation-grid;
@include foundation-button;

// ❌ Importing everything (large file)
@import "foundation-sites/scss/foundation";
@include foundation-everything;