boostbob

module BootstrapPaginationHelper
	class LinkRenderer < WillPaginate::ActionView::LinkRenderer
		protected
    
      def page_number(page)
        unless page == current_page
          link(page, page, :rel => rel_value(page))
        else
          link(page, "#", :class => 'active')
        end

boostbob

named_queries : {
  'default' : 'only screen and (min-width: 1px)',
  small : 'only screen and (min-width: 768px)',
  medium : 'only screen and (min-width: 1280px)',
  large : 'only screen and (min-width: 1440px)',
  landscape : 'only screen and (orientation: landscape)',
  portrait : 'only screen and (orientation: portrait)',
  retina : 'only screen and (-webkit-min-device-pixel-ratio: 2),'
    + 'only screen and (min--moz-device-pixel-ratio: 2),'
    + 'only screen and (-o-min-device-pixel-ratio: 2/1),'

boostbob

resize : function () {
      var cache = this.cache;

      for (var uuid in cache) {
        if (cache.hasOwnProperty(uuid)) {
          var passed = this.results(uuid, cache[uuid]);

          if (passed) {
            this.settings.directives[passed
              .scenario[1]](passed.el, passed.scenario[0]);

boostbob

loaded : function (image, last, callback) {
      function loaded () {
        callback(image[0], last);
      }

      function bindLoad () {
        this.one('load', loaded);

        if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
          var src = this.attr( 'src' ),

boostbob

uuid : function (separator) {
      var delim = separator || "-";

      function S4() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
      }

      return (S4() + S4() + delim + S4() + delim + S4()
        + delim + S4() + delim + S4() + S4() + S4());
    },

boostbob

<img data-interchange="[http://foundation.zurb.com/docs/img/demos/interchange/smallest.jpg, (default)], 
  		[http://foundation.zurb.com/docs/img/demos/interchange/smallest.jpg, (screen and (max-width: 568px))], 
			[http://foundation.zurb.com/docs/img/demos/interchange/small.jpg, (small)], 
			[http://foundation.zurb.com/docs/img/demos/interchange/large.jpg, (large)]" 
      src="http://foundation.zurb.com/docs/img/demos/interchange/small.jpg" 
      data-uuid="c78d3e8b-0142-34af-30d3-5afdcb4c42b6"
>

boostbob

<div class="row">
  	<div class="large-12 columns">
			<img src="http://foundation.zurb.com/docs/img/demos/interchange/smallest.jpg" 
				data-interchange="[http://foundation.zurb.com/docs/img/demos/interchange/smallest.jpg, (default)], 
            					  [http://foundation.zurb.com/docs/img/demos/interchange/smallest.jpg, (screen and (max-width: 568px))], 
						  [http://foundation.zurb.com/docs/img/demos/interchange/small.jpg, (small)], 
						  [http://foundation.zurb.com/docs/img/demos/interchange/large.jpg, (large)]">
		</div>
	</div>

boostbob

<script> document.write('<script src=' + ('__proto__' in {} ? 'javascripts/vendor/zepto' : 'javascripts/vendor/jquery') + '.js><\/script>') </script>
<script src="javascripts/foundation/foundation.js"></script>
<script src="javascripts/foundation/foundation.interchange.js"></script>
<script> $(document).foundation(); </script>

boostbob

$(document).foundation('interchange', {   
  named_queries : {   
    my_custom_query : 'only screen and (max-width: 200px)'   
  } 
}); 

boostbob

<img src="/path/to/default.jpg" 
  data-interchange="[image_path, (screen and only (min-width: 640px) and (-webkit-min-device-pixel-ratio: 2))]" 
/>