ZURB Foundation Technology Intelligence

What is ZURB Foundation?

Foundation is a responsive front-end framework created by ZURB, a product design company. First released in 2011, Foundation provides a flexible grid system, UI components, and JavaScript plugins for building responsive websites and web applications.

Foundation is known for its mobile-first approach and semantic HTML. Unlike Bootstrap's opinionated styling, Foundation provides more neutral defaults, giving designers greater creative freedom. It's available in two versions: Foundation for Sites and Foundation for Emails.

Major organizations including Facebook, eBay, Mozilla, and National Geographic have used Foundation. The framework emphasizes accessibility, customization through Sass, and a modular architecture that allows developers to include only needed components.

Foundation Features

XY Grid: Flexbox-based grid system. Horizontal and vertical grids. Auto-sizing columns. Responsive breakpoints.

Components: Accordion, tabs, modals, tooltips. Off-canvas navigation. Responsive embeds. Sticky elements.

Motion UI: Sass library for animations. Transition effects. Built-in animation classes. Customizable timing.

Sass Architecture: Modular Sass files. Variable customization. Mixin library. Component-level imports.

Foundation for Emails: Responsive email templates. Inky templating language. Email-safe CSS. Major client support.

Accessibility: ARIA landmarks. Keyboard navigation. Screen reader support. WCAG compliance focus.

Foundation Use Cases

Custom Designs: Unique brand implementations. Designer-developer collaboration. Non-generic aesthetics. Creative projects.

Responsive Emails: Marketing email campaigns. Transactional emails. Newsletter templates. Cross-client compatibility.

Enterprise Apps: Internal applications. Data-heavy interfaces. Complex layouts. Accessible applications.

Prototyping: Rapid UI prototyping. Client presentations. Concept validation. Design exploration.

Web Applications: Single-page applications. Dashboard interfaces. Form-heavy applications. Interactive tools.

Agency Work: Client websites. Varied design requirements. Flexible starting point. Quick customization.

Foundation Code Examples

Grid and Components

<!-- Foundation CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css">

<!-- XY Grid -->
<div class="grid-container">
  <div class="grid-x grid-padding-x">
    <div class="cell small-12 medium-6 large-4">Column 1</div>
    <div class="cell small-12 medium-6 large-4">Column 2</div>
    <div class="cell small-12 medium-12 large-4">Column 3</div>
  </div>
</div>

<!-- Responsive Navigation -->
<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="menu">
      <li class="menu-text">Site Title</li>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </div>
</div>

<!-- Reveal Modal -->
<button class="button" data-open="exampleModal">Open Modal</button>
<div class="reveal" id="exampleModal" data-reveal>
  <h1>Modal Title</h1>
  <p>Modal content...</p>
  <button class="close-button" data-close aria-label="Close">×</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js"></script>
<script>$(document).foundation();</script>

Foundation Benefits

Flexibility: Minimal default styling. Design freedom. Easier customization. Brand-friendly.

Mobile-First: True mobile-first approach. Progressive enhancement. Responsive by default. Touch-friendly.

Accessibility: ARIA support built-in. Keyboard navigation. Screen reader tested. Inclusive design.

Sass Power: Extensive variable system. Mixin library. Component customization. Modular imports.

Email Support: Dedicated email framework. Responsive email templates. Client compatibility. Time savings.

Documentation: Comprehensive docs. Code examples. Building blocks library. Community resources.

Semantic HTML: Clean markup. Meaningful class names. BEM-compatible. Maintainable code.