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.

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])


  • 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.



<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 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 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>

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'); = 'j';
    newItem.className = 'stacker-item';
    newItem.textContent = 'j';

.addItem(item) method

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


  • item


.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.