Lists

Utility modifiers for standard HTML ordered <ol> , unordered <ul> and definition <dl> list types.

Ordered and unordered lists (anchor)

Unstyled (anchor)

<ol class="ol-none">

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4

<ul class="ul-none">

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Inline lists (anchor)

<ol class="ol-inline">

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4

<ul class="ul-inline">

  • Item 1
  • Item 2
  • Item 3
  • Item 4

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

Comma list (anchor)

<ul class="list-comma">

Dividers (anchor)

<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)

<dl class="dl-none">

Term 1
Description 1
Description 2
Term 2
Description 1
Description 2

Inline lists (anchor)

Meta list (anchor)

<dl class="dl-meta">

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

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

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

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

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

Comma lists (anchor)

<dl class="dl-comma">

Categories
Styles
Utilities
Lists
Tags
CSS
SCSS
HTML

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

Tags
Styles
Utilities
Lists
CSS
SCSS
HTML

Using the module (anchor)

To use the module load the StyleMods scss directory as follows (changing the path to suit the source files location as required) then include the Sass mixin anywhere below.

custom.scss 
@use "stylemods/scss" as *;
@include lists-css;

Source code (anchor)

lists.scss 
// ---------------------------------------------------------- 
// Lists
// ----------------------------------------------------------

@mixin list-reset {
  list-style-type: "";
  padding-inline-start: 0;
}

@mixin lists-css {

// Ordered <ol> and unordered <ul>

:where(.ul-none, .ol-none, .ul-inline, .ol-inline, .list-comma, .list-divider) {
  @include list-reset;
}

: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);
}

:where(.dl-none, .dl-meta, .dl-comma, .dl-comma-inline) dd {
  margin-inline-start: 0;
}

// Definition <dl>

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

:where(.dl-comma, .dl-comma-inline) {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--gap, 0.3rem);
}

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

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

.dl-comma dt {
  inline-size: 100%;
}

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

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

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

} // end lists-css