Foundation cheat sheet

A scannable Foundation reference: 19 short snippets across 9 topics, each linking back to the lesson it came from.

At a glance

Quick snippets

The XY grid and layout

Install and load

npm install foundation-sites

# compile the Sass yourself so you control the settings
npx sass --load-path=node_modules/foundation-sites/scss src/app.scss dist/app.css

Install and load

// src/app.scss
@import 'foundation';

@include foundation-global-styles;
@include foundation-typography;
@include foundation-xy-grid-classes;
@include foundation-button;
@include foundation-reveal;   // only the components you actually use

Rows, cells and breakpoints

<div class="grid-container">
  <div class="grid-x grid-padding-x">
    <div class="cell small-12 medium-6 large-4">third on desktop</div>
    <div class="cell small-12 medium-6 large-4">third on desktop</div>
    <div class="cell small-12 medium-12 large-4">full width on mobile</div>
  </div>
</div>

Full lesson: The XY grid and layout →

Components and utilities

Enabling the JavaScript plugins

// 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();

Enabling the JavaScript plugins

<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>

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>

Full lesson: Components and utilities →

Choosing Foundation

Reasons to pick it

# the email side of Foundation, which has no real Bootstrap equivalent
npm install foundation-emails

# Inky markup compiles to table-based HTML for old mail clients
# <container><row><columns small="12" large="6">...</columns></row></container>

Full lesson: Choosing Foundation →

Project setup: Sass, Motion UI and the build pipeline

Installing from npm

# the framework itself
npm install foundation-sites

# the two optional companions
npm install motion-ui what-input

# Sass tooling: any of these works, pick one
npm install --save-dev sass            # dart-sass, the modern choice
npm install --save-dev gulp sass gulp-sass   # if you already run Gulp

A minimal Dart Sass pipeline

{
  "name": "my-foundation-site",
  "private": true,
  "scripts": {
    "build:css": "sass src/scss/app.scss public/css/app.css --style=compressed --load-path=node_modules",
    "watch:css": "sass --watch src/scss/app.scss public/css/app.css --load-path=node_modules",
    "build:js": "esbuild src/js/app.js --bundle --minify --outfile=public/js/app.js",
    "watch": "npm-run-all --parallel watch:css watch:js"
  },
  "dependencies": { "foundation-sites": "^6.9.0", "motion-ui": "^2.0.5", "what-input": "^5.2.12" }
}

Motion UI and the starter templates

/* Motion UI must be imported before you use its mixins. */
@import "motion-ui";
@include motion-ui-transitions;
@include motion-ui-animations;

/* then any component that accepts animation names can use them */

Full lesson: Project setup: Sass, Motion UI and the build pipeline →

Typography, buttons and forms

The type scale and base styles

/* settings.scss — the typography decisions belong in Sass, not markup */
$global-font-size: 100%;
$global-lineheight: 1.6;
$body-font-family: 'Inter', system-ui, sans-serif;
$header-font-family: $body-font-family;
$header-font-weight: 600;
$header-styles: (
  small: ('h1': ('font-size': 30), 'h2': ('font-size': 24), 'h3': ('font-size': 20)),
  medium: ('h1': ('font-size': 40), 'h2': ('font-size': 30), 'h3': ('font-size': 24))
);
$lead-font-size: rem-calc(20);
$paragraph-margin-bottom: 1.25rem;

Full lesson: Typography, buttons and forms →

Content components: cards, callouts, badges and tables

Callouts, badges and labels

// data-closable on the callout plus data-close on the button is the whole wiring.
// The plugin is foundation.abide-free: it lives in foundation.core and needs
// no options, so $(document).foundation() is enough.

// To remove it from the DOM instead of just hiding it:
$('.callout[data-closable]').on('closed.zf.callout', function () {
  $(this).remove();
});

Full lesson: Content components: cards, callouts, badges and tables →

Motion UI and animation

Transition and animation classes

/* app.scss */
@import "settings";
@import "motion-ui";

/* Two switches: transitions are the in/out effects, animations are the
   looping or one-shot keyframe effects. Import only what you use. */
@include motion-ui-transitions;
@include motion-ui-animations;

/* Or generate a specific set to keep the CSS small: */
// @include mui-series(...);

Custom animations with the mixins

// Sequence animations without a timeline library: mui-series emits the classes
// with staggered delays, so the CSS does the scheduling.
// In markup, add the series wrapper and let the delays play out:
// <ul class="mui-series"> ... </ul>

// If you need real control, use the animationend event.
const card = document.querySelector('.card');
card.addEventListener('animationend', (event) => {
  if (event.animationName === 'card-flip') card.classList.remove('is-flipping');
}, { once: true });

Full lesson: Motion UI and animation →

Theming with Sass: settings, partials and selective imports

The settings file and import order

/* src/scss/app.scss */
@import "settings";         // 1. your overrides
@import "foundation";       // 2. the framework, now reading your values

/* 3. anything that depends on Foundation's output goes last */
@import "components/site-header";
@import "components/data-table";

Selective imports

/* Grid gutters are a map, so overriding them is a single declaration.
   Foundation generates the breakpoint variants from these keys. */
$grid-margin-gutters: (small: 16px, medium: 24px, large: 32px);
$grid-container-max: rem-calc(1440);

/* Changing the column count regenerates every cell class. This is possible in
   Sass precisely because the classes are generated, not hand-written. */
$grid-column-count: 16;

Full lesson: Theming with Sass: settings, partials and selective imports →

Accessibility and RTL support

What the plugins handle

<div class="reveal" id="confirm" data-reveal
     aria-labelledby="confirmTitle" aria-describedby="confirmBody">
  <h2 class="h5" id="confirmTitle">Remove the integration?</h2>
  <p id="confirmBody">This deletes the stored token. You will need to reconnect.</p>
  <button class="button secondary" data-close type="button">Cancel</button>
  <button class="button alert" type="button">Remove integration</button>
</div>

<button class="button" type="button" aria-haspopup="dialog" data-open="confirm">
  Remove integration
</button>

Right-to-left layouts

/* settings.scss — one variable switches the whole framework.
   Foundation mirrors the grid, menus, buttons and callouts in the compiled CSS. */
$global-text-direction: rtl;

/* Foundation reads this and converts its own left/right declarations to
   logical ones. Note the output roughly doubles for directional rules. */
$lang-direction: rtl;

Right-to-left layouts

<html lang="ar" dir="rtl">
  <!-- Foundation's compiled RTL stylesheet applies to this whole document -->
</html>

<!-- A single LTR island inside an RTL page -->
<div dir="ltr" class="invoice-number" lang="en">INV-1042</div>

Full lesson: Accessibility and RTL support →

FAQ

Related cheat sheets

HTML CSS JavaScript TypeScript HTML DOM AJAX

Last refreshed 2026-09-27.