StackAt jQuery Plugin

StackAt.js

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:

Responsive Layout Builder

Whether you're building a responsive viewport for the entire screen or designing smaller responsive interface components, Responsive Layout Builder is the perfect tool for dividing content horizontally while stacking vertically in a custom order at a certain width(the stackAt Width):

More Demos

We've assembled a page of many great use cases for managing split content responsively:

More Demos

Download

file_downloadStackAt.js

Explore Chakra7 Today