Stacks Image 1886

Reflow Stack

The most advanced responsive layout stack to date.

Instant Download
Requires Rapidweaver & Stacks Plugin v3.5 +
Stacks Image 1907

Overview

The most advanced yet simple to use, responsive column layout stack for the Stacks plugin.

The entire concept of this layout system revolves around the magic number 12. There are 12 imaginary columns across the stack regardless of the screen size. You decide how many of those 12 imaginary columns each of your columns in the stack will occupy at the different screen sizes on offer. You can also specify 0 for any column which will hide that column completely.

Stacks Image 2347

* The most advanced responsive layout stack.
* The simplest responsive layout stack to understand and use.
* Optionally hide any of the columns on any device size.
* Independent vertical and horizontal spacing between the columns.
* Option to set your own custom device sizes for each of the breakpoints.
* Reflow stacks may be nested inside columns of other Reflow stacks.

No bloated frameworks were used in the making of this stack. We did not use any of the many frameworks out there to design this stack. We wanted to keep the code as light as possible and engineer this new responsive grid system from the ground up, specifically for the Stacks 3 plugin. We succeeded with a javascript free stack that has CSS weighing in at a feather light 8kb. With a large portion of the code now shared across multiple instances of the stack on the same page, this stack will barely make a dent in the overall page size.

Live Demo 1

You can choose the total number of columns by switching any of the columns off. Just set the columns value to 0 to switch it off completely for the respective device size.

Column 1
Stacks Image 1584

In this 3 column demo, we show in the settings how you switch a column off, by simply setting its value to 0 for any of the device sizes.

Column 2
Stacks Image 2352

In this 3 column demo, we show in the settings how you switch a column off, by simply setting its value to 0 for any of the device sizes.

Column 3
Stacks Image 2354

In this 3 column demo, we show in the settings how you switch a column off, by simply setting its value to 0 for any of the device sizes.

Live Demo 2

You can switch columns on and off for different device sizes. Here we show that concept in action.
Re-size the browser window to simulate the different device widths.

Column 1
Stacks Image 2356

In this mixed demo, we show how you can switch any colour off on only specific device sizes, by setting the columns value to 0 only for a specific device.

Column 2
Stacks Image 2358

In this mixed demo, we show how you can switch any colour off on only specific device sizes, by setting the columns value to 0 only for a specific device.

Column 3
Stacks Image 2360

In this mixed demo, we show how you can switch any colour off on only specific device sizes, by setting the columns value to 0 only for a specific device.

Column 4
Stacks Image 2362

In this mixed demo, we show how you can switch any colour off on only specific device sizes, by setting the columns value to 0 only for a specific device.

Custom Controls

A comprehensive explanation of each of the stacks custom settings.

Stacks Image 1992
Full width

There are an imaginary 12 columns across the reflow stacks width. You decide how many of those 12 columns you want each of your columns to occupy at screen sizes above iPad Landscape setting below.

iPad landscape

There are an imaginary 12 columns across the reflow stacks width. You decide how many of those 12 columns you want each of your columns to occupy at screen sizes above iPad Portrait setting below.

iPad portrait

There are an imaginary 12 columns across the reflow stacks width. You decide how many of those 12 columns you want each of your columns to occupy at screen sizes above iPhone setting below.

iPhone

There are an imaginary 12 columns across the reflow stacks width. You decide how many of those 12 columns you want each of your columns to occupy at screen sizes below iPhone.

Horizontal gutters

This will be the horizontal spacing between each of your columns if there is more than one column on a row.

Vertical gutters

This will be the vertical spacing between your columns if they are currently being displayed on more than one row.

Vertical align colls

Unequal height content in the columns will be vertically aligned middle compared to the rest of the columns that share the same row.

Preview

In edit mode you can preview your configuration of any of the device sizes by selecting that device from this list. This has no bearing on the final output, it simply aids you in configuring your layouts in edit mode.

Show helpful grid layout

Shows a12 column background grid with gutters in edit mode only. This can help you visualise the 12 column grid system.

Re-define screen sizes

Selecting this gives you options to change the predefined size of any of the devices (breakpoints). You may for example want your iPhone column configuration to kick in at any screen size below 540px as opposed to the default of 480px.

More FAQ

Other Important information relevant to this stack.

Stacks Image 2070
Stack installation
Download.

After purchase, you will be sent an email containing a download link for the stack.
Download the zip file from the link, and unzip it to reveal the stack inside.
You should now see the stack as a logo style icon.

Normal installation.

Double click the un-zipped stack file (the one that looks like a piece of lego).
This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Installation where more than one version of Rapidweaver is installed.

Sometimes if there is more than one version of Rapidweaver installed on your system, the double click method launches the wrong version of Rapidweaver to install the stack. To ensure the it is installed into the version you want to install to, you can, instead of double clicking the stack, just drag and drop it onto the appropriate Rapidweaver app icon in your dock at the bottom of your screen.

This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Known compatibility issues

There are no known compatibility issue at this time.

Browser Support
Tested in all major browsers, on desktop and mobile devices, without issue.

Explorer

Safari

Chrome

Firefox

© 2018 Doobox Software. Building premium Software Mac, C4D, & RapidWeaver™