Core
-
core.css
- Normalize, Font Awesome
-
Foundation
- Grid
- Accordion
- Alerts
- Block Grid
- Breadcrumbs
- Button Groups
- Buttons
- Dropdowns
- Dropdown Buttons
- Flex Video
- Forms
- Icon Bar
- Inline Lists
- Keystrokes
- Labels
- Magellan
- Pagination
- Panels
- Pricing Tables
- Progress Bars
- Range Slider
- Reveal
- Side Nav
- Switches
- Tables
- Tabs
- Thumbs
- Tooltips
- Offcanvas
- Visibility
-
core.js
- Modernizr, jQuery, FastClick, Mustache, Underscore, jQuery Placeholder, jQuery Cookie
-
Foundation
- Abide
- Accordion
- Alert
- Dropdown
- Equalizer
- Magellan
- Offcanvas
- Reveal
- Tabs
- Tooltips
- Topbar
Usage
%link(rel="stylesheet" href="//ui.red.com/0.5.2/assets/stylesheets/core.css")
%script(type="text/javascript" href="//ui.red.com/0.5.2/assets/javascripts/core.js")
Initializing Foundation Components
All Foundation components can be initialized by a single call. It is recommended that you initialize components at the end of the page %body
.
do ->
$(document).foundation()
Configuration
Foundation offers you options to customize plugin initialization. By default, calling $('#scope').foundation();
will initialize all available plugins on the page. Alternatively, you can pass individual plugins along with configuration options and a callback. This way, you can select which plugins you want to customize, and which are fine by default.
do ->
$(document).foundation
tabs:
toggleable: false
If you add new content after the page has been loaded, you will need to reinitialize the Foundation javascript. For more details and to see all Javascript configuration options, visit the Foundation Docs.