', :html %>

Here's a look at the available options for the mixins you need to create sections:

<%= code_example ' @include section-container($base-style, $section-type) { ... } /* Container Options */ /* This controls whether or not you include default styles when chaining classes, set to true or false */ $base-style: true /* This controls the style for the section you are using: accordion, tabs, vertical-tabs, vertical-nav, horizontal-nav */ $section-type: accordion @include section($section-type, $title-selector, $content-selector, $title-padding, $title-color, $title-font-size, $title-bg, $title-bg-hover, $title-bg-active, $title-color-active, $content-bg, $content-padding, $section-border-size, $section-border-style, $section-border-color) { ... } /* Section Options */ /* Control which section type styles come across: accordion, tabs, vertical-tabs, vertical-nav, horizontal-nav */ $section-type: accordion /* You can set the class that is used for the title elements */ $title-selector: ".title" /* You can set the class that is used for the content elements */ $content-selector: ".content" /* Give the titles some padding, can be any px or emCalc() value */ $title-padding: $section-padding /* give the titles a color, any color value */ $title-color: $section-title-color /* Set the font size for titles */ $title-font-size: $section-font-size /* Set the background color for titles */ $title-bg: $section-title-bg /* Change title background for hover */ $title-bg-hover: $section-title-bg-hover /* Change title background for .active */ $title-bg-active: $section-title-bg-active /* Change title color for .active */ $title-color-active: $section-title-color /* Content area background color */ $content-bg: $section-content-bg /* Content area padding */ $content-padding: $section-content-padding /* Border size in pixels */ $section-border-size: $section-border-size /* Border style */ $section-border-style: $section-border-style /* Border color */ $section-border-color: $section-border-color', :css %>

---

Auto Configuration

The default use case for our section plugin is to create accordions on small screens and tabs on large screens.

<%= code_example ' ', :html %> <%= code_example ' .section-auto-sample { @include section-container($section-type:accordion); & > section { @include section($section-type:accordion, $title-selector:".title-sample", $content-selector:".content-sample"); } @media #{$small} { @include section-container(false,$section-type:tabs); & > section { @include section($section-type:tabs, $title-selector:".title-sample", $content-selector:".content-sample"); } } }', :css %>

---

Accordion Configuration

You can have your section act like an accordion the entire time, like so:

<%= code_example ' ', :html %> <%= code_example ' .section-auto-sample-accordion { @include section-container($section-type:accordion); & > section { @include section($section-type:accordion, $title-selector:".title-sample", $content-selector:".content-sample"); } }', :css %>

---

Tabs Configuration

You can have your section act like tabs the entire time, like so:

<%= code_example ' ', :html %> <%= code_example ' .section-auto-sample-tabs { @include section-container($section-type:tabs); & > section { @include section($section-type:tabs, $title-selector:".title-sample", $content-selector:".content-sample"); } }', :css %>

---

Vertical Tabs Configuration

You can have your section act like vertical tabs on large screen and go back to accordion on small screens, like so:

<%= code_example ' ', :html %> <%= code_example ' .section-auto-sample-vtabs { @include section-container($section-type:accordion); & > section { @include section($section-type:accordion, $title-selector:".title-sample", $content-selector:".content-sample"); } } @media #{$small} { .section-auto-sample-vtabs { @include section-container($section-type:vertical-tabs); & > section { @include section($section-type:vertical-tabs, $title-selector:".title-sample", $content-selector:".content-sample"); } } }', :css %>

---

Vertical Nav Configuration

You can have your section act like vertical navigation the entire time, like so:

<%= code_example ' ', :html %> <%= code_example ' .nav-container { @include grid-row($behavior:nest); > nav { @include grid-column($columns:4); } } .section-auto-sample-vnav { @include section-container($section-type:accordion); & > section { @include section($section-type:accordion, $title-selector:".title-sample", $content-selector:".content-sample"); } } @media #{$small} { .section-auto-sample-vnav { @include section-container($section-type:vertical-nav); & > section { @include section($section-type:vertical-nav, $title-selector:".title-sample", $content-selector:".content-sample"); } } }', :css %>

---

Horizontal Nav Configuration

You can have your section act like horizontal navigation the entire time, like so:

<%= code_example ' ', :html %> <%= code_example ' .section-auto-sample-hnav { @include section-container($section-type:accordion); & > section { @include section($section-type:accordion, $title-selector:".title-sample", $content-selector:".content-sample"); } } @media #{$small} { .section-auto-sample-hnav { @include section-container($section-type:horizontal-nav); & > section { @include section($section-type:horizontal-nav, $title-selector:".title-sample", $content-selector:".content-sample"); } } }', :css %>

---

Custom Styles Using the Mixin

You have access to a few options that will make styling the sections really easy and you can add onto it as you want. You'll still need the data-section attribute to match the style you give the mixin.

<%= code_example ' ', :html %> <%= code_example ' .section-auto-sample-custom { @include section-container($section-type:tabs); & > section { @include section($section-type:tabs, $title-selector:".title-sample", $content-selector:".content-sample", $title-padding: 10px 50px, $title-color:#000, $title-bg:pink, $title-bg-hover:darken(pink,5%), $title-bg-active: #fff, $title-color-active: darken(pink,10%)); } }', :css %>

---

Default SCSS Variables

<%= code_example ' $include-html-section-classes: $include-html-classes !default; /* We use these to set padding and hover factor */ $section-title-padding: emCalc(15px); $section-content-padding: emCalc(15px); $section-function-factor: 10%; /* These style the titles */ $section-title-color: #333; $section-title-bg: #efefef; $section-title-bg-active: darken($section-title-bg, $section-function-factor); $section-title-bg-active-tabs: #fff; $section-title-bg-hover: darken($section-title-bg, $section-function-factor/2); /* Want to control border size, here ya go! */ $section-border-size: 1px; $section-border-style: solid; $section-border-color: #ccc; /* Font controls */ $section-font-size: emCalc(14px); /* Control the color of the background and some size options */ $section-content-bg: #fff; $section-vertical-nav-min-width: emCalc(200px); $section-vertical-tabs-title-width: emCalc(200px); $section-bottom-margin: emCalc(20px); $title-selector: ".title"; $content-selector: ".content"; ', :css %>

Note: emCalc(); is a function we wrote to convert px to em.

---

Using the JavaScript

You'll need to include zepto.js and foundation.js above the sections plugin. Above your closing </body> tag include the following line of code and make sure you have the JS in your directory.

Read how to install Foundation JavaScript

Required Foundation Library: foundation.section.js

Then, you'll need to add a data-attribute to make the JS work properly on that element. That looks like:

<%= code_example ' ', :html %>

Note: If you are using Sections in a Modal, or they are being loaded via AJAX, or they are hidden when Foundation is initialized, you will need to reflow the sections to get tabs to display properly:

<%= code_example " $('#myModal').on('opened', function () { $(this).foundation('section', 'reflow'); }); ", :json %>

Optional JavaScript Configuration

You can either set these options in a data-options attribute in the markup, data-options="option: value; option2: value syntax", or pass in on initialization.

<%= code_example " { deep_linking: false, one_up: true, rtl: false, callback: function (){} }", :js %>