StackAt Responsive jQuery Plugin

Summary

StackAt is a simple way to manage responsive split content in one of the following common layout scenarios:

Left Fixed, Right Remainder
Right Fixed, Left Remainder
2 Column Percentage Split (Left/ Right)
3 Column Percentage Split (Left/ Center/ Right)
Left & Right Fixed, Center Remainder
Left Fixed, Center & Right Remainder
Right Fixed, Left & Center Remainder
Center Fixed, Left & Right Share Remainder
...and many more!

The developer only needs to specify the stackAt width and when the content is rendered at less than this width, the elements are stacked vertically, each with 100% width.

This is perfect for having split content on large screens but still being mobile friendly with stacked content on small screens.

Unlike Materialize.css and Bootstrap, StackAt.js stacks based on the width of the parent element, not the total screen width (although the later is supported by attribute useScreenWidth=true)

In addition, the stacking order of the elements is completely customizable by the developer

Installation

Download StackAt and put it in your project (we always throw it in a js folder):

<link href="js/StackAt/stackAt.css" rel="stylesheet">
<script src="js/stackAt/stackAt.js"></script>

Usage

Give the parent div the stackAt class and a stackAt attribute

Give the cells the splitEl class and, optionally, either a fixed-width attribute or remainder-width attribute

Ex 1: 50/50 Split that stacks at 600px

<div class="stackAt" stackAt="600">
    <div class="splitEl" style="float:left;width:50%">    
        <h1>Left</h1>
    </div>
    <div class="splitEl" style="float:left;width:50%">    
        <h1>Right</h1>
    </div>
</div>

Custom Stack Order

The cells are stacked vertically, in the order they appear in the HTML markup. Custom stack order can be achieved by the column-index attribute in conjunction with fixed-width attribute or remainder-width attribute

Ex 2: 50/50 Split With Right Stacked On Top

<div class="stackAt" stackAt="600">
    <div class="splitEl" column-index="2" remainder-width="50%">    
        <h1>Right</h1>
    </div>
    <div class="splitEl" column-index="1" remainder-width="50%">    
        <h1>Left</h1>
    </div>
</div>

Or, you can use this for better performance...

<div class="stackAt" stackAt="600">
    <div class="splitEl" style="float:right;width:50%">    
        <h1>Right</h1>
    </div>
    <div class="splitEl" style="float:right;width:50%">    
        <h1>Left</h1>
    </div>
</div>

Use the responsive layout builder below to easily get your desired layout: