Partitions

Create versatile, unique partitioned layouts for your page design. The documentation pages for this site are built using the Partitions tool!

Examples

The Paritions tool is used for our Documentation pages already. It is how we've built this nice 3-pane layout with our main navigation at the top, and our documentation pages index on the left of the main content.

35_warrior helmet

Imagine where you will be, and it will be so.

Separarte panes of content can often make content heavy pages easier for the visitor to handle, and easier for you as the designer to organize.

Partitions makes it easy to build these grid-based, golden layouts so you can spend more time with your content.

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.

General

Extra Sections

By default Partitions will always have a main content area as well as a sidebar. Here you can opt to also include a topper and / or footer section as well.

Gap (Gutters)

Allows you to adjust the gutters between the various partitioned sections. This is set to 0 (zero) by default.

Content

Padding Preset

Here you can choose from one of Foundry's padding presets for your content area of the Partitions tool. If you need something more than the presets offer, simply set this to None and use a Spacing tool inside the content area instead.

Content 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 the main content area. You're also provided an option to choose a custom one-off color as well or transparent, which allows a parent container or the page background to show through.

Border

Enabling this feature adds a border to the main content area.

Active Sides

Choose which sides of the content area you'd like to apply to. You can opt to apply it to all sides, or any combination of them.

Size

Allows you to choose from one of the preset border widths for ease of use, or opt to provide your own custom border width value.

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 border of the main content area. You're also provided an option to choose a custom one-off color as well.

Content Classes

Allows you to specify an options class, or classes, that will be added to the main content area of the Partitions tool. 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.

Sidebar

Location

Here you can choose which side of the page you'd like the sidebar section of the Partitions layout to appear on.

Padding Preset

Here you can choose from one of Foundry's padding presets for your sidebar area of the Partitions tool. If you need something more than the presets offer, simply set this to None and use a Spacing tool inside the sidebar instead to create custom padding.

Sidebar Width

Here you'll set the width of the sidebar itself. By default this width will be applied to the Medium through Extra Extra Large breakpoints uniformly. There is a separate setting below for configuring the mobile (Extra Small and Small) breakpoints.

If you click on the small + icon above the Sidebar Width setting you can then set individual, non-uniform widths for each of the Medium through Extra Extra Large breakpoints.

Sidebar Units

Allows you to choose the unit of measure for the Sidebar Width setting, above.

Mobile Width

Here you'll set the width of the sidebar for smaller displays and brwoser widths. The sidebar is hidden off screen, much like in the Off-Canvas tool, and is triggered by the visitor clicking ot tapping on a small icon trigger.

Mobile Units

Allows you to choose the unit of measure for the Mobile Width setting, above.

Sidebar 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 the sidebar section. You're also provided an option to choose a custom one-off color as well or transparent, which allows a parent container or the page background to show through.

Mobile 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 the sidebar section. You're also provided an option to choose a custom one-off color.

Mobile Backdrop

When enabled a background overlay will be applied between the Mobile Sidebar slideout and the background of the page that it sits on top of.

Shadow

Used to add a decorative shadow to the sidebar. Foundry provides a variety of preset shadow styles, as well as access to a user defined preset that you can configure in the Control Center. Additionally for one-off shadows there is also a custom shadow option where you can create a unique shadow style, setting its positioning, size, spread and color.

Border

Enabling this feature adds a border to the sidebar section.

Active Sides

Choose which sides of the content area you'd like to apply to. You can opt to apply it to all sides, or any combination of them.

Size

Allows you to choose from one of the preset border widths for ease of use, or opt to provide your own custom border width value.

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 border of the sidebar. You're also provided an option to choose a custom one-off color as well.

Vertical Alignment

Here we can adjust the vertical alignment of content within the sidebar section.

Sidebar Classes

Allows you to specify an options class, or classes, that will be added to the sidebar of the Partitions tool. 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.

Topper

Topper Auto Height

When enabled the topper section will adjust its height to match the content placed within it. If you choose to disable the auto height feature you'll be given a field to enter a fixed height, as well as a selctor to choose the units of measure for that fixed height.

Padding Preset

Here you can choose from one of Foundry's padding presets for your topper area of the Partitions tool. If you need something more than the presets offer, simply set this to None and use a Spacing tool inside the sidebar instead to create custom padding.

Topper 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 the topper area. You're also provided an option to choose a custom one-off color as well or transparent, which allows a parent container or the page background to show through.

Border

Enabling this feature adds a border to the topper section.

Active Sides

Choose which sides of the topper you'd like to apply to. You can opt to apply it to all sides, or any combination of them.

Size

Allows you to choose from one of the preset border widths for ease of use, or opt to provide your own custom border width value.

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 border of the sidebar. You're also provided an option to choose a custom one-off color as well.

Topper Classes

Allows you to specify an options class, or classes, that will be added to the topper section of the Partitions tool. 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.

Footer

Footer Auto Height

When enabled the footer section will adjust its height to match the content placed within it. If you choose to disable the auto height feature you'll be given a field to enter a fixed height, as well as a selctor to choose the units of measure for that fixed height.

Padding Preset

Here you can choose from one of Foundry's padding presets for your footer area of the Partitions tool. If you need something more than the presets offer, simply set this to None and use a Spacing tool inside the sidebar instead to create custom padding.

Footer 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 the footer area. You're also provided an option to choose a custom one-off color as well or transparent, which allows a parent container or the page background to show through.

Border

Enabling this feature adds a border to the footer section.

Active Sides

Choose which sides of the footer you'd like to apply to. You can opt to apply it to all sides, or any combination of them.

Size

Allows you to choose from one of the preset border widths for ease of use, or opt to provide your own custom border width value.

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 border of the sidebar. You're also provided an option to choose a custom one-off color as well.

Footer Classes

Allows you to specify an options class, or classes, that will be added to the footer section of the Partitions tool. 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.

Mobile Sidebar Toggle

Location

Here you'll choose where on the page the fixed positioned mobile sidebar toggle will be placed. You can choose the top or bottom of the page as well as the left or right.

Offsets

This setting allows you to offset the toggle from the edge of the browser. You can adjust both the vertical and horizontal offset distances independent of one another.

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 the mobile sidebar toggle. You're also provided an option to choose a custom one-off color as well.

Button Icon

This color picker is used to customize the color of the icon included in the mobile sidebar toggle button.

Outline Mode

Outline Mode can be used when working with the Preset styling mode. This basically inverses the colors and uses a tranparent background color. This is yet another way to provide variety in your page and button designs.

Gradient Overlay

We provide a quick way to add a subtle light gradient over our buttons when using Preset or Custom Styling modes. This simply includes a translucent white gradient over the button to give it a bit more depth.

Hover Opacity

When using Preset mode for your Button's style we can set the opacity of the button when the visitor hover over it. When using other modes like Custom Styling and gradients you can set separate hover styling instead of using the Opacity hover feature.

Shadow

Used to add a decorative shadow to the button. Foundry provides a variety of preset shadow styles, as well as access to a user defined preset that you can configure in the Control Center. Additionally for one-off shadows there is also a custom shadow option where you can create a unique shadow style, setting its positioning, size, spread and color.

Z-Index

Allows you to adjust the layering of elements using a custom z-index value. Here you can set the z-index for the mobile sidebar toggle.

HTML Comment

HTML Comment

Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.

Custom

This field allows you to replace the default HTML Comment with your own text.

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.