ZURB Foundation

Overview

ZURB Foundation is an open-source frontend framework developed by ZURB, a product design company founded in 1998. It provides a collection of responsive HTML, CSS, and JavaScript components designed to streamline the development of websites and email templates. Foundation emphasizes a mobile-first design philosophy, ensuring that layouts and components adapt effectively across a range of devices, from mobile phones to larger desktop screens. The framework is structured to promote semantic HTML markup, which can contribute to better accessibility and maintainability of web projects.

Foundation is primarily known for two distinct products: Foundation for Sites and Foundation for Emails. Foundation for Sites offers a comprehensive suite of UI components, including a responsive grid system, navigation patterns, form elements, and interactive JavaScript plugins like accordions, off-canvas menus, and reveal modals. These components are built with a focus on customization, allowing developers to integrate them into projects that require specific branding or design systems. The framework supports both Sass (Syntactically Awesome Style Sheets) and plain CSS for styling, providing flexibility for different development workflows. Developers can either use the pre-compiled CSS or customize the framework variables via Sass to generate a tailored stylesheet.

Foundation for Emails, on the other hand, is specifically engineered to address the challenges of rendering HTML emails consistently across various email clients. It provides a responsive grid, pre-built components for common email layouts, and utilities to help ensure emails display correctly in environments that often have limited CSS support. This specialization makes it a tool for marketing and transactional email development, where cross-client compatibility is critical. The framework's documentation provides specific guidelines and best practices for crafting reliable HTML emails.

Foundation is suitable for developers and teams focused on rapid prototyping and building projects that require a robust, semantic approach to responsive design. Its component-based architecture and extensive documentation for JavaScript plugin usage support efficient development cycles. While it provides a comprehensive set of tools, its opinionated structure may be more appealing to projects that benefit from a predefined component library rather than a utility-first CSS approach, such as that offered by alternatives like Tailwind CSS.

Key features

• Responsive Grid System: A flexible, mobile-first grid that enables adaptive layouts for various screen sizes, supporting both fixed and fluid column structures.
• Semantic HTML: Encourages the use of meaningful HTML tags for improved accessibility and maintainability of web content.
• UI Components: Includes pre-designed and functional components such as navigation bars, buttons, forms, accordions, tabs, and modals, ready for integration into web projects.
• JavaScript Plugins: Interactive elements like Off-canvas menus, Reveal modals, Toggler, and Dropdowns are implemented with JavaScript, providing dynamic user experiences.
• Sass Customization: Built with Sass, allowing developers to easily customize variables, colors, typography, and component styles to match project requirements without modifying core framework files.
• Email Framework: Foundation for Emails provides specific tools and components for building responsive HTML emails that render consistently across diverse email clients.
• Accessibility Focus: Designed with accessibility considerations, offering semantic markup and ARIA attributes where appropriate to support users with assistive technologies. The ARIA specification provides details on how to improve accessibility for web content and applications.
• CLI Tools: Provides command-line interface tools for project setup, compilation, and development workflow management.

Pricing

ZURB Foundation is distributed under the MIT license, making it free and open-source for both personal and commercial use. There are no licensing fees or hidden costs associated with using the framework.

Pricing as of May 7, 2026. For the most current information, refer to the official Foundation documentation.

Common integrations

• Sass: Foundation is built with Sass, allowing developers to integrate it seamlessly into projects that use Sass for CSS preprocessing. This enables extensive customization of the framework's styles.
• Webpack/Vite: Developers commonly integrate Foundation into build pipelines managed by tools like Webpack or Vite for bundling assets, compiling Sass, and optimizing JavaScript. The Vite documentation offers a guide for setting up a modern web project.
• jQuery: Many of Foundation's JavaScript components have a dependency on jQuery for DOM manipulation and event handling. Projects integrating Foundation often include jQuery as part of their frontend stack.
• NPM/Yarn: Foundation can be installed and managed as a package dependency using Node Package Manager (NPM) or Yarn, facilitating version control and project setup. Instructions for installing Foundation via npm are available.
• Modern JavaScript Frameworks: While Foundation's JavaScript components are jQuery-based, its CSS framework can be used independently with modern JavaScript frameworks like React, Vue, or Svelte for styling purposes.

Alternatives

• Bootstrap: A popular, comprehensive frontend framework offering a responsive grid, extensive UI components, and JavaScript plugins.
• Tailwind CSS: A utility-first CSS framework that provides low-level utility classes for building custom designs directly in markup, rather than predefined components.
• Bulma: A lightweight, modular CSS framework based on Flexbox, known for its clear documentation and easy-to-understand syntax.
• MUI (formerly Material-UI): A React component library implementing Google's Material Design, offering a vast collection of pre-built UI components.
• Chakra UI: A simple, modular, and accessible component library for React applications, providing a customizable set of building blocks.

Getting started

To begin using ZURB Foundation, you can install it via npm and then include its CSS and JavaScript files in your project. Here’s a basic example to set up a new project and use a simple Foundation component like a button:

# Create a new project directory
mkdir my-foundation-project
cd my-foundation-project

# Initialize npm and install Foundation
npm init -y
npm install foundation-sites jquery --save-dev

Next, create an index.html file with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation Hello World</title>
    <!-- Include Foundation CSS -->
    <link rel="stylesheet" href="node_modules/foundation-sites/dist/css/foundation.min.css">
</head>
<body>
    <div class="grid-container">
        <div class="grid-x grid-padding-x">
            <div class="large-12 cell">
                <h1>Hello, Foundation!</h1>
                <button type="button" class="button primary">Click Me</button>
                <button type="button" class="button secondary expanded">Expanded Button</button>
            </div>
        </div>
    </div>

    <!-- Include jQuery and Foundation JavaScript -->
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/foundation-sites/dist/js/foundation.min.js"></script>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

This example demonstrates how to link the compiled Foundation CSS and JavaScript files directly from the node_modules directory. The $(document).foundation(); call initializes all Foundation JavaScript plugins on the page. For more advanced setups, such as customizing Foundation with Sass or integrating it into a build system like Gulp or Webpack, consult the Foundation installation documentation.