Lists

A set of utility modifiers for standard HTML ordered <ol> , unordered <ul> and definition <dl> list types. Disabled by default, enable with $enable-lists: true; in the configuration.scss document.

Ordered and unordered lists (anchor)

Unstyled (anchor)

The markers are removed with list-style-type: "" so retain the role of a list, the inline padding is removed with the --pl: (padding-inline-start) variable used with the typography styles which can be used to control the indentation of both list types.

<ol class="ol-none">

Item 1
Item 2
Item 3
Item 4

<ul class="ul-none">

Item 1
Item 2
Item 3
Item 4

Inline lists (anchor)

The inline list utility uses flex and flex-wrap values to display the list items inline. If the flex display utilities are enabled they can also be used with .ol-none or .ul-none to achieve the same result.

<ol class="ol-inline">

Item 1
Item 2
Item 3
Item 4

<ul class="ul-inline">

Item 1
Item 2
Item 3
Item 4

The column-gap between items adjustable using the --gap variable inline, or using the responsive gap spacing utilities if enabled.

<ul class="ul-inline" style="--gap: 2rem;">

Item 1
Item 2
Item 3
Item 4

Comma list (anchor)

An inline flex list as described above with commas included after all items except the last child. The spacing after each comma is adjustable using either the --gap variable inline as demonstrated above or with the responsive gap utilities if enabled.

<ul class="list-comma">

Item 1
Item 2
Item 3
Item 4

Dividers (anchor)

A single divider utility that can be customized for inline list components requiring item seperators. Inspired by Bootstrap's customizable breadcrumb dividers method as demonstrated on their website, the technique has also been replicated for the customizable list markers utility above.

<ul class="list-divider">

<ul class="list-divider" style="--divider: '/';">

<ul class="list-divider" style="--divider: '>';">

The divider spacing uses padding values and can also be adjusted inline:

<ul class="list-divider" style="--divider-px: 1rem;">

Definition lists (anchor)

Unstyled (anchor)

Unstyled definition lists remove the <dd> items left margin using the --dd-ml variable included with the typography list styles.

<dl class="dl-none">

Term 1: Description 1; Description 2
Term 2: Description 1; Description 2

Inline lists (anchor)

With multiple combinations of terms <dt> and descriptions <dd> possible with definition lists a flexible generic inline utility is impractical to style so is not provided, but the list type can be perfect when styled inline with specific controlled information so the following list utilities are provided.

Meta list (anchor)

The meta list <dl class="dl-meta"> utility is designed for non-nested definition lists with a single description <dd> for each term item <dt>, useful for information such as page article metadata.

<dl class="dl-meta">

Title: Hello world!
Author: Joe Bloggs
Posted: 6 May 2024
Updated: 20 June 2024

The utility uses grid and grid-template-columns properties with the gap adjustable with a variable inline or using the gap spacing utilities if enabled.

<dl class="dl-meta" style="--dl-meta-gap: 2rem;">

Title: Hello world!
Author: Joe Bloggs
Posted: 6 May 2024
Updated: 20 June 2024

The colon after each term is included with CSS content and uses regular font weight to be typographical correct. If preferred it can be removed inline using the --dt-colon: variable.

<dl class="dl-meta" style="--dt-colon: '';">

Title: Hello world!
Author: Joe Bloggs
Posted: 6 May 2024
Updated: 20 June 2024

Comma lists (anchor)

The comma list utility is designed for multiple non-nested <dt> and <dd> list items seperated by commas. The utility uses flex and flex-wrap properties with the <dt> items given 100% width.

<dl class="dl-comma">

Categories: Styles; Utilities; Lists
Tags: CSS; SCSS; HTML

The comma inline list utility is designed for a single <dt> item with multiple <dd> list items seperated by commas. The colon after each term item uses the same customizable style as the .dl-meta utility as described above.

<dl class="dl-comma-inline">

Tags: Styles; Utilities; Lists; CSS; SCSS; HTML

Customize (anchor)

The lists styles can be customized in the _lists.scss document in the [styles/utilities] directory, they're written as standard CSS with limited Sass functionality included for compiling purposes.

Styles

//  ------------------------------------------------------------
//  List utilities
//  ------------------------------------------------------------
@use "../../configuration" as *;

@if $enable-lists {

:where(.ul-none, .ol-none, .ul-inline, .ol-inline, .list-comma, .list-divider) {
  --pl: 0;
  list-style-type: "";
}

:where(.ul-inline, .ol-inline, .list-comma, .list-divider) {
  display: flex;
  flex-wrap: wrap;
}

:where(.ul-inline, .ol-inline) {
  column-gap: var(--gap, .75rem);
}

:where(.list-comma) {
  column-gap: var(--gap, .3rem);
}

.list-comma *:not(:last-child):after {
  content: ",";
}

.list-divider *:not(:first-child) {
  padding-inline-start: var(--divider-px, .5rem);
}

.list-divider *:not(:last-child):after {
  content: var(--divider, "|");
  padding-inline-start: var(--divider-px, .5rem);
}

.dl-none {
  --dd-ml: 0;
}

.dl-meta {
  --dd-ml: 0;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  column-gap: var(--dl-meta-gap, .75rem);
}

:where(.dl-comma, .dl-comma-inline) {
  --dd-ml: 0;
  --dt-mt: .25rem;
  --dt-me: .15rem;
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--gap, .3rem);
}

.dl-comma-inline dt {
  margin-inline-end: var(--dt-me);
}

:where(.dl-meta, .dl-comma-inline) dt:after {
  font-weight: 400;
  content: var(--dt-colon, ":");
}

.dl-comma dt {
  width: 100%;
}

:where(.dl-comma) dt:not(:first-child) {
  margin-block-start: var(--dt-mt);
}

:where(.dl-comma, .dl-comma-inline) dd:not(:last-child):after {
  content: ",";
}

:where(.dl-comma, .dl-comma-inline) dd:not(:last-child):has(+ dt):after {
  content: "";
}

} // End lists