Como asignarle a un elementouna clase antes de la carga de la pagina

[ann_eav]

Estoy diseñando una interfaz para una plataforma de gestión, esta posee un sidebar que cambia de tamaño según la resolución, es decir, cuando la resolución es inferior a 800px, debe esconderse el texto y mostrar sólo iconos, se hace más pequeña para dejar espacio al contenido principal. El problema es que no se cómo hacer para que antes de pintar la plataforma detecte si tiene que aparecer desplegada o no.

Actualmente la barra carga sin desplegar y si detecta que el espacio es mayor a 800px se quita la clase que lo colapsa. Pero no me parece que sea atractivo. Me gustaría que antes de pintar la web se comprobase el viewport para que al recorrer los elementos del DOM al sidebar se le asignara la clasee correcta para aparecer colapsado o no. He intentado hacerlo con javascript antes de la carga del body, pero, si no carga el body el elemento no existe en el árbol y no puedo cambiar la clase.

el menú está basado en metismenu

Código:

(function ($, window, document, undefined) {

var pluginName = "metisMenu",
    defaults = {
        toggle: true
    };

function Plugin(element, options) {
    this.element = element;
    this.settings = $.extend({}, defaults, options);
    this._defaults = defaults;
    this._name = pluginName;
    this.init();
}

Plugin.prototype = {
    init: function () {

        var $this = $(this.element),
            $toggle = this.settings.toggle;

        $this.find('li.active').has('ul').children('ul').addClass('collapse in');
        $this.find('li').not('.active').has('ul').children('ul').addClass('collapse');

        $this.find('li').has('ul').children('a').on('click', function (e) {
            e.preventDefault();

            $(this).parent('li').toggleClass('active').children('ul').collapse('toggle');

            if ($toggle) {
                $(this).parent('li').siblings().removeClass('active').children('ul.in').collapse('hide');
            }
        });
    }
};

$.fn[ pluginName ] = function (options) {
    return this.each(function () {
        if (!$.data(this, "plugin_" + pluginName)) {
            $.data(this, "plugin_" + pluginName, new Plugin(this, options));
        }
    });
};

})(jQuery, window, document);

$('#side-menu').metisMenu();

$(window).bind("load resize", function () {
    if ($(this).width() < 780) {
        $('body').removeClass('left-side-collapsed');
        $('.navbar-header').removeClass('logo-collapsed');
        $('div.sidebar-collapse').addClass('collapse');
        $('#sidebar').css('height', 'auto');
    } else if ($(this).width() < 1199) {
        $('div.sidebar-collapse').removeClass('collapse');
        $('#sidebar').css('height', 'auto');
        $('body').addClass('left-side-collapsed');
        $('.navbar-header').addClass('logo-collapsed');
        reloadStatistics();
    } else {
        $('div.sidebar-collapse').removeClass('collapse');
        $('#sidebar').css('height', 'auto');
        $('body').removeClass('left-side-collapsed');
        $('.navbar-header').removeClass('logo-collapsed');
        reloadStatistics();
    }
});

[AngelKrak]

no entendi bien que es lo que quieres, pero la condicion solo ponla afuera de la funcion bind y asi detecta el tamaño de la pantalla al cargar la pagina ;)
if ($(this).width() < 780) {