Features

  • Overlap sections of content on top of one another to create layered effects
  • Select either a fixed-width or flexible layout for your inner content
  • Add background and border styling for each breakpoint
  • Set different overlap distances at each of the three breakpoints
  • Include rounded corners and drop shadows, which are also adjustable at each breakpoint

Example

In order to best showcase what the Overlap stack can do we’ve built a separate example page. Check out the example page to see how you can make use of the Overlap stack in your projects.


Using Overlap

General

Type
Choose which type of inner area you’d like to have in the Overlap stack. You can choose from a Fixed-Width or Fluid container.

  • Fixed-Width: Allows you to set a maximum width for your Overlap content. At the smaller breakpoints the inner area automatically adjusts becoming a Fluid section to best fit mobile devices.
  • Fluid: The inner content area remains flexible at all breakpoints, filling out the entire width of any space it is placed within.

Max-Wdith
When Fixed-Width is chosen you’re given the opportunity to specify what you wish the maximum width of the Overlap stack’s inner content area to be.

Distance

You are able to choose how Overlap handles the top and bottom distance adjustments. When an element is moved upwards with Overlap it leaves a space below that element that is equal to the amount it was moved upward.

You can choose to use the Unified method, where the stack applies a negative margin to the bottom of the element that is equal to the distance you moved it upwards. This eliminates the bottom gap. Or you can opt to set different values for the top and bottom distances. This is more advanced. Most users will only need and use the Unified option.

Unified

Set the distance that the Overlap stack will move upwards, overlapping the content on the page above it. You can set a different distance for each of the three breakpoints.

Non-Unified
Allows you to set the distance that the Overlap stack will move upwards, was well as setting a different distance for below the Overlap stack. It too can be adjusted at each of the three breakpoints. The non-unified setting is less likely to be used in most layouts.

Styling

Background
Set the background color for the inner content area of the Overlap stack. You can set a different background color for each of the 3 breakpoints.

Rounded Corners
You are able to round the corners of the inner content area, setting different border radii at each of the breakpoints.

Shadow

Shadow
Enable to add a drop shadow to the inner content area of the Overlap stack. You’re also able to have the drop shadow be disabled at the Mobile breakpoint.

Vertical Offset
Set the distance you wish for the shadow to go in the vertical direction. You are able to set a different distance for this offset at each of the breakpoints. You can use either positive or negative numbers for the offset values.

Horizontal Offset
Set the distance you wish for the shadow to go in the horizontal direction. You are able to set a different distance for this offset at each of the breakpoints. You can use either positive or negative numbers for the offset values.

Blur
Use this setting to adjust the size of the drop shadow at each of the three breakpoints.

Color
You are able to adjust the color of your drop shadow to match your site’s styling. You can also use the opacity slider to adjust the shadow’s density.

Border

Width
Set the width of the inner content area’s border for each of the three breakpoints.

Color
Choose what color you wish your border to be using a color picker to help match it to the style of the rest of your site.

Advanced

Z-Index
Choose a custom Z-Index value for your overlapped content. This is for more advanced layering of content.

Sign up for The Forge newsletter

Stay up to date on future versions of Foundry, as well as important news, updates and more!

This site is built using Foundry for RapidWeaver

© 2006-2016 Elixir Graphics | Contact Us