DOCSEARCHbyAlgolia
Submit Docs

Foundation for Sites

repository·develop·Indexed 12 days ago

https://github.com/foundation/foundation-sites

A responsive front-end framework providing a customizable grid, Sass mixins, JavaScript plugins, and accessibility support for building modern websites and applications. Version 6.9.0 includes the Abide form validation plugin and a customizer package for programmatically generating Sass and JavaScript entry points.

Tokens
100.1K
Snippets
386
Records
425
Agent score
98%

What's inside Foundation for Sites

  1. Browser and device compatibility for Foundation Sites

    develop

    Foundation Sites is tested across a wide range of browsers and devices. It maintains support for older environments like Internet Explorer 9 and Android 4.4.

    Supported Browsers

    • Chrome, Firefox, Safari, Opera, Edge: Last two versions.
    • Mobile Safari: iOS 7+ (Note: iOS 7+ is actively supported but may have some known bugs).
    • IE Mobile: Supported.
    • Internet Explorer: Versions 9 and above.
    • Android Browser: Versions 4.4 and above.

  2. Understand Foundation for Sites default breakpoints

    develop

    Foundation for Sites uses three core breakpoints to manage responsive layouts:

    • Small: Any screen size.
    • Medium: 640 pixels or larger.
    • Large: 1024 pixels or larger.

    Many components use breakpoint classes (e.g., .small-6, .medium-4) to adjust behavior at different sizes. If you are using the compiled CSS version of Foundation, you can replicate these breakpoints using the following media queries:

    /* Small only */
@media screen and (max-width: 39.9375em) {}

/* Medium and up */
@media screen and (min-width: 40em) {}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {}

/* Large and up */
@media screen and (min-width: 64em) {}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {}
    <div class="grid-x grid-margin-x">
  <div class="cell small-6 medium-4"></div>
  <div class="cell small-6 medium-8"></div>
</div>

  3. Configure deep linking and browser history for tabs

    develop

    You can synchronize the tab state with the browser URL using the following attributes on the tabstrip (<ul>):

    • data-deep-link="true": Enables deep linking. This allows users to open a specific tab by navigating to a URL with a hash (e.g., example.com/#panel-id). It also modifies the browser history when a tab is clicked.
    • data-update-history="true": By default, tabs use history.replaceState() to update the URL. Setting this to true uses history.pushState(), which appends the new tab to the browser history, allowing the back button to navigate through previously opened tabs.
    • data-deep-link-smudge="true": When a user arrives via a deep link, this attribute causes the page to scroll up slightly so the tabstrip is positioned at the top of the viewport.
    • data-deep-link-smudge-delay="ms": Specifies the delay (in milliseconds) before the smudge scroll occurs.
    <ul class="tabs" 
    data-deep-link="true" 
    data-update-history="true" 
    data-deep-link-smudge="true" 
    data-deep-link-smudge-delay="500" 
    data-tabs 
    id="deeplinked-tabs">
  <li class="tabs-title is-active"><a href="#panel1d">Tab 1</a></li>
  <li class="tabs-title"><a href="#panel2d">Tab 2</a></li>
</ul>

<div class="tabs-content" data-tabs-content="deeplinked-tabs">
  <div class="tabs-panel is-active" id="panel1d">Panel 1</div>
  <div class="tabs-panel" id="panel2d">Panel 2</div>
</div>

  4. Advanced Sizing: Expand and Shrink behaviors

    develop

    The Flex Grid provides flexible sizing behaviors beyond fixed percentages:

    1. Expand Behavior: If no sizing class is added to a column, it automatically expands to fill the remaining space in the row. If multiple columns have no sizing class, they share the leftover space equally.
    2. Shrink Behavior: Adding the .shrink class makes a column only take up the horizontal space required by its content.

    Expand Example:

    <div class="row">
  <div class="columns small-4">4 columns</div>
  <div class="columns">Whatever's left!</div>
</div>

    Multiple Expanding Columns:

    <div class="row">
  <div class="columns small-4">4 columns</div>
  <div class="columns">Whatever's left!</div>
  <div class="columns">Whatever's left!</div>
</div>

    Shrink and Expand Example:

    <div class="row">
  <div class="columns shrink">Shrink!</div>
  <div class="columns">Expand!</div>
</div>

  5. Understand label text color logic

    develop

    The text color for a label is automatically determined by the contrast between the background and the text. Foundation uses either the $label-color or $label-color-alt Sass variables, selecting whichever provides better contrast for the specific label color.

    Note on Accessibility: The default settings are designed to meet WCAG 2.0 level AA contrast requirements. If you manually set $label-color and $label-color-alt to the same value to force a specific text color, you may decrease the accessibility of your labels.

  6. How Panini templates, pages, and partials work together

    develop

    Panini is a flat file compiler powered by Handlebars that uses three core concepts to build static sites:

    1. Templates: Common layouts shared by pages (e.g., src/layouts/default.html). Templates use the {{> body}} syntax to define where page content will be injected.
    2. Pages: The unique content for specific URLs (e.g., src/pages/index.html). Pages contain only the inner HTML and are injected into the template's {{> body}} placeholder.
    3. Partials: Reusable chunks of HTML (e.g., src/partials/header.html) that can be injected anywhere using the {{> partial_name}} syntax.

    When Panini runs, it assembles these pieces into complete HTML files in a distribution folder (usually dist).

    <!-- Template (src/layouts/default.html) -->
<html>
  <body>
    {{> header}}
    {{> body}}
    {{> footer}}
  </body>
</html>

<!-- Page (src/pages/index.html) -->
<h1>Page Title</h1>
<p>Content goes here.</p>

  7. Pass options to Responsive Accordion Tabs

    develop

    The Responsive Accordion Tabs plugin supports standard Foundation plugin initialization. You can pass options via:

    1. Individual data-* attributes on the HTML element.
    2. A single data-options attribute containing a JSON object.
    3. An options object passed to the plugin's JavaScript constructor.

    Note: All configuration options available for the standard Accordion or Tabs plugins are valid and can be passed through to the underlying component.

  8. Control CSS output using export mixins

    develop

    Foundation provides export mixins that allow you to include only the specific components you need, which helps reduce CSS file size in production.

    To include every component and class, use:

    @include foundation-everything;

    Alternatively, you can import the framework and then selectively @include specific component mixins. Common mixins include:

    • Global Styles: foundation-global-styles, foundation-forms, foundation-typography
    • Grids: foundation-xy-grid-classes, foundation-grid, foundation-flex-grid
    • Components: foundation-button, foundation-badge, foundation-card, foundation-dropdown, foundation-menu, foundation-reveal, etc.
    • Helpers: foundation-float-classes, foundation-visibility-classes
    @import 'foundation';

// Example: Only including specific components
@include foundation-global-styles;
@include foundation-button;
@include foundation-xy-grid-classes;

  9. How Flexbox Utilities work with parents and children

    develop

    Foundation's Flexbox utilities rely on the relationship between a flex parent (an element with display: flex) and its flex children (the immediate children of that parent).

    • Flex Parent: Controls the alignment of all its children using properties like justify-content (horizontal) and align-items (vertical).
    • Flex Child: Can be aligned individually relative to its parent using align-self.

    When using the XY Grid, a grid-x or grid-y element acts as the flex parent, and a cell acts as the flex child. While these classes also work with the Legacy Flex Grid's row and column classes, it is recommended to use XY Grid as the legacy system is deprecated in Foundation 7.

    <div class="grid-x grid-padding-x">
  <div class="cell small-4">Cell 1</div>
  <div class="cell small-4">Cell 2</div>
  <div class="cell small-4">Cell 3</div>
</div>

  10. How to nest Equalizers

    develop

    You can use an Equalizer inside another Equalizer by ensuring each container has a unique ID assigned via the data-equalizer attribute. To link a child element to a specific parent equalizer, the data-equalizer-watch attribute must contain the value of that parent's ID.

    Key requirements for nesting:

    1. The parent container needs data-equalizer="unique_id".
    2. The elements being watched by the parent need data-equalizer-watch="unique_id".
    3. If a watched element is itself a container for a new equalizer group, it needs data-equalizer="new_id" and its own children need data-equalizer-watch="new_id".
    <div class="grid-x" data-equalizer="foo">
  <div class="cell medium-4" data-equalizer-watch="foo">
    <div class="callout" data-equalizer-watch="foo" data-equalizer="bar">
      <h3 class="parent-panel">Parent panel</h3>
      <div class="callout" data-equalizer-watch="bar"></div>
      <div class="callout" data-equalizer-watch="bar"></div>
      <div class="callout" data-equalizer-watch="bar"></div>
    </div>
  </div>
  <div class="cell medium-4">
    <div class="callout panel" data-equalizer-watch="foo"></div>
  </div>
  <div class="cell medium-4">
    <div class="callout" data-equalizer-watch="foo"></div>
  </div>
</div>

  11. Use absolute positioning for Off-canvas

    develop

    By default, Off-canvas panels use position: fixed relative to the viewport. To use position: absolute instead, add the class .off-canvas-absolute to the .off-canvas container. When using absolute positioning, you must also use an .off-canvas-wrapper to contain the elements.

    <div class="off-canvas-wrapper">
  <div class="off-canvas-absolute position-left" id="offCanvasLeftSplit1" data-off-canvas>
    <!-- Content -->
  </div>
  <div class="off-canvas-content" data-off-canvas-content>
    <!-- Content -->
  </div>
</div>

  12. Configure form error messages

    develop

    Abide detects error messages by looking for elements with the .form-error class that are siblings of the input or contained within the same parent.

    Linking errors to inputs

    If an error message cannot be a direct sibling (e.g., inside an Input Group), use the data-form-error-for attribute on the error element to link it to the input's id.

    Validator-specific messages

    You can provide different messages for different validation failures using the data-form-error-on attribute. Supported validator names include required, pattern, equalTo, and any custom validator names you define.

    Summary of error attributes:

    • data-form-error-for="[input-id]": Links a non-sibling error message to an input.
    • data-form-error-on="[validator-name]": Specifies which validation failure this message applies to.
    <!-- Linking error to an input in an input group -->
<div class="input-group">
  <span class="input-group-label">$</span>
  <input class="input-group-field" id="amountInput" type="number" required />
</div>
<label class="form-error" data-form-error-for="amountInput">Amount is required.</label>

<!-- Specific messages for different errors -->
<input type="text" required pattern="email">
<span class="form-error" data-form-error-on="required">Email is required.</span>
<span class="form-error" data-form-error-on="pattern">Invalid email format.</span>