Features

  • Set your slide height at each of the three breakpoints
  • Choose which breakpoints to show, or hide, the navigation icon, label and descriptors
  • Use the Typeface stack integration to customize your navigation labels
  • Choose to have animated or non-animated content within your slides
  • Customize the navigation item width at each breakpoint
  • Style the slides and navigation to match your site design using color pickers and images
  • Opt to have the slides auto advacne on their own at a set rate
  • Choose from hundreds of icons for your navigation items

Example

The Shift stack can often take up a good deal of space, especially when used as a banner of sorts. So to showcase it a little better we’ve built a separate page to show off what Shift is capable of accomplishing.


Using Shift

Slide Height

Mobile, Tablet & Desktop Height
Allows you to set a different height for the Shift stack based on the three Foundry responsive breakpoints. In addition to these height settings for Shift you can use other stacks’ responsive breakpoint settings to customize the content that you place within the Shift stack’s slides.

Navigation Items

Mobile, Tablet & Desktop Width
Set a different width for the Shift stack navigation items based on the three Foundry responsive breakpoints. Adjust the size of the navigation items to best fit on different devices and browser widths.

Hide Icons
Choose to show or hide navigation item icons at each of the three breakpoints.

Hide Labels
Choose to show or hide navigation item labels at each of the three breakpoints.

Hide Descriptors
Choose to show or hide navigation item descriptors at each of the three breakpoints.

Navigation Styling

Bkg. Gradient
Use two color pickers to set the background gradient for the navigation bar that resides on top of the Shift stack slides.

Border Top
Choose whether or not to include a border on the top of the Shift navigation bar as well as set its color.

Label
Set the normal and active colors for the navigation item labels.

Descriptor
Set the normal and active colors for the navigation item descriptors.

Navigation Label Font

Font
Choose whether the Shift labels use the Foundry Control Center’s Base Font or whether you’d like to use the Typeface stack’s font assignments.

Label Weight & Active Weight
Choose a font weight for your normal and active labels. If using Typeface font assignments be sure you’ve loaded the correct font weights in the Typeface stack as well.

Animation

Auto Advance
When enabled the slider will automatically advance to the next slide, and then rotate back around to the first slide.

Pause Length
The amount of time the slider will pause on each Shift slide.

Child Stacks

Shift Item

Each slide with Shift has its own set of options as well. The Shift Slide child stack also contains a few child stacks of its own as well.

Inner Content

Type
Choose which type of Container you’d like it to be. You can choose from a Fixed-Width or Fluid container.

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

Icon
Choose an icon for your slide’s navigation item. You can choose from hundreds of different icons.

Size
Choose a size for your navigation item’s icon.

Nav Name
Set the label for this slide’s navigation item.

Descriptor
Provide a small bit of text for this slide’s navigation item.

Slide Styling

Background Type
You can choose from several different background types for your slide. Opt for one of the following:

  • Solid Color: Use a color picker to choose one solid color for your slide background.
  • Gradient: Make use of two seperate color pickers to setup a two-color gradient for your slide background.
  • Image: Use an image of your own as the slide background. The image will be sized to cover the background of the slide. This can include sizing the image up or down and cropping the image as the browser width changes.
Bakground

Background Overlay
You can use a color picker, and its opacity slider, to set an overlay color for your slide’s background. This can help increase text legibility depending on your background.

Navigation Styling

Indicator Color
Shift’s navigation items have an indicator line above them to mark the active item. You can use a color picker to choose a color for each slide’s active indicator.

Icon
Use a set of color pickers to set the normal and active colors for each individual navigation item.

Child Stacks

The Shift Item stack, which is a child stack of the main Shift stack also has a couple of child stacks of its own. These two child stacks allow you to determine whether the content in your slide will be animated into place when the slides change or not. You can use multiples of either within the Shift Item stack and can mix and match them.

The Animated Content child stack allows you to set a delay period before the animation occurs. This means you could stagger animations by using differing delay value for multiple Animated Content stacks.

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