Stacks Image 3067

Split Stack

One fixed, & one fluid column, with super response to different screens sizes.

0 Likes

Instant download.
Requires: Stacks v3 or greater,
Version : 1.0.2
Released: 31/01/2020
Last Updated : 03/02/20220

Stack Info

Overview

Two column stack, split into one fixed size column and one fluid column. Control what happens to the layout at different screen sizes.

Similar to the default float stack that ships with the stacks plugin, but Split has a fixed size column in pixels, so it's more predictable when screen sizes change.

You decide when the two columns should react to ever decreasing screen size. When the columns react, you decide what happens. Should the left column go over the right, or under the right, or just be completely hidden on small screens.

After the columns have reacted to a smaller screen, you decide how the text lays out. Should it continue to lay out exactly the same way, or should it all now be centralised.

A clean fresh intuitive user interface, and a stack that we wished we'd had to hand on many occasions in the past.

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 2929
Fixed Width Column

Choose the column to fix the width of. Left or Right.

Column Widths

You decide how wide in pixels the fixed left column is at each of the device sizes.

React At

You choose the device screen size that you'd like the fixed width column to responsively react.

Reaction

You choose what happens when the Split reacts. Choices are:

- Left column moves over the top of the right.
- Left column moves underneath the right.
- Left column is removed from the page.

After Reaction

After the responsive reaction, you choose if you'd like to centralise all text within the columns or not.

Gutter Settings

Control the spacing between each column both horizontally and vertically.

Re-Define Screen Sizes

Here you can override the sizes that we have declared as the screen widths belonging to each device. It's at these screen widths that the columns respond and change.

Edit Mode

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

Stacks Image 2948

Super simple user interface. Blue outline on the fixed column, just helps to identify it in edit mode after it has responded to small screen changes.

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.

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.

Live Demo

You will need to resize the width of your browser window to see the stack respond to change.


Stacks Image 3103

This image will move over the text on smaller screens.

This demo stack is setup to display the image at the fixed width of 256px regardless of screen size right down to iPad portrait size (768px), at which point the left column will move over the right, and all this text will be re-aligned to the centre, for better vertical presentation.


Stacks Image 3116

This image will duck under the text on smaller screens.

This demo stack is setup to display the image at the fixed width of 256px regardless of screen size right down to iPad portrait size (768px), at which point the left column will move under the right, and all this text will be re-aligned to the centre, for better vertical presentation.


Stacks Image 3129

This image will be hidden on smaller screens.

This demo stack is setup to display the image at the fixed width of 256px regardless of screen size right down to iPad portrait size (768px), at which point the left column will be hidden, and all this text will be re-aligned to the centre, for better vertical presentation.


Choose to fix the width of the left or the right column.


This image will move over the text on smaller screens.

This demo stack is setup to display the image at the fixed width of 256px regardless of screen size right down to iPad portrait size (768px), at which point the right column will move over the left, and all this text will be re-aligned to the centre, for better vertical presentation.

Stacks Image 3144

Be sure to check out Split's settings section above.

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™

Split Stack