Page layout
Flexible page layouts that help organise content clearly and adapt easily to different needs.
Published: Last updated:
Layout options
Buckholt provides eight base page layouts designed to cover common application and content needs. Each layout defines the relationship between header, sidebar, main content, and footer, offering variations such as left or right sidebars, full-width headers, and fixed or stacked footer positions. All layouts are built using CSS Grid, allowing areas to be repositioned through configuration rather than markup changes. This approach keeps layouts flexible, easy to adapt, and consistent across products, while making it simple to switch or evolve a page structure as requirements change without rebuilding content.
The main area is the only required section in every layout and must always be present.
All other sections — header, sidebar, and footer — are optional and should be used only when they add value to the page or support the user’s task.
Layout 01
Layout 02
Layout 03
Layout 04
Layout 05
Layout 06
Layout 07
Layout 08
Main content layout
Content inside the main area is organised using three nested layout elements: panels, panes, and frames. Together, these elements provide a consistent, flexible way to structure content across pages while maintaining clear hierarchy, spacing, and visual separation. By stacking these containers from smallest to largest, Buckholt ensures layouts are easy to scan, simple to maintain, and adaptable to different content needs without relying on custom one-off layouts.
Each layer has a specific role: panels group closely related components, panes organise panels into meaningful sections, and frames wrap panes to control overall spacing and visual emphasis. This approach keeps layouts predictable while still allowing for variation where needed.
Panel
Panels (.page-panel) are the smallest layout container in the Buckholt design system. They are used to group components and patterns that are directly related to one another, such as a form and its supporting content.
- Contain: components and patterns
- Padding: none
- Gap between items: 2rem / 32px
Pane
Panes (.page-pane) sit above panels and are used to group related panels together. They typically take up most of the page’s content area and act as clear section dividers, often paired with section headings or column layouts.
- Contain: panels
- Padding: none
- Gap between panels: 4rem / 64px
Frame
Frames (.page-frame) are the largest layout container inside the main section. They wrap one or more panes and provide consistent outer spacing. Frames are also used to visually separate parts of a page, such as by applying a different background colour or styling.
- Contain: panes
- Padding: 4rem / 64px
- Gap between panes: 4rem / 64px
A frame can also include a page frame header, which behaves like a pane but is used once per frame to introduce or label its content.
Page body
The page body is the outer container for all page frames and elements inside. It defines the overall content area of the page and ensures consistent spacing and alignment across layouts. All frames sit inside the page body, making it the top-level wrapper for structured page content.
Bootstrap containers and rows
Buckholt is built on top of Bootstrap and continues to use its grid system for foundational layout structure. Core Bootstrap classes such as container, row, and col-* are used to manage page width, alignment, and responsive behaviour across breakpoints.
These grid elements can be used on their own for simple layouts, but they are most powerful when combined with Buckholt’s layout elements – frames, panes, and panels. In this setup, Bootstrap handles horizontal structure and responsiveness, while Buckholt layout elements control spacing, hierarchy, and visual grouping. This separation keeps layouts flexible and predictable, allowing teams to adjust structure without reworking content or components.
Bootstrap’s grid provides the underlying scaffolding; Buckholt builds on top of it to define how content is organised, grouped, and presented consistently across pages.
Visit Bootstrap for more info on it’s grid system.
What do they do?
In Bootstrap, containers are the outer wrapper that set the overall page width and horizontal padding. They keep content aligned and centred across different screen sizes.
Inside a container, rows are used to create horizontal sections. Rows manage alignment and spacing and ensure columns line up correctly by handling gutters.
Columns live inside rows and are used to divide that horizontal space into responsive sections. You control how wide each column is (and how it changes at different breakpoints), allowing content to stack or sit side by side depending on screen size.
Markup example
<div class="page-frame">
<div class="container"> <!-- Bootstrap container -->
<div class="row"> <!-- Bootstrap row -->
<div class="col"> <!-- Bootstrap column -->
<div class="page-pane">
<div class="page-panel">
...
</div>
</div>
</div>
<div class="col"> <!-- Bootstrap column -->
<div class="page-pane">
<div class="row"> <!-- Bootstrap row -->
<div class="col"> <!-- Bootstrap column -->
<div class="page-panel">
...
</div>
</div>
<div class="col"> <!-- Bootstrap column -->
<div class="page-panel">
...
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>