### Install foundation-docs via npm

Source: https://github.com/foundation/foundation-docs/blob/master/README.md

This codebase isn't on npm directly, but this Git repository can be referenced in a `package.json` for installation.

```json
{
  "dependencies": {
    "foundation-docs": "foundation/foundation-docs"
  }
}
```

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

### JavaScript Method: exampleFunction Usage Example

Source: https://github.com/foundation/foundation-docs/blob/master/test/output/component.html

This method provides an example of how to call a function on a Foundation-initialized element. It is typically used for demonstrating basic component interactions.

```JavaScript
$('#element').foundation('exampleFunction');
```

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

### JavaScript Method: sinceFunction Usage Example

Source: https://github.com/foundation/foundation-docs/blob/master/test/output/component.html

This function was introduced in a specific version of the library. It demonstrates a simple method call on a Foundation-initialized element.

```JavaScript
$('#element').foundation('sinceFunction');
```

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

### Link foundation-docs for local testing with Foundation frameworks

Source: https://github.com/foundation/foundation-docs/blob/master/README.md

To test `foundation-docs` with an actual framework's documentation, you can link the folders using `npm link`. This assumes `foundation-sites` and `foundation-docs` are in the same parent directory.

```bash
npm link ../foundation-docs
```

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

### JavaScript Component Initialization Requirements

Source: https://github.com/foundation/foundation-docs/blob/master/test/output/index.html

Outlines the necessary JavaScript files and utility libraries required to use the component plugin.

```APIDOC
Initialization:
  Required Files:
    - component.js
    - foundation.core.js
  Required Utility Libraries:
    - foundation.core.js
```

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

### JavaScript Class: Foundation.Plugin Constructor and Parameters

Source: https://github.com/foundation/foundation-docs/blob/master/test/output/component.html

This class constructor initializes new instances of the Foundation plugin. It accepts an element and options, and fires the `init.zf.event:plugin` event upon initialization.

```JavaScript
var elem = new Foundation.Plugin(element, options);
```

```APIDOC
Foundation.Plugin:
  Fires Events: init.zf.event:plugin
  Parameters:
    param1:
      Type: object
      Description: This is a parameter.
    param2:
      Type: string
      Description: This is an optional parameter.
    param3:
      Type: boolean
      Description: This is an optional parameter with a default value.
    param4:
      Type: string
      Description: This is a parameter that accepts multiple types.
```

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

### Basic HTML Button Structure

Source: https://github.com/foundation/foundation-docs/blob/master/test/output/index.html

Demonstrates the basic HTML structure for a button element with a 'button' class.

```HTML
<button class="button" type="button">Button</a>
```

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

### JavaScript Plugin Initialization File Requirements

Source: https://github.com/foundation/foundation-docs/blob/master/test/output/component.html

To use this JavaScript plugin, specific files must be included. This section lists the necessary core and component-specific JavaScript files for proper functionality.

```APIDOC
Required Files:
  - foundation.core.js
  - component.js (With utility library foundation.core.js)
```

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

### Foundation.Plugin Class Constructor

Source: https://github.com/foundation/foundation-docs/blob/master/test/output/index.html

Documents the constructor for the Foundation.Plugin class, including its parameters and events fired upon initialization.

```APIDOC
Class: Foundation.Plugin
  Constructor: var elem = new Foundation.Plugin(element, options);
  Fires Events: init.zf.event:plugin
  Parameters:
    param1:
      Type: object
      Description: This is a parameter.
    param2:
      Type: string
      Description: This is an optional parameter.
    param3:
      Type: boolean
      Description: This is an optional parameter with a default value.
    param4:
      Type: string
      Description: This is a parameter that accepts multiple types.
```

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

### Include Foundation Docs Sass Partials

Source: https://github.com/foundation/foundation-docs/blob/master/README.md

The CSS for Foundation documentation is provided as Sass partials. Foundation and Motion UI must be loaded manually before it.

```scss
@import 'foundation';
@import 'motion-ui';

@include foundation-everything;
@include motion-ui-transitions;

@import 'foundation-docs';
```

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

### HTML Structure for Small Index

Source: https://github.com/foundation/foundation-docs/blob/master/test/fixtures/index.md

HTML markup for a responsive 'Small Index' layout, designed to link to every page in the framework documentation. It organizes links into sections within a multi-column grid.

```HTML
<div class="row up-1 medium-up-3 docs-small-index">
  <div class="column">
    <section>
      <h4>Section Title</h4>
      <ul>
        <li><a href="#">Link Title</a></li>
        <li><a href="#">Link Title</a></li>
        <li><a href="#">Link Title</a></li>
      </ul>
    </section>

    <section>
      <h4>Section Title</h4>
      <ul>
        <li><a href="#">Link Title</a></li>
        <li><a href="#">Link Title</a></li>
      </ul>
    </section>
  </div>
  <div class="column">
    <section>
      <h4>Section Title</h4>
      <ul>
        <li><a href="#">Link Title</a></li>
        <li><a href="#">Link Title</a></li>
        <li><a href="#">Link Title</a></li>
        <li><a href="#">Link Title</a></li>
        <li><a href="#">Link Title</a></li>
      </ul>
    </section>

    <section>
      <h4>Section Title</h4>
      <ul>
        <li><a href="#">Link Title</a></li>
        <li><a href="#">Link Title</a></li>
      </ul>
    </section>
  </div>
  <div class="column">
    <section>
      <h4>Section Title</h4>
      <ul>
        <li><a href="#">Link Title</a></li>
        <li><a href="#">Link Title</a></li>
        <li><a href="#">Link Title</a></li>
      </ul>
    </section>

    <section>
      <h4>Section Title</h4>
      <ul>
        <li><a href="#">Link Title</a></li>
        <li><a href="#">Link Title</a></li>
      </ul>
    </section>
  </div>
</div>
```

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

### HTML Structure for Big Index

Source: https://github.com/foundation/foundation-docs/blob/master/test/fixtures/index.md

HTML markup for a responsive 'Big Index' layout, used to link to major sections of the framework documentation. It displays links in a grid, adjusting columns based on screen size.

```HTML
<div class="row up-1 medium-up-2 large-up-3 docs-big-index">
  <div class="column"><a href="#">
    <strong>Link Title</strong>
    <p>Global styles applied by the Foundation framework.</p>
  </a></div>
  <div class="column"><a href="#">
    <strong>Link Title</strong>
    <p>An overview of Foundation's accessibility hooks.</p>
  </a></div>
  <div class="column"><a href="#">
    <strong>Link Title</strong>
    <p>Getting Foundation working with RTL languages.</p>
  </a></div>
</div>
```

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

### HTML Button Component

Source: https://github.com/foundation/foundation-docs/blob/master/test/fixtures/kitchen-sink.md

Demonstrates a basic HTML anchor tag styled as a button. This snippet shows the minimal markup required for a button component.

```html
<a class="button" href="#">Button</a>
```

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

### Displaying a Basic HTML Button

Source: https://github.com/foundation/foundation-docs/blob/master/test/fixtures/component.md

This snippet demonstrates a simple HTML button element with a class and type attribute. It's a fundamental UI component often used for user interaction.

```HTML
<button class="button" type="button">Button</a>
```

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

### JavaScript Component Methods

Source: https://github.com/foundation/foundation-docs/blob/master/test/output/index.html

Documents the public methods available for the component plugin.

```APIDOC
Methods:
  callbackFunction:
    Signature: $('#element').foundation('callbackFunction', cb);
    Description: This is a function with a callback parameter.
    Parameters:
      cb:
        Type: callbackFunctionCallback
        Description: Callback to run.
  sinceFunction:
    Signature: $('#element').foundation('sinceFunction', );
    Description: This function was added in a specific version.
  exampleFunction:
    Signature: $('#element').foundation('exampleFunction', );
    Description: This is a function with examples.
```

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

### JavaScript API Reference for foundation-docs

Source: https://github.com/foundation/foundation-docs/blob/master/README.md

Details the JavaScript objects and their functionalities provided by the `foundation-docs` library when required.

```APIDOC
foundationDocs.handlebars:
  An instance of a custom Handlebars renderer with all the helpful functions needed to generate documentation.

foundationDocs.marked:
  An instance of a custom Marked renderer with two custom functions:
    - When headings are written, an anchor icon is added to the left of the heading text.
    - When code samples are written:
      - If the language is `html_example`, a live rendering of the HTML in the sample is added.
      - If the language is `inky_example`, a live rendering of the HTML in the sample—within an iframe that loads the Ink CSS—is added.

foundationDocs.componentTemplate:
  A String path to the HTML template used for component pages.
  Path: node_modules/foundation-docs/templates/component.html
  General structure:
    - Title area
    - Main docs (converted Markdown)
    - Sass reference
    - JavaScript reference
    - Table of contents
```

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

### HTML Button Element

Source: https://github.com/foundation/foundation-docs/blob/master/test/output/component.html

A basic HTML button element with a 'button' class and 'button' type. This snippet demonstrates a simple interactive UI component.

```HTML
<button class="button" type="button">Button</a>
```

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

### JavaScript Method: callbackFunction with Callback Parameter

Source: https://github.com/foundation/foundation-docs/blob/master/test/output/component.html

This method allows execution of a custom callback function. It is invoked on an element with the Foundation plugin attached, passing the specified callback.

```JavaScript
$('#element').foundation('callbackFunction', cb);
```

```APIDOC
callbackFunction:
  Parameters:
    cb:
      Type: callbackFunctionCallback
      Description: Callback to run.
```

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

### Sass Functions for Component Logic

Source: https://github.com/foundation/foundation-docs/blob/master/test/output/index.html

Describes the utility functions available in Sass for the component.

```APIDOC
Functions:
  square:
    Signature: square($num)
    Description: Multiplies a number by itself.
    Parameters:
      $num:
        Type: Number
        Default Value: None
        Description: Number to square.
```

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

### Handlebars Template for Foundation Documentation Layout

Source: https://github.com/foundation/foundation-docs/blob/master/templates/component.html

This Handlebars template defines the overall structure and conditional rendering logic for documentation pages in the Foundation project. It includes conditional headers (video or standard), the main documentation content, and optional references to SASS and JavaScript documentation sections, along with a table of contents.

```Handlebars
{{#if video-hero}} {{> video-hero-header}} {{/if}} {{!-- Start container for docs and table of contents --}}

{{!-- Start container for docs --}}

{{#unless video-hero}} {{> header}} {{/unless}} {{ docs }} {{#if sass}}

* * *

{{> sass-reference}} {{/if}} {{#if js}}

* * *

{{> javascript-reference}} {{/if}} {{#if sass}} {{> building-blocks}} {{/if}}

{{!-- End container for docs --}}

{{> table-of-contents}}

{{!-- End container for docs and table of contents --}}
```

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

### Sass Mixins for Component CSS Output

Source: https://github.com/foundation/foundation-docs/blob/master/test/output/index.html

Details the Sass mixins used to build the component's CSS output. These mixins can be used to create custom class structures.

```APIDOC
Mixins:
  mixin-basic:
    Signature: @include mixin-basic($param1, $param2, $param3) { }
    Description: This is a mixin.
    Aliases: mixin-alias()
    Added In: 6.2
    Parameters:
      $param1:
        Type: Boolean
        Default Value: None
        Description: This is a required parameter.
      $param2:
        Type: Boolean
        Default Value: false
        Description: This is a parameter with a default value.
      $param3:
        Type: Number or List
        Default Value: 10px
        Description: This is a parameter with multiple types.
  mixin-deprecated:
    Signature: @include mixin-deprecated;
    Description: This is a deprecated mixin.
    Deprecated In: This mixin was replaced by `mixin-basic()` in version 6.2, and will be removed in 6.2.
```

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

### JavaScript Events for Component Plugin Interactions

Source: https://github.com/foundation/foundation-docs/blob/master/test/output/component.html

This section lists events that are fired from any HTML element with a Component plugin attached. These events provide hooks for custom behavior and interaction monitoring.

```APIDOC
Events:
  plugin.zf.init.zf:
    Description: Fires if the target element has the class after a toggle.
```

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

### JavaScript Component Events

Source: https://github.com/foundation/foundation-docs/blob/master/test/output/index.html

Lists the events fired by any element with a Component plugin attached.

```APIDOC
Events:
  plugin.zf.component:
    Description: Fires if the target element has the class after a toggle.
```

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

### Sass Mixin: mixin-basic Definition and Usage

Source: https://github.com/foundation/foundation-docs/blob/master/test/output/component.html

This mixin, added in Foundation 6.2, allows developers to build custom CSS class structures using component styles. It accepts three parameters, including required and optional types.

```Sass
@include mixin-basic($param1, $param2, $param3) { }
```

```APIDOC
mixin-basic:
  Aliases: mixin-alias()
  Parameters:
    $param1:
      Type: Boolean
      Default Value: None
      Description: This is a required parameter.
    $param2:
      Type: Boolean
      Default Value: false
      Description: This is a parameter with a default value.
    $param3:
      Type: Number or List
      Default Value: 10px
      Description: This is a parameter with multiple types.
```

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

### Sass Variables for Component Customization

Source: https://github.com/foundation/foundation-docs/blob/master/test/output/index.html

Defines the customizable Sass variables used to modify the default styles of the component. These variables can be overridden in the project's settings file.

```APIDOC
Variables:
  $var-basic:
    Type: Number
    Default Value: true
    Description: This is a basic variable.
  $var-multi:
    Type: Number or List
    Default Value: 10px
    Description: This is a variable with multiple types.
  $var-map:
    Type: Map
    Default Value: one: true   two: false   
    Description: This ia a map.
  $var-since:
    Type: Number
    Default Value: 10px
    Description: This is a variable with a changelog.
```

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

### Sass Variables Reference for Component Styling

Source: https://github.com/foundation/foundation-docs/blob/master/test/output/component.html

This section documents the customizable Sass variables used to modify the default styles of the component. These variables, including numbers, lists, and maps, are typically set in the project's settings file to control appearance.

```APIDOC
$var-basic:
  Type: Number
  Default Value: true
  Description: This is a basic variable.
$var-multi:
  Type: Number or List
  Default Value: 10px
  Description: This is a variable with multiple types.
$var-map:
  Type: Map
  Default Value: one: true   two: false
  Description: This ia a map.
$var-since:
  Type: Number
  Default Value: 10px
  Description: This is a variable with a changelog.
```

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

### Sass Mixin: mixin-deprecated Usage and Status

Source: https://github.com/foundation/foundation-docs/blob/master/test/output/component.html

This mixin is deprecated and will be removed in version 6.2, having been replaced by `mixin-basic()`. Developers should migrate to the newer mixin for future compatibility.

```Sass
@include mixin-deprecated;
```

```APIDOC
mixin-deprecated:
  Status: Deprecated in This mixin was replaced by `mixin-basic()` in version 6.2, and will be removed in 6.2.
```

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

### Sass Function: square for Number Multiplication

Source: https://github.com/foundation/foundation-docs/blob/master/test/output/component.html

A utility Sass function that multiplies a given number by itself. It takes a single number parameter and returns the squared value.

```Sass
square($num)
```

```APIDOC
square:
  Parameters:
    $num:
      Type: Number
      Default Value: None
      Description: Number to square.
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.