All samples are using Ink.requireModules, please read how to use it at Ink.requireModules section

Ink.UI.Stacker_1 class

This module combines several stacks of items together, in smaller screen sizes.

The purpose is to have several stacks of items which may have different heights and as such cannot be used because of float: left quirks.

For example, when you have three different columns of information:

[col. A: 1] [col. B: 1] [col. C: 1]
        [col. B: 2] [col. C: 2] [col. C: 2]

and the screen resizes and you need a layout of 2 columns, Stacker reorders the stacks so that you get:

[col. A: 1] [col. B: 1]
        [col. C: 1] [col. A: 2]
        [col. B: 2] [col. C: 2]

Note: If you just want to use a different amount of columns for your items in several viewports, but these items are guaranteed to have a fixed height, don't use this module. Use the small-*, medium-* and large-* classes instead.

Methods
Method name	Description
new Stacker_1([container], [options])	Constructor
.addItem(item)	Adds an item to the end of your stacks.
.reloadItems()	Updates the layout of your items.

new Ink.UI.Stacker_1([container], [options])

Accepts

container
Element which contains the stacks (identified by the options.column selector)
options
Options object.
options.column
Selector for the the columns inside the container element. Defaults to '.stacker-column'.
options.item
Selector for the items in your stack. Defaults to '.stacker-item'.
options.customBreakPoints
Options for each breakpoint name. Use this if you have more breakpoints than Ink by default (`large`, `medium`, `small`)
options.customBreakpoints.BREAKPOINT_NAME
Custom breakpoints object.
options.customBreakpoints.BREAKPOINT_NAME.max
Maximum screen size as seen in your media query
options.customBreakpoints.BREAKPOINT_NAME.min
Minimum screen size as seen in your media query
options.customBreakpoints.BREAKPOINT_NAME.cols
Column count for this size.
options.largeMax
Upper bound of `large` breakpoint
options.largeMin
Lower bound of `large` breakpoint. Defaults to 961.
options.mediumMax
Upper bound of `medium` breakpoint. Defaults to 960.
options.mediumMin
Lower bound of `medium` breakpoint. Defaults to 651.
options.smallMax
Upper bound of `small` breakpoint. Defaults to 650.
options.smallMin
Lower bound of `small` breakpoint
options.largeCols
Number of columns in the `large` viewport. Defaults to 3.
options.mediumCols
Number of columns in the `medium` viewport. Defaults to 2.
options.smallCols
Number of columns in the `small` viewport. Defaults to 1.
options.isOrdered
When false, doesn't reorder stacks when combining them.
options.onRunCallback
Called when instantiated.
options.onResizeCallback
Called when the window resizes.
options.onAPIReloadCallback
Called when the reload function executes.

Basic usage

The below stacks are reorganized into a smaller number of stacks as the viewport gets smaller. The example also shows how you can add more elements to the stack.

Code

<div id="stacker-container" class="column-group">  <!-- Stacker element -->
    <div class="xlarge-33 large-33 medium-50 tiny-100 stacker-column"> <!-- Column element ('.stacker-column' is the default selector) -->
        <div id="a" class="stacker-item">a</div> <!-- Item ('.stacker-item' is the default selector) -->
        <div id="d" class="stacker-item">d</div>
        <div id="g" class="stacker-item">g</div>
    </div>
    <div class="xlarge-33 large-33 medium-50 tiny-100 hide-small stacker-column">
        <div id="b" class="stacker-item">b</div>
        <div id="e" class="stacker-item">e</div>
        <div id="h" class="stacker-item">h</div>
    </div>
    <div class="xlarge-33 large-33 medium-50 tiny-100 hide-medium hide-small stacker-column">
        <div id="c" class="stacker-item">c</div>
        <div id="f" class="stacker-item">f</div>
        <div id="i" class="stacker-item">i</div>
    </div>
</div>

<script>
Ink.requireModules(['Ink.UI.Stacker_1'], function (Stacker) {
    // Keep the "stacker" variable around if you want to call addItem and reloadItems
    var stacker = new Stacker('#stacker-container');

    // Let's add a new item to the stacks
    var newItem = document.createElement('div');
    newItem.id = 'j';
    newItem.className = 'stacker-item';
    newItem.textContent = 'j';
    stacker.addItem(newItem);
    stacker.reloadItems();
});
</script>

.addItem(item) method

Adds an item to the end of your stacks.
Call reloadItems() when you are done adding items.

Accepts

item
Element

.reloadItems() method

Updates the layout of your items.
Call this method after adding items or changing their dimensions. This method is automatically called when the window resizes.