Menu icon Foundation
[plugin]: block-grid target-width

Screen shot 2014 06 09 at 22.33.08

I have created a simple javascript plugin, which extends the Foundation block-grid component. Instead of setting a static large-3 medium-2 small-1 grid for the block-grid, this plugin allows you to set a column target-width, so that the grid expands dynamically per screen width. The plugin responds to window.resize, and will automatically detect the max amount of elements. The plugin is very effective for progressive layout of image thumbnails etc.

Codepen:
http://codepen.io/mjau-mjau/full/BgtIK/

Real-life demos:
http://mjau-mjau.com/concepts/grid/grid-300/
http://mjau-mjau.com/concepts/grid/thumbnails/
http://mjau-mjau.com/concepts/grid/wall/
http://mjau-mjau.com/concepts/grid/cards/

/* BLOCK TARGET WIDTH FUNCTION - simply include the below into your javascript */
;(function ($, window, document, undefined) {
  'use strict';
  
  var blocks;
  var w;
  
  // Update the block-grid
  $.fn.updateBlockGrid = function(width) {
    w = (width === undefined) ? w : width;
    var l = $(this).find("li").length; 
    if(blocks != null) $(this).removeClass('small-block-grid-' + blocks); 
    blocks = Math.min(l, 12, Math.max(1, Math.round($(this).innerWidth()/(w))));
      $(this).addClass('small-block-grid-' + blocks);
  }
  
  // Read data-options, and set block grid based on target width
  var el = Foundation.utils.S("ul[data-options*='block_width']");
  if(el.length) {
    var s = Foundation.utils.data_options(el).block_width;
    if(s !== undefined){
      var w = (s.length === 0) ? 300 : parseInt(s);
      $(window).on('resize.block-grid', Foundation.utils.debounce(function(e){
        el.updateBlockGrid(w);
		 }, 200, false));
      el.updateBlockGrid(w);
    }
  }
  
 }(jQuery, this, this.document));

// Just add data-options="block_width:[target width]" to your UL list element

<ul data-options="block_width:300">
    <li>...</li>
    ...
</ul>            

         

pluginjavascriptblock-grid

Screen shot 2014 06 09 at 22.33.08

I have created a simple javascript plugin, which extends the Foundation block-grid component. Instead of setting a static large-3 medium-2 small-1 grid for the block-grid, this plugin allows you to set a column target-width, so that the grid expands dynamically per screen width. The plugin responds to window.resize, and will automatically detect the max amount of elements. The plugin is very effective for progressive layout of image thumbnails etc.

Codepen:
http://codepen.io/mjau-mjau/full/BgtIK/

Real-life demos:
http://mjau-mjau.com/concepts/grid/grid-300/
http://mjau-mjau.com/concepts/grid/thumbnails/
http://mjau-mjau.com/concepts/grid/wall/
http://mjau-mjau.com/concepts/grid/cards/

/* BLOCK TARGET WIDTH FUNCTION - simply include the below into your javascript */
;(function ($, window, document, undefined) {
  'use strict';
  
  var blocks;
  var w;
  
  // Update the block-grid
  $.fn.updateBlockGrid = function(width) {
    w = (width === undefined) ? w : width;
    var l = $(this).find("li").length; 
    if(blocks != null) $(this).removeClass('small-block-grid-' + blocks); 
    blocks = Math.min(l, 12, Math.max(1, Math.round($(this).innerWidth()/(w))));
      $(this).addClass('small-block-grid-' + blocks);
  }
  
  // Read data-options, and set block grid based on target width
  var el = Foundation.utils.S("ul[data-options*='block_width']");
  if(el.length) {
    var s = Foundation.utils.data_options(el).block_width;
    if(s !== undefined){
      var w = (s.length === 0) ? 300 : parseInt(s);
      $(window).on('resize.block-grid', Foundation.utils.debounce(function(e){
        el.updateBlockGrid(w);
		 }, 200, false));
      el.updateBlockGrid(w);
    }
  }
  
 }(jQuery, this, this.document));

// Just add data-options="block_width:[target width]" to your UL list element

<ul data-options="block_width:300">
    <li>...</li>
    ...
</ul>            

         
Rafi Benkual about 5 years ago

Wow, this is pretty sweet! Thanks for sharing! How about a PR? Lots of people can use this!