Responsive JS

Responsive framework reboot

by someprimetime

HTML

<div class="menu">
    <div id="js-sticky-nav" class="filter_row">
  <div class="filter_row_group">
    
<h5 class="filter_title">Sort By:</h5>
<ul class="js-sticky-menu js-filter-group inlineblock">
  <li class="filter_dropdown">
    <h5 class="filter_parent filter_parent_static">
      popular<span class="glyph glyph_down"></span>
    </h5>
    <ul class="filter_dropdown_menu" style="width: 9em">
    
      
      <li class="filter_child">
        <a class="filter_active" href="/photos">Popular</a>
      </li>
      
      <li class="filter_child">
        <a class="" href="/photos?sort=newest">Newest</a>
      </li>
    </ul>
  </li>
</ul>


  </div>
  <div class="filter_row_group">

    
    
    

<h5 class="filter_title">Filter By:</h5>
<ul class="js-sticky-menu js-filter-group filter_dropdown_group">
  <li class="filter_dropdown">
    

    <a href="/photos/looks" class=" filter_parent">Looks<span class="glyph glyph_down"></span></a>
    <ul class="filter_dropdown_menu" style="width: 12em">
      
  <li class="filter_child" style="padding-left: 0em;">
    <a href="/photos/bridal-looks">Bridal Looks</a>
  </li>
  


  <li class="filter_child" style="padding-left: 0em;">
    <a href="/photos/celebrity-looks">Celebrity Looks</a>
  </li>
  
  <li class="filter_child" style="padding-left: 1.585em;">
    <a href="/photos/movie-looks">Movie Looks</a>
  </li>
  <li class="filter_child" style="padding-left: 1.585em;">
    <a href="/photos/music-video-looks">Music Video Looks</a>
  </li>


  <li class="filter_child" style="padding-left: 0em;">
    <a href="/photos/going-out-looks">Going Out Looks</a>
  </li>
  


  <li class="filter_child" style="padding-left: 0em;">
    <a href="/photos/natural-looks">Natural Looks</a>
  </li>
  


  <li class="filter_child" style="padding-left: 0em;">
    <a href="/photos/seasonal-looks">Seasonal Looks</a>
  </li>
  
  <li class="filter_child" style="padding-left: 1.585em;">
    <a...

CSS

.module {
    float:left;
    color: #fff;
}
.content_module {
    background: teal;
    width: 100%;
    float: left;
}
.sidebar_module {
    background: orange;
    width: 100%;
    float: right;
}
.postscript_module {
    background: red;
    width: 100%;
}
.sidecontent_module {
    background: blue;
    width: 100%;
}




/**
 * Filter Styles
 *
 * Title, Parent and Child type styles globally are defined
 * Filter groupd class used to define sets for mobile styles
 */

/* type */
.filter_title, h5.filter_title , .filter_title h5 {
  display: inline-block;
  font: bold 1em/1.923em AvSans, sans-serif;
  letter-spacing: .075em;
  padding-right: 0.385em;
}

.filter_parent {
  font: 1em/1.923em AvSans, sans-serif;
  text-transform: uppercase;
}

.filter_child {
  font: 1em/1.154em AvSans, sans-serif;
  padding: 0.385em 0;
}

.filter_child_horizontal {
  display: inline-block;
  font: 1em/1.154em AvSans, sans-serif;
  padding: 0 .769em 0 0;
}

/* filter parent level menu */
.filter_menulist {margin: 0 -40px 1.585em; text-align: center;}
.filter_menulist li {display: inline;position: relative;}
.filter_menulist li:before {content: ":"; font-size: 1.1em; color: #00e295; font-weight: bold;}
.filter_menulist li:first-child:before {content: "";}
.filter_menulist a {padding: 0 0.692em 0 0.846em;}
.filter_menulist li:first-child a {padding: 0 .769em 0 0;}

/* vertical list for sidebars */
.filter_list, .filter_list a, .filter_list a:visited {display: block;}
.filter_list a:hover {color: #03c885; text-decoration: underline;}
.filter_list .filter_active {color: #03c885;}

/* Drop Down Filter Groups */
.filter_row {text-align: center; padding: 0.385em 0 1.538em;} /* padding for vertical alignment with heading */
.filter_row .filter_row_group {display: inline-block}
.filter_row .filter_row_group + .filter_row_group {margin-left: 2em}

/* Drop Down Filter Styles */
.filter_dropdown_group > li {margin-left: 0.769em}
.filter_dropdown_group > li:first-child {margin-left:...

JavaScript

$(function() {
    // Find all DOM objects with a class of `.module` on the page
    var $modules = $('[class^="module"]');

    // Returns the type of class listed on the module
    var getClassNames = function($module) {
        var classList = $module.attr('class').split(/\s+/);
        // We don't want the `.module` class, just the `._*module ones`
        return classList[1];
    };

    // Create an object with all properties of the DOM modules (found in `$modules`)
    var createModuleMap = function($modules) {
        var moduleObj = {};

        $.each($modules, function(i, val) {
/* Object which contains the following module properties:
            *  classSelector (DOM [object])
            *  className (class [string])
            *  pageWeight (number [int])
            */
            var moduleNum = 'moduleNum_' + i;
            var className = getClassNames($(val));
            var data = {
                classSelector: $(val),
                className: className,
                pageWeight: $(val).data('page-weight')
            };
            moduleObj[moduleNum] = data;
        });
        return moduleObj;
    };

    var moduleMap = createModuleMap($modules);
    // Organize moduleMap obj. properties by pageWeight properties (in ascending order)
    var sortModulesByMapWeight = function(moduleMap) {
        var sortable = [];

        for (var key in moduleMap) {
            var obj = moduleMap[key];
            for (prop in obj) {
                // Only want to sort by this property
                if (prop === 'pageWeight') {
                    // Sort by weights so we can move them in the `sortable` array which will allow us to sort them in sequential order
                    sortable.push([obj, obj[prop]]);
                    sortable.sort(function(a, b) {
                        return a[1] - b[1];
                    });
                }
            }
        }
        return sortable;
    };

    var makeSortedModuleObj =...