Stacks Image 6

Shim

Responsive aware spacer stack.

Shim

Swell will instantly light-box any image with a unique animation. It has a selection of built in thumbnail hover effects, and is intended to be used anywhere in your page.

Overview.

Automatic : In this mode you set the shim (vertical spacer) to a percentage value. So if you set the value to say 10%, then the height of the shim will be 10% of the width of the container you dropped the shim stack inside. So.. when the screen width reduces, and the the width of the container you dropped the shim stack inside reduces, the height of the shim also reduces. Meaning basically the narrower the screen the shorter the shim (spacer) will become.

Manual : In this mode, you are given new settings to enter an absolute pixel dimension for the height of the shim (spacer) at 3 different device widths. You can also control the widths of the devices where the shim height changes. Default widths for Desktop, Tablet, and mobile devices are set by default.

Instant download.

Version : 1.0.3

Responsive : Yes

First released : 16/7/2014

Last Updated : 9/6/2016

Stacks V 3.0 or greater.

Live demo.

You can see a live example of the stack in action below.

We have placed a shim stack above and below this random image (shim shown red for purpose of demo only).
This is where we may have normally just used padding or margin to give the image some vertical space.
But as you will see when you shrink the width of the widow to simulate a smaller screen width, the shims are reduced in height. So now much better vertical margins for a smaller screen are automatically applied.

Image

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
Stacks Image 635
Shim type

When the shim type is set to automatic, you see the settings below. Automatic mode bases the height of the shim on the width of the screen at any screen size.

Height

You set a percentage here. The height of the shim will then be this percentage of the width of the screen, regardless of the screen size, thus getting shorter as the screen gets smaller in width.

Shim type

When the shim type is set to manual, you see the settings below. Manual mode bases the height of the shim on the precise settings you add for each device screen size.

Height

Set pixel sizes that you would like the shim to be at each of the screen sizes. The first shim height is seen as a desktop device, while the other two are definable by you. But are defaulted to Tablet and mobile sizes.

Screen size

The two screen sizes are definable by you but defaulted to tablet and mobile device sizes. These are the points that control the shim height you enter for the screen size in the same section of the settings.

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 edit mode you will see a visual representation of the height of the shim dictated by the current screen width.

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™