Lists

Barebones includes minimal default styling for ordered and unordered lists. The list styles keep standard list behaviour intact while aligning list spacing with the theme’s base spacing unit.

Ordered and unordered lists

Ordered and unordered lists receive a left margin based on the $base-spacing-unit. This gives list markers enough room while keeping indentation consistent with the rest of the spacing system.

SCSS
ul,
ol {
    margin-left: $base-spacing-unit;
}

Nested lists

Nested lists inside list items have their bottom margin removed. This avoids excessive spacing when lists are nested.

SCSS
li {
    > ul,
    > ol {
        margin-bottom: 0;
    }
}

Unstyled lists

Use .list--unstyled to remove list indentation and markers. The class removes the left margin and default list style.

HTML
<ul class="list--unstyled">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>
SCSS
.list--unstyled {
    margin-left: 0;
    list-style: none;
}

Navigation menus use their own component styles.

The .nav class removes list styling and resets margin for menu lists.

HTML
<ul class="nav">
    <li><a href="/">Home</a></li>
    <li><a href="/about/">About</a></li>
</ul>

Customising lists

List styles live in assets/styles/base/_lists.scss.

Use this file for broad list defaults. For component-specific list styling, place styles with the relevant component, layout, or block.