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