Lists

Utility class modifiers for HTML ordered, unordered and definition lists.

Source file: src/css/lists.css
View on GitHub: https://github.com/pmbrown/ming-css/blob/main/src/css/lists.css

Included with:

ming.css
ming.min.css
ming.mono.css
ming.mono.min.css

Unordered and ordered lists (anchor)

Unstyled (anchor)

<ul class="ul-none">

Item 1
Item 2
Item 3
Item 4

<ol class="ol-none">

Item 1
Item 2
Item 3
Item 4

Inline (anchor)

<ul class="ul-inline">

Item 1
Item 2
Item 3
Item 4

<ol class="ol-inline">

Item 1
Item 2
Item 3
Item 4

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

Item 1
Item 2
Item 3
Item 4

Comma (anchor)

<ul class="list-comma">

Item 1
Item 2
Item 3
Item 4

<ol class="list-comma">

Item 1
Item 2
Item 3
Item 4

<ul class="list-comma" style="--gap: 0.65rem;">

Item 1
Item 2
Item 3
Item 4

Dividers (anchor)

<ul class="list-divider">

Item 1
Item 2
Item 3
Item 4

<ol class="list-divider">

Item 1
Item 2
Item 3
Item 4

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

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

Definition lists (anchor)

Unstyled (anchor)

<dl class="dl-none">

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

Bold term (anchor)

<dl class="dt-bold">

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

Meta list (anchor)

Designed to use with one <dd> item per <dt> item.

<dl class="dl-meta">

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

<dl class="dl-meta dt-bold">

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

<dl class="dl-meta dt-bold" style="--gap: 1.5rem;">

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

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

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

Descriptions inline (anchor)

<dl class="dd-inline">

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

<dl class="dd-inline" style="--gap: 1rem;">

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

Comma lists (anchor)

<dl class="dl-comma">

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

<dl class="dl-comma dt-bold">

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

<dl class="dl-comma" style="--gap: 0.65rem;">

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

Designed to use with one <dt> element only per list.

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

Tags: CSS; SCSS; HTML

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

Tags: CSS; SCSS; HTML

<dl class="dl-comma-inline dt-bold" style="--pad: 0.65rem;">

Tags: CSS; SCSS; HTML

Previous: Images

Next: Text