Visually the effect that StandOut creates looks super-simple and is something almost any desktop publishing software (like Pages) can do in a few clicks. But within a responsive, web design context, overlaying and offsetting different layers is mighty difficult to accomplish successfully. Ordinarily, the Stacks plugin cannot do it. So we developed the StandOut stack to bring this content presentation concept into the reach of average RapidWeaver users.

StandOut consists of two content layers; those being frontmost and backmost. Frontmost is the layer you can drop content (like images) into and layer or offset in relation to the backmost layer. In StandOut, you can choose to position the frontmost layer either top, bottom, left or right. Numerous options exist to fine-tune the placement and style of your StandOut stacks live in RapidWeaver. StandOut has been engineered to use pure HTML and CSS markup; so no Javascript, image shadows or Flash.

Please note that StandOut requires a minimum of RapidWeaver 6 and Stacks 3. This stack will not work with older versions of Stacks or RapidWeaver.

Examples

Here are some real examples of the StandOut stack in use; opting to demonstrate the top, bottom, left and right positioning options. In each example, the image in the frontmost layer has been set as a link.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Setup

To get StandOut working in your webpage, please follow these instructions carefully.
  1. Once installed into Stacks and RapidWeaver, add a Stacks page type to your project (if you've not done so already). Open the Stacks Library. Drag and drop a copy of StandOut into your page
  2. Where 'Drop stacks here' is shown, drag and drop a suitable content stack into this area; such as styled text, HTML code, Markdown, columns or a floating stack
  3. In the StandOut Frontmost Layer Settings, choose the content type (e.g. local image) and provide the content
  4. With your backmost and frontmost layers now populated with content, you can go-ahead and customise many other aspects of this stack. Keep previewing StandOut in RapidWeaver to see what it looks like. Settings like 'best fit' are important to customise, to gain the correct amount of overhang
  5. When finished, save your changes and export or publish your website.

You can safely use multiple StandOut stacks on the same webpage. It's often easier to setup the first one (to your liking) and then duplicate it. Within the duplicates, you can simply change the content and links etc.

Compatibility

StandOut is compatible with all modern web browsers that support CSS flexbox. This includes IE10, IE11, Edge, and newer versions of Safari, Firefox, Opera and Chrome. We use CSS flexbox for the right and left positioned frontmost layers. StandOut works well on mobile devices too, and the provided breakpoint setting helps you accomplish a more simplified layout on smaller screens.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.