CheatSheetsHero

Catalog / Foundation Framework Cheatsheet

Foundation Framework Cheatsheet

A comprehensive cheat sheet for the Foundation framework, covering essential UI components, utilities, and best practices for building responsive websites.

Grid System

Basic Grid Structure

Foundation’s grid system is based on a 12-column flexbox grid.

  • .grid-container - Creates a container that centers the grid.
  • .grid-x - Row container, direct child of .grid-container.
  • .cell - Individual grid cell, direct child of .grid-x.

Column Sizing

.small-#, .medium-#, .large-#

Defines column size for different screen sizes (where # is a number from 1-12).

Example:
.small-6.medium-4.large-3

.auto

Automatically sizes the column based on its content.

.shrink

Column takes up only the space it needs.

Grid Alignment

Vertical Alignment

Use classes like .align-self-top, .align-self-middle, .align-self-bottom on .cell to vertically align content.

Horizontal Alignment

Use classes like .align-left, .align-right, .align-center on .grid-x to horizontally align columns.

Distribution Alignment

Use classes like .align-spaced, .align-justify on .grid-x to distribute columns.

Typography & Colors

Typography

Foundation provides default typography styles. Common elements:

  • <h1> to <h6> - Heading styles.
  • <p> - Paragraph style.
  • <a> - Link style.

Helper Classes:

  • .lead - Makes a paragraph stand out.
  • .subheader - Adds a muted style to headings.
  • .text-left, .text-center, .text-right - Text alignment classes.

Colors

Primary Color

Used for main actions and branding. Class: .primary

Secondary Color

Used for less important actions. Class: .secondary

Success Color

Used for positive feedback. Class: .success

Warning Color

Used to indicate caution. Class: .warning

Alert Color

Used for error messages. Class: .alert

Color Usage

Background Colors

Use .bg-* classes like .bg-primary, .bg-secondary, etc.

Text Colors

Use .text-* classes like .text-primary, .text-secondary, etc.

UI Components

Buttons

Basic Button:
<button class="button">Click Me</button>

Button Sizes:
.tiny, .small, .large

<button class="button large">Large Button</button>

Button Colors:
.primary, .secondary, .success, .warning, .alert

<button class="button success">Success Button</button>

Forms

Basic Form Input:
<label>Input Label<input type="text"></label>

Form with Help Text:
<label> Input Label<input type="text"></label><p class="help-text">Help text goes here.</p>

Error State:
<input type="text" class="is-invalid-input"> <span class="form-error is-visible">Invalid input.</span>

Navigation

Basic Navigation Menu:

<ul class="menu">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
</ul>

Vertical Menu:

<ul class="vertical menu">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
</ul>

Accordion Menu:

<ul class="accordion menu" data-accordion>
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">Section 1</a>
    <div class="accordion-content" data-tab-content>
      Panel 1. Lorem ipsum dolor...
    </div>
  </li>
</ul>

JavaScript Utilities

Interchange

Dynamically loads content based on media queries.

<div data-interchange="[/path/to/default.html, default], [/path/to/medium.html, medium]"></div>

Reveal (Modal)

Creates a modal window.

<div class="reveal" id="myModal" data-reveal>
  <h1>Awesome. I Have It.</h1>
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<button class="button" data-open="myModal">Click me for a modal</button>

Off-canvas

Creates an off-canvas menu.

<div class="off-canvas-wrapper">
  <div class="off-canvas position-left" id="myCanvas" data-off-canvas> ... </div>
  <div class="off-canvas-content" data-off-canvas-content> ... </div>
</div>
Download PDF