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!

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