Stacks Image 6

Align

The most intuitive way to align text & images responsively.

Align

The most intuitive way to align text and images responsively.

Overview.

This javascript free stack, makes it possible for you to horizontally align your images and text in a responsive way, based on the current width of the device screen. With two separate modes for images, and text. Apart from the responsive alignment options the stack affords you, it is exactly the same to use as the default image, and the default text stack that ships with the Stacks plugin.

New : You can now drop any other stack inside Align, to responsively align its contents. Note, we can not guarantee this feature will work with every stack in existence, as some stacks will not allow a parent to override their own alignment settings.

Instant download.

Version : 1.0.1

Responsive : Yes

First released : 25/5/2016

Last Updated : 8/9/2016

Stacks V 3.0 or greater.

Live demo.


As said at the top of this demo. Everything in this section (text and images) are all done with the Align stack. We have them all set to be alternating left and right on desktop, and centre on tablet and mobile devices. Resize your browser window now to see the contents re-align to our specified settings.

The stack has two modes

Simply choose to work with an image, or text. Both options provide you with default stacks that are, apart from the responsive alignment features. absolutely exactly the same as the default text stack, and the default image stack. No javascript is used in the stack at all.
Stacks Image 637

Settings really could not be simpler

Thanks to a new addition to the Stacks plugin API, we are now able to create this greatly simplified set of controls, which makes this stack possible. When the screen size matches one of the selected devices in the list below, then your selection for that device size will take effect.
Stacks Image 643

Customise your own breakpoints

The breakpoints are by default set to match those of the Stacks plugins responsive features. However tucked away at the bottom of the stacks settings, you can find an option to define your own custom breakpoints. Essentially telling the stack what screen size to start treating as a Tablet device, and a Mobile device.
Stacks Image 649

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
Mode

There are 3 modes to choose from :

  • Text, gives you a default paragraph of plain text to amend to your needs.
  • Image, gives you a default image drop zone.
  • Drop Zone, gives you a default drop zone to add any other stack.

Desktop align

Aligns the contents of the stack to the position selected here, when the device screen size is deemed to be desktop. This is any size over the currently set tablet size in the breakpoint setting below.

Tablet align

Aligns the contents of the stack to the position selected here, when the device screen size is deemed to be tablet. This is any size over the currently set mobile size and under the currently set tablet size, in the breakpoint setting below.

Mobile align

Aligns the contents of the stack to the position selected here, when the device screen size is deemed to be mobile. This is any size under the currently set mobile size in the breakpoint setting below.

Redefine breakpoints

When selected you have a further option to re-define the screen sizes that are deemed to be tablet and mobile sizes by default.

Breakpoints

These are the screen sizes that are deemed to be tablet and mobile devices.

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

In text mode, it is identical to a default text stack in appearance.

Stacks Image 694

In image mode, it is identical to a default image stack in appearance.

Stacks Image 700

In Drop Zone mode, it is identical to a default 1 column stack in appearance.

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™

Align Stack