Reflow Stack
The most advanced responsive layout stack to date.
Description
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.
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.
Video Overview
Demo
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
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
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
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.
User Settings
A comprehensive overview of this stacks user settings.
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.
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.
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.
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.
This will be the horizontal spacing between each of your columns if there is more than one column on a row.
This will be the vertical spacing between your columns if they are currently being displayed on more than one row.
Unequal height content in the columns will be vertically aligned middle compared to the rest of the columns that share the same row.
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.
Shows a12 column background grid with gutters in edit mode only. This can help you visualise the 12 column grid system.
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.
Last modified %(last_mod)%