Sections · Barebones

Barebones includes a small section pattern for spacing and width control.

Sections are commonly used in templates and custom blocks to create consistent vertical rhythm across the page.

Base section class

Use .section as the base class for page sections and block wrappers. The base class is mostly a hook for section modifiers.

<section class="section">
    <div class="container">
        Content
    </div>
</section>

Spaced sections

Use .section--spaced to add vertical padding.

The padding uses the --section-vertical-padding custom property.

<section class="section section--spaced">
    <div class="container">
        Content
    </div>
</section>

.section.section--spaced {
    padding: var(--section-vertical-padding) 0;
}

The default section spacing is set on the body.

This keeps section spacing consistent while still allowing responsive adjustment.

When two spaced sections appear next to each other, the second section has its top padding removed. This avoids doubling the vertical space between consecutive sections.

.section--spaced + .section--spaced {
    padding-top: 0;
}

When the first section inside .main is spaced, its top padding is removed. This keeps the first section closer to the top of the page content.

.main {
    .section--spaced {
        &:first-child {
            padding-top: 0;
        }
    }
}

body {
    --section-vertical-padding: 75px;
}

On smaller screens, the --section-vertical-padding value is reduced.

@include resp-max($breakpoint-sm) {
    --section-vertical-padding: 25px;
}

Content width sections

Use .section--width-content to constrain a section to the grid max width.

This applies the configured grid max width and centres the section.

<section class="section section--width-content">
    Content
</section>

Block sections

Custom blocks commonly use .section with a block-specific modifier.

The shared .section and .section--spaced classes handle structure and spacing.

The block-specific class, such as .section--split-content, is used for styles that only belong to that block.

<section class="section section--split-content section--spaced">
    <div class="container">
        ...
    </div>
</section>

Customising sections

Section styles live in assets/styles/layout/_sections.scss.

The section spacing variable is defined in assets/styles/base/_base.scss.

Use these files for shared section behaviour. Keep block-specific section styles in the relevant block Sass file.