Lego2012
9/26/2016 - 10:18 PM

Dynamic Grid Gutter

Dynamic Grid Gutter

(function($, UI) {
  var controls, grid, filters;

  function filterGrid() {
    filters = [];
    controls.filter('.uk-active').each(function() {
      var filter = $(this).data('ukFilter');
      if (filter !== '') filters.push(filter)
    });
    grid.filter(filters.join(','));
  }

  UI.ready(function() {
    controls = $('[data-uk-filter]');
    grid = UI.grid('#grid', {gutter: 20});

    controls.on('click', function(e) {
      e.preventDefault();
      $(this).addClass('uk-active').siblings().removeClass('uk-active')
      filterGrid();
    });
    filterGrid();


    //just to show the UIkit version in this pen
    UI.$body.prepend('<div class="uk-float-right uk-badge">UIkit version: ' + UIkit.version + '</div>');
  });
}(UIkit.$, UIkit));
.uk-container.uk-container-center
  h1.uk-margin-top Dynamic grid multifilter
  // Filter Controls
  ul.grid-filter.uk-subnav.uk-subnav-pill
    li.uk-active(data-uk-filter='')
      a(href='') All
    li(data-uk-filter='box')
      a(href='') Box
    li(data-uk-filter='box-primary')
      a(href='') Box primary
    li(data-uk-filter='box-secondary')
      a(href='') Box secondary
  ul.grid-filter.uk-subnav.uk-subnav-pill
    li.uk-active(data-uk-filter='')
      a(href='') All
    li(data-uk-filter='badge')
      a(href='') Badge
    li(data-uk-filter='badge-warning')
      a(href='') Badge warning
    li(data-uk-filter='badge-danger')
      a(href='') Badge danger
  ul.grid-filter.uk-subnav.uk-subnav-pill
    li.uk-active(data-uk-filter='')
      a(href='') All
    li(data-uk-filter='button')
      a(href='') Button
    li(data-uk-filter='button-primary')
      a(href='') Button primary
    li(data-uk-filter='button-success')
      a(href='') Button success
  // Dynamic Grid
  #grid.uk-grid.uk-grid-small.uk-grid-width-1-3
    div(data-uk-filter='box,badge,button')
      .uk-panel.uk-panel-box
        .uk-panel-badge.uk-badge Badge
        p Box
        button.uk-button Button
    div(data-uk-filter='box-primary,badge-warning,button-primary')
      .uk-panel.uk-panel-box.uk-panel-box-primary
        .uk-panel-badge.uk-badge.uk-badge-warning Badge warning
        p Box primary
        button.uk-button.uk-button-primary Button primary
    div(data-uk-filter='box-secondary,badge-danger,button-success')
      .uk-panel.uk-panel-box.uk-panel-box-secondary
        .uk-panel-badge.uk-badge.uk-badge-danger Badge danger
        p Box secondary
        button.uk-button.uk-button-success Button success
    div(data-uk-filter='box,badge-warning,button')
      .uk-panel.uk-panel-box
        .uk-panel-badge.uk-badge.uk-badge-warning Badge warning
        p Box
        button.uk-button Button
    div(data-uk-filter='box,badge,button-success')
      .uk-panel.uk-panel-box
        .uk-panel-badge.uk-badge Badge
        p Box
        button.uk-button.uk-button-success Button success
    div(data-uk-filter='box,badge-danger,button-success')
      .uk-panel.uk-panel-box
        .uk-panel-badge.uk-badge.uk-badge-danger Badge danger
        p Box
        button.uk-button.uk-button-success Button success
    div(data-uk-filter='box,badge-danger,button-primary')
      .uk-panel.uk-panel-box
        .uk-panel-badge.uk-badge.uk-badge-danger Badge danger
        p Box
        button.uk-button.uk-button-primary Button primary
    div(data-uk-filter='box,badge,button-primary')
      .uk-panel.uk-panel-box
        .uk-panel-badge.uk-badge Badge
        p Box
        button.uk-button.uk-button-primary Button primary
    div(data-uk-filter='box-primary,badge-warning,button')
      .uk-panel.uk-panel-box.uk-panel-box-primary
        .uk-panel-badge.uk-badge.uk-badge-warning Badge warning
        p Box primary
        button.uk-button Button
    div(data-uk-filter='box-primary,badge,button-success')
      .uk-panel.uk-panel-box.uk-panel-box-primary
        .uk-panel-badge.uk-badge Badge
        p Box primary
        button.uk-button.uk-button-success Button success
    div(data-uk-filter='box-primary,badge-danger,button-success')
      .uk-panel.uk-panel-box.uk-panel-box-primary
        .uk-panel-badge.uk-badge.uk-badge-danger Badge danger
        p Box primary
        button.uk-button.uk-button-success Button success
    div(data-uk-filter='box-primary,badge-danger,button-primary')
      .uk-panel.uk-panel-box.uk-panel-box-primary
        .uk-panel-badge.uk-badge.uk-badge-danger Badge danger
        p Box primary
        button.uk-button.uk-button-primary Button primary
    div(data-uk-filter='box-primary,badge,button-primary')
      .uk-panel.uk-panel-box.uk-panel-box-primary
        .uk-panel-badge.uk-badge Badge
        p Box primary
        button.uk-button.uk-button-primary Button primary
    div(data-uk-filter='box-secondary,badge-warning,button')
      .uk-panel.uk-panel-box.uk-panel-box-secondary
        .uk-panel-badge.uk-badge.uk-badge-warning Badge warning
        p Box
        button.uk-button Button
    div(data-uk-filter='box-secondary,badge,button-success')
      .uk-panel.uk-panel-box.uk-panel-box-secondary
        .uk-panel-badge.uk-badge Badge
        p Box
        button.uk-button.uk-button-success Button success
    div(data-uk-filter='box-secondary,badge-danger,button-success')
      .uk-panel.uk-panel-box.uk-panel-box-secondary
        .uk-panel-badge.uk-badge.uk-badge-danger Badge danger
        p Box
        button.uk-button.uk-button-success Button success
    div(data-uk-filter='box-secondary,badge-danger,button-primary')
      .uk-panel.uk-panel-box.uk-panel-box-secondary
        .uk-panel-badge.uk-badge.uk-badge-danger Badge danger
        p Box
        button.uk-button.uk-button-primary Button primary
    div(data-uk-filter='box-secondary,badge,button-primary')
      .uk-panel.uk-panel-box.uk-panel-box-secondary
        .uk-panel-badge.uk-badge Badge
        p Box
        button.uk-button.uk-button-primary Button primary