Manifests

Each RED UI manifest is comprised of various CSS and Javascript libraries. The dependencies for each library are concatenated and minified into their manifest and loaded via our CDN.


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.


Enhance

enhance.css
Fancybox, BigVideo, jScrollPane, bxSlider
enhance.js
Fancybox, BigVideo, jScrollPane, bxSlider, jQuery LazyLoad

Usage

%link(rel="stylesheet" href="//ui.red.com/0.5.2/assets/stylesheets/enhance.css")
%script(type="text/javascript" href="//ui.red.com/0.5.2/assets/javascripts/enhance.js")


animate.css
FullPage
animate.js
jQuery Transit, SnapSVG, FullPage, Waypoints

Usage

%link(rel="stylesheet" href="//ui.red.com/0.5.2/assets/stylesheets/animate.css")
%script(type="text/javascript" href="//ui.red.com/0.5.2/assets/javascripts/animate.js")