Lists
A set of utility modifiers for standard HTML ordered <ol> , unordered <ul> and definition <dl> list types.
Ordered and unordered lists
Unstyled
<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
<ol class="ol-inline">
- Item 1
- Item 2
- Item 3
- Item 4
<ul class="ul-inline">
- Item 1
- Item 2
- Item 3
- Item 4
<ul class="ul-inline" style="--gap: 2rem;">
- Item 1
- Item 2
- Item 3
- Item 4
Comma list
<ul class="list-comma">
- Item 1
- Item 2
- Item 3
- Item 4
Dividers
<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
Unstyled
<dl class="dl-none">
- Term 1
- Description 1
- Description 2
- Term 2
- Description 1
- Description 2
Inline lists
Meta list
<dl class="dl-meta">
<dl class="dl-meta" style="--dl-meta-gap: 2rem;">
<dl class="dl-meta" style="--dt-colon: '';">
Comma lists
<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
Add the sassmods.scss to your custom styles as below then include the Sass mixin anywhere below.
@use "sassmods/scss/sassmods" as *;
@include lists-css;Source
_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