Stacks Image 1742

Reflow Stack

The most advanced responsive layout stack to date.


0 ratings

Instant download.
Requires: Stacks v3.5 or greater.
Version : 1.0.5
Released: 29/12/2015
Last Updated : 6/2/2018

Stack Info

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.

  • The most advanced responsive layout stack.
  • The simplest responsive layout stack to understand and use.
  • Can be used as 1, 2, 3, or 4 column stack.
  • Optionally hide any of the columns on any number of your chosen screen sizes.
  • Configure the number of columns seen per row independently on any of the device screen sizes.
  • Live edit mode preview of any of your screen size configurations.
  • Independent vertical and horizontal spacing between the columns.
  • Edit mode helper grid that also shows your gutter spacings live.
  • 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.

Settings

In this section, we have provided a comprehensive list of available settings, and a full description of what each of the settings does for the stack.

Stacks Image 1279
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.

Edit Mode

We pay great attention to how we approach the editing interface of every stack, to ensure intuitive ease of use.

Stacks Image 1343

  • Optional layout helper grid in the background.
  • Choose between 1 and 4 columns.
  • Hide a column on any or all device sizes by simply setting it’s width to 0.

Stacks Image 1347

  • Select between on of the 4 device sizes to preview.
  • The configuration for the selected device size is now seen directly in edit mode.
  • Here we are previewing iPad portrait size configuration in edit mode.

FAQ

Important information that is pertinent to this stack. Please read, as there may well be something here that is essential to the deployment of this stack.

Browser support

This stack is supported in all modern browsers. Any exception to this rule will be listed below.

Safari

Chrome

Firefox

Explorer

Known compatibility issues

No known issues.

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.

Video Intro

Reflow Intro from Doobox on Vimeo.

Fit My Video Tag

Live Demo

Stacks Image 1358

Click to enlarge

The settings for the 4 column default demo 1 below.

Shows how as soon as the row adds up-to 12 from left to right the next column moves down to a new row. As you can see by the settings available, this is controlled independently for each of the screen sizes.

Column 1

This is the default configuration when you drag a new Reflow stack into the page. You can re-arrange or remove columns at each device size like the demos below. Resize the browser window to see how the columns behave.

Column 2

This is the default configuration when you drag a new Reflow stack into the page. You can re-arrange or remove columns at each device size like the demos below. Resize the browser window to see how the columns behave.

Column 3

This is the default configuration when you drag a new Reflow stack into the page. You can re-arrange or remove columns at each device size like the demos below. Resize the browser window to see how the columns behave.

Column 4

This is the default configuration when you drag a new Reflow stack into the page. You can re-arrange or remove columns at each device size like the demos below. Resize the browser window to see how the columns behave.

Live Demo 2

Stacks Image 1569

Click to enlarge

The settings for the 3 column demo 2 below.

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.

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 1591

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 1598

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 3

Stacks Image 1654

Click to enlarge

The settings for the mixed column demo 3 below.

You can switch columns on and off for different device sizes. Here we show that concept in action.

Column 1

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

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

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

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.

Buy Now

We trust PayPal as our secure checkout provider.

Don't have a PayPal account? No worries. PayPal allows you to pay with your credit card if you do not have an account set-up.

Missing image

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

Reflow Stack