How to Tell If a Website Uses Foundation

Foundation, created by Zurb, is a responsive front-end framework that was one of Bootstrap's main rivals for years. It provides a grid, UI components and JavaScript plugins, and it leaves a recognisable footprint of grid classes and data-* attributes. To tell whether a site uses it, inspect the layout for Foundation's grid classes (grid-x/cell or row/columns) and its data-* component attributes. This guide covers every reliable signal, the versioned grid systems, the look-alikes to rule out, and what a Foundation build tells you about the site.

What is Foundation?

Foundation, first released by Zurb in 2011, is an open-source responsive front-end framework offering a flexible grid, a comprehensive set of UI components (navigation, modals, sliders, accordions, callouts) and JavaScript plugins to power them. It positioned itself as a more flexible, "advanced" alternative to Bootstrap, popular with agencies and enterprises building responsive marketing sites and applications. Zurb also produced Foundation for Emails (formerly Ink), a separate framework for building responsive HTML emails, which is a distinct but related detection target. Foundation is now community-maintained and considerably less common than in its mid-2010s heyday, so it frequently turns up on established sites built some years ago.

For detection, the key context is that Foundation is a CSS-and-JS framework whose footprint includes both its grid/component classes and its JavaScript initialisation (historically jQuery-dependent). Its presence often signals a site of a certain vintage — built when Foundation was a leading choice — which makes it useful intelligence for spotting sites that may be due a refresh. The grid system also reveals the version: the modern XY grid versus the legacy float/flex grid.

How Foundation renders and initialises

Foundation's grid is the most telling structural signal, and it changed between major versions. Foundation 6 introduced the XY grid: containers and rows use grid-x, grid-y and grid-container, with children as cell (sized like cell small-6 medium-4). Foundation 5 and earlier used a float-then-flex grid with row and columns (sized like small-6 columns, medium-4 columns). Either way, the grid classes are distinctive.

Foundation's components carry semantic classes — callout, top-bar, orbit (slider), reveal (modal), accordion, tabs, button, menu — and, crucially, are wired up with data-* attributes: data-toggle, data-reveal, data-orbit, data-sticky, data-dropdown, data-accordion, data-magellan and more. The JavaScript is delivered as foundation.js/foundation.min.js (and the CSS as foundation.css/foundation.min.css), and it is initialised with a call like $(document).foundation() — which in older versions depends on jQuery. So a Foundation site often shows jQuery plus the foundation.js file plus data-* attributes. Knowing this — the grid classes (grid-x/cell or row/columns), the data-* component attributes, and the foundation.* files — makes detection reliable and version-aware.

How to tell if a website uses Foundation

Confirm at least two of the following.

1. Inspect the grid. Look for grid-x/grid-container/cell (Foundation 6) or row/columns with small-/medium-/large- sizing (Foundation 5 and earlier).

2. Look for data- component attributes.* Attributes like data-reveal, data-orbit, data-toggle and data-sticky are characteristic of Foundation's JS components.

3. Check the files. In the Network tab or source, look for foundation.css/foundation.min.css and foundation.js/foundation.min.js.

4. Note component classes. callout, top-bar, orbit and reveal corroborate Foundation.

5. Check for jQuery. Older Foundation depends on jQuery and initialises with $(document).foundation(); jQuery plus the Foundation signals is a common pairing.

What the Foundation signals look like

<link rel="stylesheet" href="/css/foundation.min.css">
<div class="grid-x grid-margin-x"><div class="cell small-6 medium-4">…</div></div>   <!-- Foundation 6 -->
<div class="row"><div class="small-6 columns">…</div></div>                          <!-- Foundation 5 -->
<div class="reveal" data-reveal>…</div>
<script src="/js/foundation.min.js"></script>  <!-- often after jQuery; $(document).foundation() -->

The combination of Foundation's grid classes, data-* component attributes, and the foundation.* files is conclusive.

Foundation versus other frameworks — avoiding false positives

Match the grid and class vocabulary to keep frameworks distinct. Foundation uses grid-x/cell or row/columns and data-* component attributes; Bootstrap uses container/row/col and data-bs-* attributes (note the bs namespace in Bootstrap 5) with btn/navbar classes; Bulma uses columns/column and is-/has- modifiers with no JS; Tailwind uses utility classes. A subtle trap: both Foundation (≤5) and Bulma use columns, but Foundation pairs it with row and small-/medium- sizing and data-* attributes, while Bulma uses column (singular) with is- modifiers and no JS — so check the surrounding classes and the data attributes. The foundation.* files and the data-reveal/data-orbit attributes are the clearest Foundation-specific signals.

How reliable is each Foundation signal?

The foundation.css/foundation.js files are definitive, as are the Foundation-specific data-* attributes (data-reveal, data-orbit) combined with the grid classes. The XY grid (grid-x/cell) or the legacy row/columns with small-/medium- sizing strongly indicates Foundation and reveals the version. The presence of jQuery plus $(document).foundation() corroborates older versions. The weakest situation is a heavily customised build that renames classes or self-hosts unbranded files — there, the data-* attributes and grid sizing carry the proof. As a rule, the foundation.* files or the data-reveal-style attributes plus the grid confirm Foundation.

What a Foundation build reveals about a site

Finding Foundation signals a responsive site built with an established, enterprise-friendly framework, frequently some years ago when Foundation was a leading Bootstrap alternative. Its presence often indicates a site of a certain vintage — useful intelligence, since such sites are common candidates for a refresh or a migration to a modern stack. Foundation was popular with agencies and enterprises, so it can hint at a site originally built by a professional team. If you also detect Foundation for Emails markup in an HTML email, that points to a marketing team using Foundation's email framework. If you sell web design, modernisation, performance or framework-migration services, a Foundation site — especially an older Foundation 5 build with jQuery — flags a prospect that may be due an upgrade. The version (XY grid v6 versus legacy v5) indicates how current the build is.

What finding Foundation means for sales, agencies and competitive research

For sales and prospecting, Foundation often marks an established, possibly ageing responsive site — a candidate for modernisation, redesign or framework migration, especially when paired with jQuery and the legacy grid.

For agencies and consultants, finding Foundation tells you the client built on a professional framework that may now be dated, opening conversations about a refresh, a move to a modern component system, or performance improvements (dropping jQuery and legacy JS).

For competitive and market research, Foundation adoption indicates a competitor's site vintage and framework heritage. Spotting it (versus a modern framework) suggests an older build, useful when benchmarking technical currency and identifying who has modernised.

Foundation in the wider stack

Foundation sits in the front-end layer and, in older builds, brings jQuery along for its JavaScript components. It typically accompanies a conventional server-rendered site or CMS (it was popular with WordPress themes and custom builds), standard analytics, and a build pipeline that may itself be dated. The version is the key indicator: a Foundation 6 XY-grid site is more current than a Foundation 5 row/columns site with jQuery. Foundation for Emails, if present, points to a separate email-production workflow. For an auditor, the valuable details are the Foundation version (XY grid versus legacy), whether jQuery accompanies it, the host CMS or platform, and whether the overall stack looks current or dated; together these reveal the site's vintage and whether it is a modernisation candidate.

A quick Foundation confirmation walkthrough

Open the site with developer tools on the Elements panel and inspect the layout. Look for grid-x/cell (Foundation 6) or row/columns with small-/medium- sizing (Foundation 5), and scan for data-* attributes like data-reveal or data-orbit on components. Switch to the Network tab or source and look for foundation.css/foundation.min.css and foundation.js/foundation.min.js; check whether jQuery loads alongside. Note component classes like callout, top-bar or orbit. The foundation.* files or the Foundation-specific data-* attributes plus the grid are enough to confirm Foundation and its version.

A quick Foundation detection checklist

• Inspect the grid for grid-x/cell (v6) or row/columns + small-/medium- (v5).
• Look for Foundation data-* attributes (data-reveal, data-orbit, data-toggle).
• Check the Network tab/source for foundation.css/foundation.js files.
• Note component classes (callout, top-bar, orbit) as corroboration.
• Check whether jQuery accompanies it (older versions) and for $(document).foundation().
• Distinguish Foundation from Bulma (is-/has-, no JS) and Bootstrap (data-bs-*).

Detecting Foundation at scale

Checking one site is quick, but mapping framework adoption across many domains — to find ageing sites ripe for modernisation — calls for automation. StackOptic detects Foundation, its version family where exposed, and thousands of other technologies from a real browser. For related reading, see our guides to telling if a website uses Bootstrap and Tailwind CSS, and the full Foundation technology profile.