Slipstream

Create easy to navigate pages with the Slipstream’s smooth scrolling content sections. Used fixed height areas to contain a lot of information in a small amount of space.

Examples

Below we've created a fixed- height Slipstream content area that houses a lot of content in a small footprint, but gives our visitors easy access to that content with the Slipstream navigation buttons.

Section One

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.

Section Two

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.

Section Three

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.

Section Four

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.

Section Five

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.

That’s been one of my mantras — focus and simplicity. Simple can be harder than complex; you have to work hard to get your thinking clean to make it simple.

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet,consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt officia deserunt mollit anim id est laborum.

You're hurt. You're tired. You're bleeding. I'm gonna make you a promise. We get into that endzone, you're not gonna feel any pain.

The preferred locations for most layouts will be one of the two sides. The top location does not make use of the Sticky positioning like the left and right locations do. This is because the content area below the navigation items, when using the top location, pushes that navigation out of the way.

Settings

Edit Mode

Edit Mode Title

Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.

Navigation Items

Location

Allows you to choose where, in relation to your Slipstream content, that your navigation items will be placed. The recommened placement is on either the left or right side. Top placement has more limited usability than the side positions.

Navigation width

Here we choose how much horizontal space our navigational items will take up. We measure this in generic units. The full width of the available area is 12 units, much like with the Columns / Grid tool. We have up to 6 units available to us for our navigation items. The default is 4 units. We recommend 3-4 units for your navigation in most cases.

You can set this uniformly for all breakpoints, or click the small plus button to set a different width at each of the breakpoints.

The navigation width sets itself to 12 units and places itself above the content area section automatically at the Extra Small breakpoint for compatibility on small mobile devices.

Align Text

Allows you to align the text within the navigation buttons. You can align the text to the left, center or right. You can do so uniformly across all responsive breakpoints or you can click the small plus button to adjust the alignment independently at each of the breakpoints.

Top Offset

Slipstream's navigation items use a semi-sticky style navigation. It will stick to the top of the available area when the page scrolls, until the bottom of the Slipstream parent container reaches the top of the page. The Top Offset setting allows you to set an offset from the top of the page to keep the navigation items in a more comfortable viewing area for the visitor.

Navigation Items - Styling

Normal Background

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of normal items. You're also provided an option to choose a custom one-off color as well.

Normal Border

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the border of normal items. You're also provided an option to choose a custom one-off color as well.

Normal Text

This color picker allows you to choose the color of the text for the normal items.

Active Background

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of items when it is the active item or hovered over. You're also provided an option to choose a custom one-off color as well.

Active Text

This color picker allows you to choose the color of the text when it is the active item or hovered over.

Match Active Border to Background

When enabled this setting will set the border color for the active item automatically, matching it to the active background color you've chosen above.

Flush

Enabling this feature removes the outer borders and rounded corners to render list group items edge-to-edge in its parent container.

Bold Active Navigation Item

When enabled this feature will set the font weight of the active navigation item to 700 (bold).

Decorative Pointer

This setting adds a decorative arrow pointer to the side of the active navigation item. It is added to the aide of the item closest to the content area of Slipstream.

No pointer is added to the navigation active item if the Location of the navigation items is set to Top.

Gutters

Gutter

Here you can choose from the various different Foundry gutter presets. You can change the spacing between columns in both the horizontal and vertical direction, or disable it al together. You'll set one gutter preset spacing and Slipstream will apply it to both the horizontal and vertical value.

Content Area

Fixed Height Mode

Here you'll decide the style of Slipstream content you want to use for your page design. Fixed Height mode is likely to be the most popular, so it is the default choice for a new Slipstream tool.

This allows you to set a specific height for the content section of the tool. You do so at each of the individual 6 responsive breakpoints. You can also choose from various units of meausre for the height as well. The recommended, and default option, is View Height (vh).

When using Fixed Height mode the content inside of the content area of the tool will scroll in place. This allows you the opportunity to include a lot of content on the page in a small package.

When disabled your content will take up its full space on the page and the navigation, when on the left or right, will be locked in place as that content scrolls up the page.

Content Area - Padding

Padding

Choose from one of Foundry preset padding options to add a bit of internal spacing around the content within the Content Area of Slipstream.

Content Area - Rounded Corners

Rounded Corners

Foundry provides 5 different presets for rounded corners. These can be found throughout Foundry's various tools. You're also able to remove the roundness of the corners by setting this to none, or provide your own custom value for the border radius, or rounded corners. When using Custom mode you can set a different value on each of the four corners.

Content Area - Border

Width

Allows you to apply a preset border with to the content area of the Slipstream tool. This is on by default to show the visitor the area that the content within Slipstream will occupy. This is especially helpful to users when using the Fixed Height mode.

Style

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of normal items. You're also provided an option to choose a custom one-off color as well.

CSS

Classes

Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.