Foundation

Javascripts

All about the JS that supports Foundation. We swear it's not black magic.

Some components of Foundation require a little javascript to make them work correctly. For example the dropdown buttons use javascript to toggle the dropdown on and off. To keep things clean we've extracted this behavior into several plugins. We then provide a single app.js file where we initialize these plugins for your project. The default download package will take care of initializing everything for you, but you can find out more about each plugin on the component documentation pages.


Our Javascript Offerings

We include four main jQuery Plugins that will help you build helpful interactions and other jQuery files that help with our UI elements.
Orbit
A powerful image or content slider that works responsively and includes tons of useful options like: timers, paddles, bullet thumbs and more.
Reveal
You can easily call modals without writing any JS, even spawn subsequent modals cleanly on the same page. Reveal works across devices.
Clearing
Show off your images in style with our easy to use gallery plugin. It's built with simple unordered lists that can be styled to your hearts content.
Magellan
A flexible sticky navigation that knows where you are on the page. You just tell it what to recognize and set it asail.
Joyride
A really easy plugin for creating feature tours on your website or app.
Our Other Javascripts
We also include a list of other javascript files that help build interactions for our UI elements. Read some details about these below in our table of files.

What's included in a new project?

The default Scss gem or CSS download of Foundation comes with lots of helpful javascript, these file include:

File Name Description Init Script
jquery.js We're currently using jQuery 1.8.1 for all of our JS.
jquery.foundation.alerts.js Adds the ability to close alerts $(document).foundationAlerts();
jquery.foundation.buttons.js Adds dropdown functionality for dropdown buttons and split buttons $(document).foundationButtons();
jquery.foundation.accordion.js Add open/close functionality to accordions $(document).foundationAccordion();
jquery.foundation.navigation.js Adds functionality to navigation elements $(document).foundationNavigation();
jquery.foundation.topbar.js Adds functionality for the top bar $(document).foundationTopBar();
jquery.foundation.forms.js Adds ability to create custom form elements $(document).foundationCustomForms();
jquery.foundation.mediaQueryToggle.js Adds helpful media query viewer tool $(document).foundationMediaQueryViewer();
jquery.foundation.tabs.js Adds toggle capability to tabs $(document).foundationTabs();
jquery.foundation.tooltips.js Adds tooltips functionality $(document).foundationTooltips();
jquery.placeholder.js Adds placeholder functions to forms $('input, textarea').placeholder();
jquery.foundation.orbit.js Our custom image/content slider plugin
jquery.foundation.reveal.js Our simple modal plugin
jquery.foundation.clearing.js Our new image gallery plugin
jquery.foundation.magellan.js Our sweet new sticky nav plugin.
jquery.foundation.joyride.js An awesome feature tour plugin.

Where are the javascripts placed?

Depending on how you're using Foundation the Javascript may reside in different places. Refer to one of the installation methods below for more specific information:

via Compass

When setup with Compass the javascripts are copied over to javascripts/foundation folder. There is no compressed version when using the Compass gem.

via Customizer

The customizer provides two sets of Javascript files in the resulting project. There is a javascripts/foundation.min.js that includes all the plugins selected, in addition to jQuery and Modernizr. All the uncompressed Javascripts are also placed in javascripts/ in case you want to make changes and compress them yourself.

via Rails

The Foundation gem delivers all the assets through the asset pipeline. All you need to do is include //= require foundation in your app/assets/javascripts/application.js file and you're all set. When you update the Foundation gem the new Javascript files will automatically be used in your project.

Orbit to the Moon

We created Orbit to make it really easy for you to create a slider our of images or content divs. You can have captions, thumbs and more!
Learn about Orbit »

Grab the copy of Foundation best for you, whether that's Scss or CSS, everything or just bits and pieces.

Install Foundation

Awesome product jobs:
via ZURBjobs