### Install Foundation Sites Basics Template with Git and Yarn

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/installation.md

Clones the Foundation Sites basics template repository, navigates into the project directory, installs dependencies, and starts the development server using Yarn.

```bash
git clone https://github.com/foundation/foundation-sites-template basic-project
cd basic-project
yarn install
yarn start
```

--------------------------------

### Manually Install Foundation Sites Basic Template

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/starter-projects.md

This snippet provides the commands to manually download, install dependencies, and start the build process for the Foundation Sites Basic template. This template is ideal for simple projects that primarily require Sass compilation.

```bash
# Download the template with Git
git clone https://github.com/foundation/foundation-sites-template projectname

# Move to the project folder, and install dependencies
cd projectname
yarn

# Build the Sass files
yarn start
```

--------------------------------

### Install Foundation Sites Experienced Template with Yarn

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/installation.md

This snippet provides the command-line steps to clone, install dependencies, and start the Foundation Sites experienced template project. It's recommended for users familiar with build processes and includes Handlebars, Sass, Webpack, and BrowserSync.

```bash
git clone https://github.com/foundation/foundation-zurb-template f6-project
cd f6-project
yarn install
yarn start
```

--------------------------------

### Manually Install Foundation ZURB Template

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/starter-projects.md

This snippet outlines the steps to manually download, install dependencies, and start the build process for the Foundation ZURB template. This comprehensive template supports Sass and JavaScript processing, Handlebars templating, and image compression, making it suitable for complex client projects.

```bash
# Download the ZURB template with Git
git clone https://github.com/foundation/foundation-zurb-template projectname

# Move to the project folder, and install dependencies
cd projectname
yarn

# Build the project
yarn start
```

--------------------------------

### Set up and run Foundation Sites documentation locally

Source: https://github.com/foundation/foundation-sites/blob/develop/README.md

Instructions to clone the Foundation Sites repository, install dependencies using Yarn, and start the local documentation server. Requires Node.js version 18 or higher.

```bash
# Install
git clone https://github.com/foundation/foundation-sites
cd foundation-sites
yarn

# Start the documentation
yarn start
```

--------------------------------

### Install Foundation Sites with npm

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/installation.md

Installs the Foundation Sites framework using the npm package manager. This command downloads all necessary source and compiled files.

```bash
npm install foundation-sites
```

--------------------------------

### Install Foundation Sites with Yarn

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/installation.md

Installs the Foundation Sites framework using the Yarn package manager. This command downloads all necessary source and compiled files.

```bash
yarn add foundation-sites
```

--------------------------------

### Set up Basic Equalizer Group in HTML

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/equalizer.md

This HTML snippet demonstrates the fundamental setup for Foundation Equalizer. It shows how to apply `data-equalizer` to a container and `data-equalizer-watch` to its child elements, ensuring they maintain equal height. The example also includes `data-equalize-on="medium"` to activate equalization only on medium screen sizes and above.

```HTML
<div class="grid-x grid-margin-x" data-equalizer data-equalize-on="medium" id="test-eq">
  <div class="cell medium-4">
    <div class="callout" data-equalizer-watch>
      <img src= "assets/img/generic/square-1.jpg">
    </div>
  </div>
  <div class="cell medium-4">
    <div class="callout" data-equalizer-watch>
      <p>Pellentesque habitant morbi tristique senectus et netus et, ante.</p>
    </div>
  </div>
  <div class="cell medium-4">
    <div class="callout" data-equalizer-watch>
      <img src= "assets/img/generic/rectangle-1.jpg">
    </div>
  </div>
</div>
```

--------------------------------

### Complete Foundation Top Bar with Stacking Example

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/top-bar.md

A comprehensive example of a Foundation top bar, showcasing the `.stacked-for-medium` class in action. This snippet includes a left section with a dropdown menu and a right section with a search input and button, illustrating a typical navigation setup that maintains its horizontal layout on medium screens and larger.

```html
<div class="top-bar stacked-for-medium">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li>
        <a href="#">One</a>
        <ul class="menu vertical">
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><input type="search" placeholder="Search"></li>
      <li><button type="button" class="button">Search</button></li>
    </ul>
  </div>
</div>
```

--------------------------------

### Include all Foundation SCSS components

Source: https://github.com/foundation/foundation-sites/blob/develop/meteor-README.md

Demonstrates how to include all Foundation SCSS components with a single mixin call, providing a quick way to get started with all features.

```SCSS
@include foundation-everything;
```

--------------------------------

### Understand Foundation Sites Package Structure

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/installation.md

Describes the directory structure and contents of the Foundation Sites package after installation, including source Sass/JS, compiled CSS/JS, and standalone plugins.

```plaintext
├─ scss       Source Sass files. Use this folder as a load path in Sass.
├─ js         Source JavaScript files. If you're using a build system, make sure `foundation.core.js` is loaded first.
└─ dist       Compiled files:
   ├─ css        * Compiled CSS files. Includes minified and unminified files.
   ├─ js         * Concatenated JavaScript files. Includes minified and unminified files.
   └─ plugins    * Standalone JavaScript plugins.
```

--------------------------------

### Configure Python for Node-Gyp on Windows

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/installation.md

Commands to configure the Node.js environment on Windows to ensure Python v2.7 is accessible for node-gyp, either by installing build tools or setting the Python path. This is crucial for successful installation of Foundation CLI on Windows.

```bash
npm config set python "%USERPROFILE%\.windows-build-tools\python27\python.exe"
```

--------------------------------

### Full Orbit Slider with Animation and Navigation

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/orbit.md

This comprehensive HTML example demonstrates a complete Orbit slider setup, including slides with images and captions, navigation controls (previous/next buttons), and bullet pagination. It also applies animation options using "data-options" for fade effects.

```html
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">
  <div class="orbit-wrapper">
    <div class="orbit-controls">
      <button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span>&#9664;</button>
      <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>&#9654;</button>
    </div>
    <ul class="orbit-container">
      <li class="is-active orbit-slide">
        <figure class="orbit-figure">
          <img class="orbit-image" src="assets/img/orbit/01.jpg" alt="Space">
          <figcaption class="orbit-caption">Space, the final frontier.</figcaption>
        </figure>
      </li>
      <li class="orbit-slide">
        <figure class="orbit-figure">
          <img class="orbit-image" src="assets/img/orbit/02.jpg" alt="Space">
          <figcaption class="orbit-caption">Lets Rocket!</figcaption>
        </figure>
      </li>
      <li class="orbit-slide">
        <figure class="orbit-figure">
          <img class="orbit-image" src="assets/img/orbit/03.jpg" alt="Space">
          <figcaption class="orbit-caption">Encapsulating</figcaption>
        </figure>
      </li>
      <li class="orbit-slide">
        <figure class="orbit-figure">
          <img class="orbit-image" src="assets/img/orbit/04.jpg" alt="Space">
          <figcaption class="orbit-caption">Outta This World</figcaption>
        </figure>
      </li>
    </ul>
  </div>
  <nav class="orbit-bullets">
    <button class="is-active" data-slide="0">
      <span class="show-for-sr">First slide details.</span>
      <span class="show-for-sr" data-slide-active-label>Current Slide</span>
    </button>
    <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
    <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
    <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
  </nav>
</div>
```

--------------------------------

### Basic XY Grid Structure and Sizing

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/xy-grid.md

This HTML example illustrates the fundamental usage of the XY Grid. It shows how to define grid rows with `.grid-x` and individual columns with `.cell`. The example also demonstrates responsive sizing using classes like `small-6`, `medium-6`, and `large-4` to control cell width across different screen sizes.

```html
<div class="grid-x">
  <div class="cell">full width cell</div>
  <div class="cell">full width cell</div>
</div>
<div class="grid-x">
  <div class="cell small-6">6 cells</div>
  <div class="cell small-6">6 cells</div>
</div>
<div class="grid-x">
  <div class="cell medium-6 large-4">12/6/4 cells</div>
  <div class="cell medium-6 large-8">12/6/8 cells</div>

```

--------------------------------

### Initialize Foundation Sites JavaScript

Source: https://github.com/foundation/foundation-sites/blob/develop/test/visual/xy-grid/combo-grids.html

Initializes the Foundation JavaScript components on document ready. This is a standard practice to enable interactive features of Foundation.

```javascript
$(document).foundation();
```

--------------------------------

### Global CSS Styling for Foundation Menu Examples

Source: https://github.com/foundation/foundation-sites/blob/develop/test/visual/menu/basic-menu-flex.html

This CSS provides basic styling for headings, borders, and example containers within the Foundation menu documentation. It ensures visual separation and consistent presentation of the menu examples.

```css
h1 { border-bottom: 1px solid #ddd; margin-bottom: 2rem; width: 100%; }
h3 { width: 100%; }
.example { padding: 2rem; border: 1px solid #ddd; width: 100%; }
.example + h1 { margin-top: 5rem; }
.example + h3 { margin-top: 3rem; }
```

--------------------------------

### Responsive Embed HTML Example

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/kitchen-sink.md

Provides an example of how to make embedded media, such as YouTube videos, responsive using Foundation's `responsive-embed` class. This ensures that the embedded content scales proportionally to fit its container.

```html
<div class="responsive-embed">
  <iframe width="420" height="315" src="https://www.youtube.com/embed/mM5_T-F1Yn4" frameborder="0" allowfullscreen></iframe>
</div>
```

--------------------------------

### Basic CSS Styling for Foundation Menu Examples

Source: https://github.com/foundation/foundation-sites/blob/develop/test/visual/menu/responsive-menu-flex.html

This CSS provides foundational styling for headings and example containers within the Foundation menu demonstrations. It defines borders, margins, and padding to structure the layout and visually separate content sections.

```CSS
h1 { border-bottom: 1px solid #ddd; margin-bottom: 2rem; width: 100%; }
h3 { width: 100%; }
.example { padding: 2rem; border: 1px solid #ddd; width: 100%; }
.example + h1 { margin-top: 5rem; }
.example + h3 { margin-top: 3rem; }
```

--------------------------------

### Install Foundation Sites with npm

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/sass.md

This command demonstrates how to install the Foundation for Sites framework files using npm, a popular package manager. The `--save` flag adds the package as a dependency in your project's `package.json` file.

```bash
npm install foundation-sites --save
```

--------------------------------

### Install Motion UI with npm or Yarn

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/motion-ui.md

This snippet demonstrates how to install the Motion UI library using either npm or Yarn package managers. It adds Motion UI as a development dependency to your project, making it available for use in your build process.

```bash
npm install motion-ui --save-dev
yarn add motion-ui
```

--------------------------------

### HTML Examples for Native Meter Element Usage

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/progress-bar.md

Demonstrates various configurations of the HTML <meter> element with different `value` attributes. These examples illustrate how the element automatically colors itself based on `min`, `low`, `high`, `optimum`, and `max` ranges.

```html
<meter value="30" min="0" low="33" high="66" optimum="100" max="100"></meter>
<meter value="50" min="0" low="33" high="66" optimum="100" max="100"></meter>
<meter value="100" min="0" low="33" high="66" optimum="100" max="100"></meter>
```

--------------------------------

### Complete HTML Example for Foundation Tabs

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/tabs.md

This comprehensive HTML example demonstrates a fully functional tabbed interface using Foundation's `.tabs` and `.tabs-content` components. It combines the tab navigation and corresponding content panels, showing how they link together via IDs and `href` attributes to create an interactive multi-document container.

```html
<ul class="tabs" data-tabs id="example-tabs">
  <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
  <li class="tabs-title"><a href="#panel2">Tab 2</a></li>
  <li class="tabs-title"><a href="#panel3">Tab 3</a></li>
  <li class="tabs-title"><a href="#panel4">Tab 4</a></li>
  <li class="tabs-title"><a href="#panel5">Tab 5</a></li>
  <li class="tabs-title"><a href="#panel6">Tab 6</a></li>
</ul>

<div class="tabs-content" data-tabs-content="example-tabs">
  <div class="tabs-panel is-active" id="panel1">
    <p>one</p>
    <p>Check me out! I'm a super cool Tab panel with text content!</p>
    <p><a href="#">I am a link but don't do anything</a></p>
  </div>
  <div class="tabs-panel" id="panel2">
    <p>two</p>
    <textarea></textarea>
    <button class="button">I do nothing!</button>
  </div>
  <div class="tabs-panel" id="panel3">
    <p>three</p>
    <p>Check me out! I'm a super cool Tab panel with text content!</p>
  </div>
  <div class="tabs-panel" id="panel4">
    <p>four</p>
    <img class="thumbnail" src="assets/img/generic/rectangle-2.jpg">
  </div>
  <div class="tabs-panel" id="panel5">
    <p>five</p>
    <p>Check me out! I'm a super cool Tab panel with text content!</p>
  </div>
  <div class="tabs-panel" id="panel6">
    <p>six</p>
    <img class="thumbnail" src="assets/img/generic/rectangle-8.jpg">
  </div>
</div>
```

--------------------------------

### Demonstrating Configuration Precedence with HTML Data Attributes

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/javascript.md

An example showing how options passed via data-options or individual data- attributes are processed, highlighting that data-options can override individual data- attributes if they specify the same setting.

```html
<div data-accordion data-slide-speed="500" data-options="slideSpeed:250;">...</div>
```

--------------------------------

### CSS Styling for Foundation Documentation Examples

Source: https://github.com/foundation/foundation-sites/blob/develop/test/visual/menu/active-menu-flex.html

Provides basic CSS rules for styling the documentation page elements, including headings and example containers, to improve readability and presentation. These styles are for the documentation itself, not core Foundation components.

```css
h1 { border-bottom: 1px solid #ddd; margin-bottom: 2rem; width: 100%; } h3 { width: 100%; } .example { padding: 2rem; border: 1px solid #ddd; width: 100%; } .example + h1 { margin-top: 5rem; } .example + h3 { margin-top: 3rem; }
```

--------------------------------

### Initialize Foundation for Sites

Source: https://github.com/foundation/foundation-sites/blob/develop/test/visual/reveal/close-on-click.html

Initializes all Foundation components on the document, including Reveal modals, after the DOM is ready. This is a standard setup step for Foundation projects.

```JavaScript
$(document).foundation();
```

--------------------------------

### Basic CSS Styling for Foundation Menu Examples

Source: https://github.com/foundation/foundation-sites/blob/develop/test/visual/menu/menu-icons-float.html

Provides foundational CSS rules for headings and example containers, ensuring consistent presentation and spacing for the menu demonstrations within the Foundation framework.

```CSS
h1 { border-bottom: 1px solid #ddd; margin-bottom: 2rem; width: 100%; } h3 { width: 100%; } .example { padding: 2rem; border: 1px solid #ddd; width: 100%; } .example + h1 { margin-top: 5rem; } .example + h3 { margin-top: 3rem; }
```

--------------------------------

### Basic CSS Styling for Foundation Menu Examples

Source: https://github.com/foundation/foundation-sites/blob/develop/test/visual/menu/horizontal-menu-alignment-flex.html

Provides basic CSS rules for headings, example containers, and borders to style the Foundation menu demonstration page.

```CSS
h1 { border-bottom: 1px solid #ddd; margin-bottom: 2rem; width: 100%; } h3 { width: 100%; } .example { padding: 2rem; border: 1px solid #ddd; width: 100%; } .example + h1 { margin-top: 5rem; } .example + h3 { margin-top: 3rem; }
```

--------------------------------

### HTML Progress Bar Examples with Status

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/kitchen-sink.md

This snippet showcases various progress bar implementations using Foundation Sites. It includes examples with different progress percentages and semantic colors (primary, warning, alert, success) to indicate status, along with accessibility attributes.

```HTML
<div class="primary progress" role="progressbar" tabindex="0" aria-valuenow="25" aria-valuemin="0" aria-valuetext="25 percent" aria-valuemax="100">
  <div class="progress-meter" style="width: 25%">
    <p class="progress-meter-text">25%</p>
  </div>
</div>

<div class="warning progress">
  <div class="progress-meter" style="width: 50%">
    <p class="progress-meter-text">50%</p>
  </div>
</div>

<div class="alert progress">
  <div class="progress-meter" style="width: 75%">
    <p class="progress-meter-text">75%</p>
  </div>
</div>

<div class="success progress" role="progressbar" tabindex="0" aria-valuenow="100" aria-valuemin="0" aria-valuetext="100 percent" aria-valuemax="100">
  <div class="progress-meter" style="width: 100%">
    <p class="progress-meter-text">100%</p>
  </div>
</div>
```

--------------------------------

### Basic CSS Styling for Foundation Menu Examples

Source: https://github.com/foundation/foundation-sites/blob/develop/test/visual/menu/nested-menu-flex.html

Provides foundational CSS rules for headings and example containers, ensuring visual clarity and proper spacing within the Foundation menu demonstrations.

```CSS
h1 { border-bottom: 1px solid #ddd; margin-bottom: 2rem; width: 100%; } h3 { width: 100%; } .example { padding: 2rem; border: 1px solid #ddd; width: 100%; } .example + h1 { margin-top: 5rem; } .example + h3 { margin-top: 3rem; }
```

--------------------------------

### CSS Styling for Foundation Menu Examples

Source: https://github.com/foundation/foundation-sites/blob/develop/test/visual/menu/simple-menu-float.html

This CSS provides basic styling for headings and example containers, ensuring proper spacing and visual separation within the Foundation menu documentation. It defines borders, margins, padding, and width for `h1`, `h3`, and `.example` classes.

```CSS
h1 { border-bottom: 1px solid #ddd; margin-bottom: 2rem; width: 100%; } h3 { width: 100%; } .example { padding: 2rem; border: 1px solid #ddd; width: 100%; } .example + h1 { margin-top: 5rem; } .example + h3 { margin-top: 3rem; }
```

--------------------------------

### Initialize Foundation JavaScript Library

Source: https://github.com/foundation/foundation-sites/blob/develop/test/visual/flex-grid/button-group.html

Initializes the Foundation JavaScript library on document ready. This is a common practice to ensure all Foundation components are properly activated after the DOM is loaded.

```javascript
$(document).foundation();
```

--------------------------------

### Create Basic and Hoverable Dropdowns (HTML)

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/dropdown.md

Demonstrates how to set up basic dropdown panes and their triggers using `data-toggle` and `data-dropdown` attributes. Includes an example of a dropdown with a form and another configured for hover activation using `data-hover` and `data-hover-pane`.

```html
<button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
<div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true">
  Example form in a dropdown.
  <form>
    <div class="grid-container">
      <div class="grid-x grid-margin-x">
        <div class="cell medium-6">
          <label>Name
            <input type="text" placeholder="Kirk, James T.">
          </label>
        </div>
        <div class="cell medium-6">
          <label>Rank
            <input type="text" placeholder="Captain">
          </label>
        </div>
      </div>
    </div>
  </form>
</div>

<button class="button" type="button" data-toggle="example-dropdown-1">Hoverable Dropdown</button>
<div class="dropdown-pane" id="example-dropdown-1" data-dropdown data-hover="true" data-hover-pane="true">
  Just some junk that needs to be said. Or not. Your choice.
</div>
```

--------------------------------

### Foundation Sites HTML Starter Template

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/installation.md

This comprehensive HTML5 starter template provides a basic structure for a Foundation Sites project. It includes essential meta tags, links to Foundation CSS, and scripts for jQuery, what-input, and Foundation JavaScript, along with an initialization script. The .no-js class on the html tag helps prevent a flash of unstyled content (FOUC).

```html
<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation Starter Template</title>
    <link rel="stylesheet" href="css/foundation.css" />
  </head>
  <body>
    <h1>Hello, world!</h1>

    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>

  </body>
</html>
```

--------------------------------

### Initialize Foundation JavaScript Components

Source: https://github.com/foundation/foundation-sites/blob/develop/test/visual/prototype/border-box.html

This JavaScript snippet initializes all Foundation components on the page. It ensures that interactive elements like accordions, reveal modals, and dropdowns function correctly after the DOM is loaded.

```javascript
$(document).foundation();
```

--------------------------------

### Implement Small Grids in Foundation Sites HTML

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/grid.md

This snippet demonstrates how to create responsive grid layouts for small screens using Foundation Sites' `.small-*` classes. It shows examples of 2/10 and 3/9 column divisions within a row.

```html
<div class="row">
  <div class="columns small-2">2</div>
  <div class="columns small-10">10</div>
</div>
<div class="row">
  <div class="columns small-3">3</div>
  <div class="columns small-9">9</div>
</div>
```

--------------------------------

### Build Foundation ZURB Template for Production

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/starter-projects.md

This command is used to compile the Foundation ZURB template into a production-ready build, optimizing all assets for deployment.

```bash
yarn build
```

--------------------------------

### Include All Foundation Components CSS

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/sass.md

This SCSS mixin includes all default CSS output for every Foundation component, providing a quick way to get started with the framework without needing to specify individual components.

```scss
@include foundation-everything;
```

--------------------------------

### Connect Slider to Input Field with Step Size (HTML)

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/slider.md

This example extends the data binding setup by adding a 'data-step' attribute to the slider. This allows the slider to move in specified increments, providing more controlled value adjustments while still linking to an external input field.

```HTML
<div class="grid-x grid-margin-x">
  <div class="cell small-10">
    <div class="slider" data-slider data-initial-start="50" data-step="5">
      <span class="slider-handle"  data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput2"></span>
      <span class="slider-fill" data-slider-fill></span>
    </div>
  </div>
  <div class="cell small-2">
    <input type="number" id="sliderOutput2">
  </div>
</div>
```

--------------------------------

### Selectively include Foundation SCSS components

Source: https://github.com/foundation/foundation-sites/blob/develop/meteor-README.md

Provides an example of how to import individual Foundation SCSS components using their respective mixins, allowing for a more modular and optimized build by commenting out unneeded parts.

```SCSS
@import 'foundation';

// Global styles
@include foundation-global-styles;
@include foundation-forms;
@include foundation-typography;

// Grids (choose one)
@include foundation-xy-grid-classes;
// @include foundation-grid;
// @include foundation-flex-grid;

// Generic components
@include foundation-button;
@include foundation-button-group;
@include foundation-close-button;
@include foundation-label;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-switch;
@include foundation-table;
// Basic components
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-callout;
@include foundation-card;
@include foundation-dropdown;
@include foundation-pagination;
@include foundation-tooltip;

// Containers
@include foundation-accordion;
@include foundation-media-object;
@include foundation-orbit;
@include foundation-responsive-embed;
@include foundation-tabs;
@include foundation-thumbnail;
// Menu-based containers
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-accordion-menu;
@include foundation-drilldown-menu;
@include foundation-dropdown-menu;

// Layout components
@include foundation-off-canvas;
@include foundation-reveal;
@include foundation-sticky;
@include foundation-title-bar;
@include foundation-top-bar;

// Helpers
@include foundation-float-classes;
// @include foundation-flex-classes;
@include foundation-visibility-classes;
// @include foundation-prototype-classes;
```

--------------------------------

### Implement Responsive Grid Layouts with Foundation Sites

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/kitchen-sink.md

This example illustrates the Foundation Sites responsive grid system, demonstrating how to define column widths for different screen sizes (small, medium, large) using `row` and `columns` classes. It shows various column combinations to achieve flexible layouts.

```html
<div class="row">
  <div class="small-2 medium-3 large-4 columns">2/3/4 columns</div>
  <div class="small-4 medium-3 large-4 columns">4/3/4 columns</div>
  <div class="small-6 large-4 columns">6/6/4 columns</div>
</div>
<div class="row">
  <div class="large-3 columns">12/12/3 columns</div>
  <div class="large-6 columns">12/12/6 columns</div>
  <div class="large-3 columns">12/12/3 columns</div>
</div>
<div class="row">
  <div class="small-6 large-2 columns">6/6/2 columns</div>
  <div class="small-6 large-8 columns">6/6/8 columns</div>
  <div class="small-12 large-2 columns">12/12/2 columns</div>
</div>
<div class="row">
  <div class="small-3 columns">3 columns</div>
  <div class="small-9 columns">9 columns</div>
</div>
<div class="row">
  <div class="medium-8 large-4 columns">12/8/4 columns</div>
  <div class="medium-4 large-8 columns">12/4/8 columns</div>
</div>
```

--------------------------------

### Dropdown Pane HTML Example

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/kitchen-sink.md

Demonstrates how to create a simple dropdown pane using Foundation's `data-toggle` attribute on a button and `data-dropdown` on the pane itself. This allows for toggling the visibility of the associated content.

```html
<button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
<div class="dropdown-pane" id="example-dropdown" data-dropdown>
  Just some junk that needs to be said. Or not. Your choice.
</div>
```

--------------------------------

### Disable Motion UI Animation for Foundation Orbit Component

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/orbit.md

To disable Motion UI animations for a Foundation Orbit component, set the `data-use-m-u-i` attribute to `false` on the main Orbit container. This prevents the component from using Motion UI for its transitions and effects. The first example shows a minimal setup, while the second provides a complete Orbit component structure.

```html
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-use-m-u-i="false">
</div>
```

```html
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-use-m-u-i="false">
  <div class="orbit-wrapper">
    <div class="orbit-controls">
      <button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span>&#9664;</button>
      <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>&#9654;</button>
    </div>
    <ul class="orbit-container">
      <li class="is-active orbit-slide">
        <figure class="orbit-figure">
          <img class="orbit-image" src="assets/img/orbit/01.jpg" alt="Space">
          <figcaption class="orbit-caption">Space, the final frontier.</figcaption>
        </figure>
      </li>
      <li class="orbit-slide">
        <figure class="orbit-figure">
          <img class="orbit-image" src="assets/img/orbit/02.jpg" alt="Space">
          <figcaption class="orbit-caption">Lets Rocket!</figcaption>
          </figure>
      </li>
      <li class="orbit-slide">
        <figure class="orbit-figure">
          <img class="orbit-image" src="assets/img/orbit/03.jpg" alt="Space">
          <figcaption class="orbit-caption">Encapsulating</figcaption>
          </figure>
      </li>
      <li class="orbit-slide">
        <figure class="orbit-figure">
          <img class="orbit-image" src="assets/img/orbit/04.jpg" alt="Space">
          <figcaption class="orbit-caption">Outta This World</figcaption>
          </figure>
      </li>
    </ul>
  </div>
  <nav class="orbit-bullets">
    <button class="is-active" data-slide="0">
      <span class="show-for-sr">First slide details.</span>
      <span class="show-for-sr" data-slide-active-label>Current Slide</span>
    </button>
    <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
    <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
    <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
 </nav>
</div>
```

--------------------------------

### Initialize Foundation JavaScript Components

Source: https://github.com/foundation/foundation-sites/blob/develop/test/visual/xy-grid/block-grid.html

This JavaScript snippet ensures that all Foundation components are properly initialized once the DOM is ready. It's a standard practice to enable interactive features and plugins provided by the Foundation framework.

```JavaScript
$(document).foundation();
```

--------------------------------

### Initialize Foundation Sites with jQuery

Source: https://github.com/foundation/foundation-sites/blob/develop/test/visual/sticky/simple-menu.html

This snippet initializes the Foundation Sites JavaScript framework on the document ready event. It ensures that all Foundation components are properly set up and ready for use after the DOM is fully loaded. This is a common practice for single-page applications or pages that rely heavily on JavaScript-driven UI components.

```JavaScript
$(document).foundation();
```

--------------------------------

### Implement Accordion Menu with Separate Submenu Toggle in HTML

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/accordion-menu.md

This HTML example shows how to configure an accordion menu to have a separate toggle for sub-menus, allowing the parent link to be clickable independently. It requires adding the `data-submenu-toggle="true"` attribute to the main `<ul>` element, alongside `data-accordion-menu` and `.vertical` classes. This setup enables a distinct interaction for expanding/collapsing nested menus.

```HTML
<ul class="vertical menu accordion-menu" data-accordion-menu data-submenu-toggle="true">
  <li>
    <a href="https://get.foundation/" target="_blank">Link here, dropdown there →</a>
    <ul class="menu vertical nested">
      <li>
        <a href="#">Item 1A</a>
        <ul class="menu vertical nested">
          <li><a href="#">Item 1Ai</a></li>
          <li><a href="#">Item 1Aii</a></li>
          <li><a href="#">Item 1Aiii</a></li>
        </ul>
      </li>
      <li><a href="#">Item 1B</a></li>
      <li><a href="#">Item 1C</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item 2</a>
    <ul class="menu vertical nested">
      <li><a href="#">Item 2A</a></li>
      <li><a href="#">Item 2B</a></li>
    </ul>
  </li>
  <li><a href="#">Item 3</a></li>
</ul>
```

--------------------------------

### Flex Grid Layout HTML Example

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/kitchen-sink.md

Shows how to implement responsive grid layouts using Foundation's Flex Grid system. It demonstrates the use of `row` and `columns` classes, along with breakpoint prefixes like `small-`, `medium-`, and `large-` to define column widths across different screen sizes.

```html
<div class="row">
  <div class="small-6 columns">6 columns</div>
  <div class="small-6 columns">6 columns</div>
</div>
<div class="row">
  <div class="medium-6 large-4 columns">12/6/4 columns</div>
  <div class="medium-6 large-8 columns">12/6/8 columns</div>
</div>
```

--------------------------------

### CSS Styling for Foundation Menu Examples

Source: https://github.com/foundation/foundation-sites/blob/develop/test/visual/menu/menu-centered-flex.html

Defines basic CSS rules for headings, borders, margins, and padding to style the examples on the page, including a bottom border for h1 and spacing for example blocks.

```css
h1 { border-bottom: 1px solid #ddd; margin-bottom: 2rem; width: 100%; } h3 { width: 100%; } .example { padding: 2rem; border: 1px solid #ddd; width: 100%; } .example + h1 { margin-top: 5rem; } .example + h3 { margin-top: 3rem; }
```

--------------------------------

### Initializing All Foundation Plugins with jQuery

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/javascript.md

Illustrates how to initialize all Foundation plugins on the page by calling the .foundation() function on the jQuery document object.

```js
$(document).foundation();
```

--------------------------------

### Styling for Drilldown Menu Examples

Source: https://github.com/foundation/foundation-sites/blob/develop/test/visual/menu/vertical-drilldownmenu-alignment-float.html

Provides basic CSS styling for headings, borders, margins, and example containers to visually separate and highlight drilldown menu examples within the documentation. This CSS helps in presenting the menu structures clearly.

```CSS
h1 { border-bottom: 1px solid #ddd; margin-bottom: 2rem; width: 100%; } h3 { width: 100%; } .example { padding: 2rem; border: 1px solid #ddd; width: 100%; } .example + h1 { margin-top: 5rem; } .example + h3 { margin-top: 3rem; }
```

--------------------------------

### Display Live HTML Demos with `html_example` in Markdown

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/style-sherpa.md

Explains how to use the `html_example` language specifier in Markdown fenced code blocks to automatically render both the HTML code sample and a live interactive demo in the Style Sherpa output.

```markdown
```html_example
<button class="button" type="button">This is a button.</button>
```
```

--------------------------------

### Initialize Foundation for Sites

Source: https://github.com/foundation/foundation-sites/blob/develop/test/visual/prototype/image-replacement.html

This JavaScript snippet initializes the Foundation framework on page load, enabling its components and plugins.

```javascript
$(document).foundation();
```

--------------------------------

### Basic CSS Styling for Foundation Menu Examples

Source: https://github.com/foundation/foundation-sites/blob/develop/test/visual/menu/basic-menu-float.html

This CSS snippet provides foundational styling for the menu examples, including borders, margins, and width definitions for headings and example containers. It helps structure the visual presentation of the menu components.

```css
h1 { border-bottom: 1px solid #ddd; margin-bottom: 2rem; width: 100%; }
h3 { width: 100%; }
.example { padding: 2rem; border: 1px solid #ddd; width: 100%; }
.example + h1 { margin-top: 5rem; }
.example + h3 { margin-top: 3rem; }
```

--------------------------------

### Define CSS Styles for Example Boxes and Debugging

Source: https://github.com/foundation/foundation-sites/blob/develop/test/visual/prototype/border-box.html

This CSS snippet defines base styles for example boxes, including fixed dimensions and `content-box` sizing, along with utility classes for adding colored borders for debugging purposes. These styles are used to visually demonstrate the effects of the CSS box model.

```css
.example-box { width: 300px; height: 200px; margin-bottom: 10px; box-sizing: content-box; } .debug-red { border: 1px solid #ff0000; } .debug-blue { border: 1px solid #0000ff; }
```

--------------------------------

### Initialize Foundation for Sites

Source: https://github.com/foundation/foundation-sites/blob/develop/test/visual/prototype/list-styling-unordered.html

This JavaScript snippet initializes the Foundation framework on the document ready event, enabling all Foundation components and plugins to function correctly.

```JavaScript
$(document).foundation();
```

--------------------------------

### Initialize Foundation Sites JavaScript

Source: https://github.com/foundation/foundation-sites/blob/develop/test/visual/xy-grid/containers.html

Initializes all Foundation Sites JavaScript components on page load. This is a standard practice to ensure interactive elements like dropdowns, accordions, and other plugins function correctly after the DOM is ready.

```javascript
$(document).foundation();
```

--------------------------------

### Basic CSS Styling for Foundation Menu Examples

Source: https://github.com/foundation/foundation-sites/blob/develop/test/visual/menu/horizontal-menu-alignment-float.html

Provides general CSS rules for headings and example containers to structure the demonstration of Foundation menus.

```CSS
h1 { border-bottom: 1px solid #ddd; margin-bottom: 2rem; width: 100%; } h3 { width: 100%; } .example { padding: 2rem; border: 1px solid #ddd; width: 100%; } .example + h1 { margin-top: 5rem; } .example + h3 { margin-top: 3rem; }
```

--------------------------------

### Initialize Foundation for Sites Components

Source: https://github.com/foundation/foundation-sites/blob/develop/test/visual/slider/nonzero-start.html

This JavaScript snippet initializes all Foundation for Sites components on the page once the DOM is fully loaded. It's a standard call required to activate Foundation's plugins and interactive elements.

```JavaScript
$(document).foundation();
```

--------------------------------

### Separate Style Guide Sections in Markdown

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/style-sherpa.md

Demonstrates how to add multiple distinct sections to a Style Sherpa guide by inserting four line breaks between Markdown headings.

```markdown
# Buttons

Lorem ipsum dolor sit amet, **consectetur adipisicing** elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.



# Forms

Lorem ipsum dolor sit amet, `<form>` elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
```

--------------------------------

### Initialize Foundation for Sites Components

Source: https://github.com/foundation/foundation-sites/blob/develop/test/visual/dropdown/open-the-same-dropdown.html

Initializes all Foundation for Sites components on the page, including dropdowns, by calling the `foundation()` method on the document ready event. This ensures that all dynamic UI elements are properly set up and functional.

```javascript
$(document).foundation();
```

--------------------------------

### Define Style Guide Sections with Markdown

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/style-sherpa.md

Illustrates how to create a new section in a Style Sherpa guide using a Markdown heading (single hash mark) to title the section.

```markdown
# Buttons

Lorem ipsum dolor sit amet, **consectetur adipisicing** elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
```

--------------------------------

### Initialize Foundation for Sites

Source: https://github.com/foundation/foundation-sites/blob/develop/test/visual/reveal/full-reveal.html

This JavaScript snippet initializes the Foundation framework on the document ready event, enabling all Foundation components and their associated functionalities.

```JavaScript
$(document).foundation();
```

--------------------------------

### Basic CSS Styling for Foundation Examples

Source: https://github.com/foundation/foundation-sites/blob/develop/test/visual/menu/horizontal-dropdownmenu-alignment-float.html

Provides basic styling for headings, example containers, and spacing within the Foundation documentation pages to improve readability and layout.

```CSS
h1 { border-bottom: 1px solid #ddd; margin-bottom: 2rem; width: 100%; } h3 { width: 100%; } .example { padding: 2rem; border: 1px solid #ddd; width: 100%; } .example + h1 { margin-top: 5rem; } .example + h3 { margin-top: 3rem; }
```

--------------------------------

### Example of Large Sized Foundation Reveal Modal

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/reveal.md

This complete HTML example shows both the button to open and the structure of a `.large` sized Foundation Reveal modal. The modal will be 90% wide on larger screens.

```html
<p><button class="button" data-toggle="exampleModal7">Click me for a large modal</button></p>

<div class="large reveal" id="exampleModal7" data-reveal>
  <p>I'm big, like bear!</p>
  <button class="close-button" data-close aria-label="Close reveal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
```

--------------------------------

### Example of Small Sized Foundation Reveal Modal

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/reveal.md

This complete HTML example shows both the button to open and the structure of a `.small` sized Foundation Reveal modal. The modal will be 50% wide on larger screens.

```html
<p><button class="button" data-toggle="exampleModal6">Click me for a small modal</button></p>

<div class="small reveal" id="exampleModal6" data-reveal>
  <p>I may be small, but I've got a big heart!</p>
  <button class="close-button" data-close aria-label="Close reveal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
```

--------------------------------

### Configuring Mocha, Chai, and RequireJS for Test Execution

Source: https://github.com/foundation/foundation-sites/blob/develop/test/bundle/index.html

This JavaScript snippet initializes Mocha for Behavior-Driven Development (BDD) with a 5-second timeout. It also sets up Chai for assertion style and configures RequireJS to load 'test_bundle' as a dependency, executing Mocha tests once dependencies are met.

```JavaScript
mocha.setup({ ui: 'bdd', timeout: 5000, }); chai.should(); requirejs.config({ deps: ['test_bundle'], callback: mocha.run });
```

--------------------------------

### Example of Tiny Sized Foundation Reveal Modal

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/reveal.md

This complete HTML example shows both the button to open and the structure of a `.tiny` sized Foundation Reveal modal. The modal will be 30% wide on larger screens.

```html
<p><button class="button" data-toggle="exampleModal5" aria-controls="exampleModal5">Click me for a tiny modal</button></p>

<div class="tiny reveal" id="exampleModal5" data-reveal>
  <p>OH I'M SO TIIINY</p>
  <button class="close-button" data-close aria-label="Close reveal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
```

--------------------------------

### Styling for Foundation Menu Examples - CSS

Source: https://github.com/foundation/foundation-sites/blob/develop/test/visual/menu/vertical-accordionmenu-alignment-float.html

Defines basic CSS rules for headings and example containers to structure and style the demonstration of Foundation menus, ensuring visual clarity and proper spacing.

```CSS
h1 { border-bottom: 1px solid #ddd; margin-bottom: 2rem; width: 100%; } h3 { width: 100%; } .example { padding: 2rem; border: 1px solid #ddd; width: 100%; } .example + h1 { margin-top: 5rem; } .example + h3 { margin-top: 3rem; }
```

--------------------------------

### Initialize Foundation Sites with jQuery

Source: https://github.com/foundation/foundation-sites/blob/develop/test/visual/sticky/height-transition.html

This snippet initializes the Foundation Sites framework on document ready, enabling its JavaScript components and plugins. It relies on jQuery being loaded prior to execution, as Foundation's JavaScript components are built on top of jQuery.

```JavaScript
$(document).foundation();
```

--------------------------------

### Foundation Sites Example Container Styling

Source: https://github.com/foundation/foundation-sites/blob/develop/test/visual/menu/nested-menu-float.html

CSS rules to style the example containers and headings within Foundation Sites documentation, providing visual separation and spacing for demonstration purposes.

```css
h1 { border-bottom: 1px solid #ddd; margin-bottom: 2rem; width: 100%; } h3 { width: 100%; } .example { padding: 2rem; border: 1px solid #ddd; width: 100%; } .example + h1 { margin-top: 5rem; } .example + h3 { margin-top: 3rem; }
```

--------------------------------

### Styling Tables with Foundation Sites

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/prototyping-utilities.md

Demonstrates how to apply Foundation Sites classes such as 'radius', 'bordered', and 'shadow' to HTML tables for enhanced visual styling and structure.

```html
<table class="radius bordered shadow">
	<!-- My Table goes here -->
</table>
```

--------------------------------

### Create Basic HTML Switch Component

Source: https://github.com/foundation/foundation-sites/blob/develop/docs/pages/switch.md

Demonstrates the fundamental structure for creating a pure CSS3 On/Off switch using Foundation Sites. It requires a ".switch" container, an <input type="checkbox"> with ".switch-input", and a <label> with ".switch-paddle" linked by ID for clickability. Includes screen reader-only text for accessibility.

```HTML
<div class="switch">
  <input class="switch-input" id="exampleSwitch" type="checkbox" name="exampleSwitch">
  <label class="switch-paddle" for="exampleSwitch">
    <span class="show-for-sr">Download Kittens</span>
  </label>
</div>
```

--------------------------------

### Foundation Menu Styling - Flexbox CSS

Source: https://github.com/foundation/foundation-sites/blob/develop/test/visual/menu/vertical-menu-alignment-flex.html

Defines basic styling for Foundation menus, including borders, margins, and padding for examples, using Flexbox principles. This CSS sets up the visual structure for headings and example containers.

```css
h1 { border-bottom: 1px solid #ddd; margin-bottom: 2rem; width: 100%; } h3 { width: 100%; } .example { padding: 2rem; border: 1px solid #ddd; width: 100%; } .example + h1 { margin-top: 5rem; } .example + h3 { margin-top: 3rem; }
```