HowToCodePage

Components and utilities

Wire up the JavaScript plugins, know which components are CSS-only, and use the visibility and flex helpers instead of hand-written media queries.

Enabling the JavaScript plugins

Components such as Reveal, Orbit, Tabs, Accordion and Off-canvas are markup plus a plugin. Older builds of Foundation required jQuery and a single document-level initializer; Foundation 6.5 and later also ship a build that works without it.

// classic build: initialize every plugin found in the current DOM
$(document).foundation();

// or construct one plugin explicitly, with options
var modal = new Foundation.Reveal($('#terms-modal'), {
  showDelay: 0,
  closeOnClick: false
});
modal.open();
<button class="button" data-open="terms-modal">Terms</button>

<div class="reveal" id="terms-modal" data-reveal aria-labelledby="terms-title">
  <h2 id="terms-title">Terms of use</h2>
  <p>Plain markup: the plugin supplies focus trapping and Escape handling.</p>
  <button class="close-button" data-close type="button">&times;</button>
</div>
⚠️
Markup injected after the initializer ran stays inert — a row of tabs rendered later will not respond. Re-run the document-level initializer, or construct that plugin after inserting the element.

CSS-only versus JS-driven

ComponentMarkupPlugin needed
Buttons, labels, badges, cardsclass onlyno
Callouts, breadcrumbs, pagination, menusclass onlyno
Forms and Abide validationclass + attributesyes for live validation
Tabs, Accordion, Dropdownclass + data attributesyes
Reveal (modal), Off-canvasclass + data attributesyes
Orbit (carousel), Tooltip, Stickyclass + data attributesyes
  • Read the markup contract before styling: most plugins rely on data-* attributes and a specific parent/child structure.
  • Interactive plugins ship documented aria-* behaviour and keyboard handling — keep the generated attributes instead of replacing the markup with plain divs.
  • Use Foundation.reInit('tabs') when you swap a component's contents wholesale and only that component needs rebuilding.

Utility and visibility classes

<p class="text-center text-uppercase">centred</p>
<div class="float-left">left box</div>
<div class="clearfix"></div>

<div class="hide-for-small-only">desktop and up</div>
<div class="show-for-medium">only from 640px</div>
<a class="button float-right" href="/start">Start</a>
<p class="show-for-sr">Read aloud by screen readers, invisible on screen</p>
  • Visibility classes (show-for-*, hide-for-*) swap whole elements per breakpoint. Hiding is not the same as omitting: both copies still exist in the HTML, so do not use them to serve different content to different devices.
  • show-for-sr keeps text available to assistive technology without printing it; pair it with show-on-focus for a skip link.
  • Flex helpers (flex-child-auto, flex-child-grow, flex-child-shrink, align-self-*, order-*) tune an individual cell without new CSS.
  • Text and float helpers replace a dozen one-line rules; anything more than a couple of utilities is a sign you should write a component rule instead.

FAQ

Do I need jQuery?
Not with the jQuery-free build shipped from Foundation 6.5 onward, though many older tutorials assume it. If you write new code, prefer the modern build and keep jQuery out of the bundle.
Why does my modal open but not close?
Usually the close control is missing data-close, or the initializer never ran because the stylesheet and plugin script were loaded in the wrong order.

The XY grid and layout Navbar, modal and forms

Last refreshed 2026-09-18.