A simple UIkit component for toggling classes at breakpoints.

uikit-queries.js

/*
 * UIkit Queries
 * Requires jQuery.
 * Built by @jakebown1
 * -------------------------------
 * UIkit.component('hello', __caller(<min-width>, <max-width>);
 * -------------------------------
 * <div uk-hello="my_class"></div> 
 */

function __caller($minWidth, $maxWidth) {
    return {

        props: {
            maxWidth: Number,
            pageWidth: Number,
            removeAttr: String
        },

        defaults: {
            maxWidth: $maxWidth,
            minWidth: $minWidth,
            pageWidth: function() { return window.innerWidth; },
            removeAttr: ['uk-xs', 'uk-sm', 'uk-md', 'uk-lg', 'uk-xl']
        },

        update: {

            read: function read() {
            
                this.classes = $(this.$el).attr(this.$name);
                if(this.pageWidth() <= this.maxWidth && this.pageWidth() >= this.minWidth) {

                    for (var i = this.removeAttr.length - 1; i >= 0; i--) {
                        if(this.removeAttr[i] !== this.$name) {
                            $(this.$el).removeClass($(this.$el).attr(this.removeAttr[i]));
                        }
                    }

                    $(this.$el).addClass(this.classes);
                }

            },

            events: ['load', 'resize']
        }

    };
};

/*
 * Some Presets.
 */
UIkit.component('xs', __caller(0, 320));
UIkit.component('sm', __caller(321, 640));
UIkit.component('md', __caller(641, 768));
UIkit.component('lg', __caller(769, 960));
UIkit.component('xl', __caller(961, 10000));