Foundation

What Is Foundation?

Foundation is a responsive front-end CSS framework, originally created by the design agency ZURB, that gives developers a mobile-first grid, a library of pre-styled components, and a set of JavaScript plugins for building websites and applications. The short answer for anyone asking what Foundation is: it is one of the original "big two" responsive frameworks alongside Bootstrap, long positioned as the more flexible, semantic, and design-forward alternative for teams that wanted control rather than convention. It is still detected on a meaningful number of sites today, though its share has declined as utility-first and component-driven approaches have grown.

Foundation first appeared in 2011, the same era that produced Bootstrap, and the two frameworks defined how a generation of websites approached responsive design. ZURB built Foundation to power its own client work, which is part of why the framework leaned toward semantic markup, accessibility, and customization rather than a fixed visual identity. A precise, current market-share figure is hard to state with confidence because adoption has been trending down for years and detection surveys differ in methodology, so any single percentage should be read cautiously. What technology-detection sources such as Wappalyzer and BuiltWith consistently report is that Foundation usage is concentrated in sites built during the 2012-2018 period and in organizations that standardized on it, while new greenfield projects more often reach for Tailwind, Bootstrap, or a component library.

Foundation ships in more than one flavor. Foundation for Sites is the general web framework most people mean when they say "Foundation," while Foundation for Emails (formerly Ink) is a separate framework for building responsive HTML emails that render across notoriously inconsistent email clients. Recognizing which variant a project uses matters when you audit a site, because the email framework leaves very different fingerprints from the web framework.

How Foundation Works

Foundation is built around three pillars: a responsive grid, a component library, and an optional JavaScript layer, all designed to be customized through Sass rather than overridden after the fact.

The grid is Foundation's structural backbone. Modern versions ship the XY Grid, a Flexbox-based system that arranges content into rows and cells and, unusually, supports both horizontal and vertical layout. You declare a container with grid-x (or grid-y for vertical), place children with cell, and size them with classes like small-6, medium-4, or large-3 that map to Foundation's breakpoints. Earlier versions used a float-based 12-column grid with classes such as row and columns, so the exact grid classes on a page also hint at which Foundation version it is. Gutters, alignment, source ordering, and offsets are all handled through additional grid classes.

The component library provides ready-made interface elements styled with Foundation's default theme: buttons and button groups, callouts, cards, the top bar and responsive navigation, menus, accordions, tabs, dropdowns, reveal modals, tooltips, badges, labels, breadcrumbs, pagination, and form controls. Components are styled through Sass and intended to be themed to match a brand rather than used as-is.

The JavaScript layer powers interactive components. Historically Foundation's plugins depended on jQuery, and many production sites still load jQuery alongside foundation.js. Components are wired up declaratively through data-* attributes: you mark an element with data-accordion, data-reveal, data-tabs, data-dropdown, data-toggler, data-sticky, or data-responsive-toggle, and Foundation's JavaScript initializes the behavior. Initialization typically happens with a single call such as $(document).foundation();, which scans the DOM for those attributes and activates the matching plugins.

The customization story is central to how Foundation is meant to be used. The framework is authored in Sass, and a settings file (often _settings.scss) exposes hundreds of variables controlling colors, spacing, breakpoints, typography, and component styling. Teams import only the components they need and compile a tailored stylesheet, which is why a heavily customized Foundation site can be hard to recognize visually even when the underlying class names give it away. A typical Foundation build therefore involves choosing components, setting Sass variables, compiling to a single CSS file, and including the JavaScript plugins the site actually uses.

How to Tell if a Website Uses Foundation

Foundation leaves fairly clear fingerprints in markup, stylesheets, and the network, especially through its distinctive class names and data-* attributes.

Signals in the page and network

• Stylesheet and script filenames. In View Source or the Network tab, look for foundation.css, foundation.min.css, foundation.js, and foundation.min.js. These are the canonical filenames the framework ships.
• CDN paths. Foundation is frequently served from CDNs, so watch for paths such as cdn.jsdelivr.net/npm/foundation-sites, cdnjs.cloudflare.com/ajax/libs/foundation/, or older foundation.zurb.com references.
• Grid class patterns. The presence of grid-x, grid-y, and cell (modern XY Grid) or row plus columns with sizing classes like small-12 medium-6 large-4 is a strong structural signal.
• Component class names. Foundation-specific classes such as callout, button combined with size and color modifiers, top-bar, reveal, orbit, accordion, menu, and is-active commonly appear together.
• data-* component attributes. Attributes like data-accordion, data-reveal, data-tabs, data-dropdown, data-toggler, data-sticky, and data-responsive-toggle are distinctive to Foundation's JavaScript plugins.
• Paired jQuery and the Foundation global. Classic Foundation loads jQuery, and in the DevTools Console typing Foundation often returns an object with a version property; Foundation.version can confirm the exact release.

Tools to confirm it

Tool	What you do	What it reveals
View Source	Open the page source in your browser	foundation.min.css / foundation.min.js tags and CDN paths
DevTools Elements	Inspect layout containers and components	grid-x/cell or row/columns classes and data-* component attributes
DevTools Console	Type Foundation and Foundation.version	Confirms the global exists and prints the version
DevTools Network	Filter requests by foundation	Shows the CSS and JS files loading from a CDN or local path
Wappalyzer	Run the browser extension on the page	Flags Foundation in the UI frameworks category
BuiltWith	Enter the domain on the BuiltWith site	Reports current and historical Foundation detection

If you want a structured walkthrough, our guide on how to tell if a website uses Bootstrap covers the same investigative method (it applies almost identically to Foundation), and our guide on how to find what fonts and colors a website uses helps you confirm whether a site is running Foundation's defaults or a heavily customized theme. For the JavaScript side, see how to check what JavaScript libraries a website uses.

Key Features

Foundation's feature set reflects its design-agency origins and its emphasis on flexibility over a fixed look.

• XY Grid. A Flexbox grid supporting both horizontal (grid-x) and vertical (grid-y) layouts, with cells, gutters, alignment, offsets, and source ordering.
• Mobile-first responsive breakpoints. Small, medium, large, and larger breakpoints drive responsive sizing and visibility classes.
• Component library. Buttons, callouts, cards, top bar and responsive navigation, accordions, tabs, dropdowns, reveal modals, tooltips, and more.
• data-* driven JavaScript plugins. Declarative initialization of interactive components through attributes, activated with a single foundation() call.
• Deep Sass customization. A settings file with hundreds of variables and modular imports so teams ship only what they use.
• Accessibility focus. ARIA attributes, keyboard interaction, and accessibility documentation built into many components.
• Foundation for Emails. A separate framework for responsive HTML email that survives inconsistent email-client rendering.
• Flexible, un-opinionated styling. Lighter default visual identity than some frameworks, intended to be themed rather than used raw.

Three of these deserve emphasis. The XY Grid's vertical mode is genuinely distinctive; few CSS frameworks treat vertical layout as a first-class grid concern, which makes grid-y a useful detection tell. Foundation for Emails addresses a problem most web frameworks ignore entirely, and it remains one of the strongest reasons organizations keep Foundation in their toolkit even when their main site has moved on. And Foundation's customization-first philosophy means the framework is often invisible to the eye but obvious in the markup, which is exactly why class-name and attribute detection matters more here than visual recognition.

Pros and Cons

Foundation's trade-offs flow from its flexibility, its maturity, and its declining momentum.

Pros

• Highly customizable through Sass, with a lighter default look that is easy to brand.
• Powerful, flexible grid including the unusual vertical (grid-y) layout option.
• Strong, long-standing attention to accessibility and semantic markup.
• The Foundation for Emails variant solves responsive HTML email, a problem few frameworks address.
• Mature, stable, and well documented after many years in production.

Cons

• Steeper learning curve than more opinionated frameworks; more decisions left to the developer.
• Historically depends on jQuery for its JavaScript components, a dependency modern stacks avoid.
• Smaller community and slower momentum than Bootstrap, and far less buzz than Tailwind.
• Class names and grid systems changed across major versions, which can complicate upgrades.
• Fewer third-party themes and templates than the most popular alternatives.

Foundation vs Alternatives

Foundation competes mainly with other CSS frameworks. The table frames where it sits relative to its long-time rival and to newer approaches.

Framework	Approach	JavaScript dependency	Default styling	Best for
Foundation	Component + grid, Sass-customizable	jQuery (classic plugins)	Light, meant to be themed	Custom, accessible, semantic builds
Bootstrap	Component + grid, Sass-customizable	Vanilla JS (v5+)	Recognizable, opinionated	Fast, conventional sites
Tailwind CSS	Utility-first	None (CSS only)	None (you compose it)	Bespoke designs, design systems
Bulma	Component + grid, CSS only	None	Modern, opinionated	CSS-only projects, no JS coupling

The most instructive comparison is Foundation versus Bootstrap, since the two grew up together and were direct competitors. Bootstrap optimized for convention and speed: a recognizable default look, an enormous ecosystem of templates, and (since version 5) a dependency-free JavaScript layer. Foundation optimized for flexibility: lighter defaults intended for theming, a strong accessibility track record, and the unique Foundation for Emails variant. In practice Bootstrap won the popularity contest by a wide margin, which is why it has more themes, more tutorials, and more developer familiarity. Foundation's enduring appeal is for teams that specifically value its semantic, accessible, customization-first philosophy or that rely on its email framework. Against the newer wave, Tailwind CSS represents a different paradigm entirely, replacing pre-built components with composable utilities, while Bulma offers a modern, JavaScript-free take on the same component-and-grid model Foundation pioneered.

If you are auditing a site and need to distinguish Foundation from its closest rival, our profile of Bootstrap lays out that framework's signatures side by side.

Use Cases

Foundation fits a recognizable set of scenarios, many rooted in the responsive-framework era and in organizations with specific requirements.

• Custom, brand-driven websites. Teams that wanted a responsive foundation without inheriting a strong default visual identity.
• Accessibility-conscious projects. Sites where Foundation's ARIA support and semantic markup were a deciding factor.
• Responsive HTML email. Marketing and transactional email built with Foundation for Emails to survive inconsistent email clients.
• Agency and client work. Projects (including ZURB's own) where rapid, themeable layouts were valuable across many client brands.
• Legacy maintenance and modernization. Existing Foundation applications kept running or migrated toward Tailwind, Bootstrap, or component libraries.

For competitive research and lead generation, detecting Foundation is a useful signal about a site's era and engineering philosophy. It often indicates a build from the mid-2010s, an organization that valued customization and accessibility, or a marketing team that relies on Foundation for Emails, each of which can inform how you position modernization or design services.

Frequently Asked Questions

Is Foundation still maintained?

Foundation is best described as mature and stable rather than rapidly evolving. After ZURB's stewardship, the project moved to community maintenance, and while it still works and receives housekeeping, the pace of major new development has slowed considerably. For existing sites it remains dependable; for brand-new projects, many teams now choose Tailwind, Bootstrap, or a component library instead. Always confirm the current status from the official Foundation project before planning a long-term commitment.

What is the difference between Foundation for Sites and Foundation for Emails?

Foundation for Sites is the general web framework, providing the responsive grid, components, and JavaScript plugins you use to build websites and applications. Foundation for Emails is a separate framework specifically for building responsive HTML emails that render consistently across email clients like Outlook, Gmail, and Apple Mail. They share a name and design heritage but solve different problems and leave different fingerprints, so a site might use one, the other, or both.

How can I tell which version of Foundation a site uses?

Two quick checks help. In the DevTools Console, type Foundation.version, which returns the exact release string if the JavaScript is loaded. In the markup, the grid classes are a strong clue: grid-x and cell indicate the modern XY Grid (Foundation 6.4 and later), whereas row and columns indicate an earlier float-based or pre-XY grid. CDN URLs in View Source also frequently embed the version number directly in the path.

Does Foundation require jQuery?

Foundation's classic JavaScript components were built on jQuery, and many production sites still load jQuery alongside foundation.js. If you only use Foundation's CSS, the grid and component styles work without any JavaScript at all. The interactive plugins (reveal modals, accordions, tabs, dropdowns, and similar) are where the jQuery dependency historically applied, so a CSS-only Foundation site will not necessarily load jQuery.

Is Foundation a good choice for a new project today?

It can be, particularly if you value its accessibility focus, its highly customizable Sass architecture, or its email framework. That said, the wider ecosystem momentum has shifted: Tailwind CSS dominates new design-system work, and Bootstrap retains the largest community of pre-built components and templates. For most new projects, those alternatives offer more learning resources and third-party support. Foundation remains a strong fit for teams with specific accessibility, theming, or email requirements.

Want to identify the CSS frameworks, libraries, and full technology stack behind any website instantly? Try StackOptic at https://stackoptic.com.