Stacks Image 6

Reflow

The most advanced responsive layout stack to date.

Reflow

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

Overview.

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.

Instant download.

Version : 1.0.5

Responsive : Yes

First released : 29/12/2015

Last Updated : 6/2/2018

Stacks V 3.0 or greater.
Fit my Video

Live demo 1.

Stacks Image 819

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.

Image

Quick Fact : Setting a column to zero removes that column entirely. This can also be controlled independently for each screen size, allowing you to hide a particular column on iPhone for example.

Live demo 2.

Stacks Image 817

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 805

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 813

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 815

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.

Image

12Twelve is the magic number : Each row in Reflow contains 12 imaginary columns. As soon as a column width you have specified in the settings will make the current row count greater than 12, it flows down to the next row.

Live demo 3.

Stacks Image 821

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.

Image

A column can be a spacer : You can specify a column be say 3 portions of the 12 for the current row, and not add any content for that column. So if for example you did this for column 1 of a row, then there would be a space on the left of that row, of 3 portions of that row before the second column in that row.

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

Stacks edit mode.

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

Stacks Image 297

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

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

Stacks 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

There are no known compatibility issues with this stack.

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.

Secure checkout.

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.

Instant download.

Stacks Image 589

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

Reflow Stack