Partitions

Base Foundry stack | New in Foundry v2

Create unique, fixed position, partitioned layouts for your pages. The documentation pages for this site are built using the Partitions stack!

  • Versitle, fixed position layouts
  • Style each section independently
  • Topper area extra is great for navigation bar
  • Arrange order of sidebars and main content
  • Content in sidebars and main content area scroll independent of one another
  • Sidebar One becomes a hidden, off screen slideout for Mobile devices
  • Please Note: Features on this page marked with the purple moon icon are compatible with Foundry's Dark Mode.

Example

The Documentation pages on this site are created using the Partitions stack. The links to the left are in Sidebar One, with the Documentation itself here in the Main Content Area of the stack. At the top of the page we've enabled Partitions' extra Topper area and inserted our Navigation Bar Pro stack to provide our site navigation.

Using Partitions v2

Partitions Layout

Extras
In addition to the standard partitions in the stack, which are a sidebar and the main content area, you can also include a topper section and a second sidebar.

Positions
This allows you to determine where the vertical partitions are placed (eg: sidebar one, sidebar two and the main content area). Lower numbers will be placed from left to right.

Example

Setting Sidebar One to a value of 1, Main Content area to a value of 3 and Sidebar Two to a value of 2, that would mean the vertical partitions would be arranged as follows:

- Sidebar One on the left
- Sidebar Two in the middle
- Main Content area on the right

Sidebar One

This section allows you to configure and style the way Sidebar One looks and operates.

Style
Use this setting to adjust the background styling for the Sidebar One section of your Partitions layout. You can choose from Foundry's Brand Colors Presets or provide your own custom colors for a solid or gradient background.

Width
Allows you to set a width for Sidebar One at each of the three breakpoints. These widths are set in View Width (VW) units. This is essentially a percentage based width that is relative to the width of the visitor's browser or mobile device display.

Mobile, Tablet and Desktop Padding
These settings allow you to customize the padding around your content in Sidebar One. You can change the padding individually on each side of the Sidebar as well as at each of the three responsive breakpoints.

Hide At
You're able to hide Sidebar One at specific breakpoints using this setting.

Mobile Toggle
At the Mobile breakpoint Sidebar One turned into an off-screen element that can be brought into view y your visitors by touching a trigger button. You're able to use the mobile controls in the settings to define the toggle's colors, its icon, its vertical and horizontal offset in relation to the top and side of the display and on which side of the display the slide out sidebar will appear.

This mobile toggle and slide out mechanism is only applied to Sidebar One and not Sidebar Two or the Main Content area.

Main Content Area

This section allows you to configure and style the way Main Content Area looks and operates within your Partitions stack.

While the Sidebars have Width settings the Main Content Area does not. It fills in the remaining area that is not taken up by the Sidebar(s).

Style
Use this setting to adjust the background styling for the Sidebar One section of your Partitions layout. You can choose from Foundry's Brand Colors Presets or provide your own custom colors for a solid or gradient background.

Mobile, Tablet and Desktop Padding
These settings allow you to customize the padding around your content in Sidebar One. You can change the padding individually on each side of the Sidebar as well as at each of the three responsive breakpoints.

Sidebar Two

This section allows you to configure and style the way Sidebar Two looks and operates.

Style
Use this setting to adjust the background styling for the Sidebar Two section of your Partitions layout. You can choose from Foundry's Brand Colors Presets or provide your own custom colors for a solid or gradient background.

Width
Allows you to set a width for Sidebar Two at each of the three breakpoints. These widths are set in View Width (VW) units. This is essentially a percentage based width that is relative to the width of the visitor's browser or mobile device display.

Mobile, Tablet and Desktop Padding
These settings allow you to customize the padding around your content in Sidebar Two. You can change the padding individually on each side of the Sidebar as well as at each of the three responsive breakpoints.

Hide At
You're able to hide Sidebar Two at specific breakpoints using this setting.

Insight
Full Page

The Partitions stack is a unique tool. It takes over the entire page, partitioning it off into preset sections. These sections are where your page's content will live.

This means that all of your content for the page must be placed within the Partitions stack. Don't place content above or below the Partitions stack.

This also means that stacks that trigger off of the browser scrolling, like Reveal or Scroll To, will not work within Partitions.

Be sure to watch the Partitions video tutorial above.