Jump To:

  1. Variables
    1. $config
  2. Mixins
    1. set()
    2. styles()
  3. Functions
    1. get()

Data-list

A highly flexible, responsive list layout designed for displaying self-explanatory or loosely structured data without relying on rigid table markup. On large screens, it perfectly aligns item content into distinct columns using CSS Subgrid, while seamlessly adapting to a clean, stacked flex view on smaller devices. Because it is fundamentally a list and not a data table, content within should be comprehensible when stacked without relying on explicit column headers. It handles complex structures through nested groupings, supports optional visual headers, and provides interactive states for clickable rows using simple presets or custom grids.

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "grid-template-columns": 1fr,
  "grid-template-columns-stacked": 100%,
  "row-gap": 0,
  "column-gap": 1rem,
  "column-gap-stacked": 0.5rem,
  "group-gap-stacked": 0.25rem,
  "padding": 1rem clamp(0.65rem, 3vw, 1.5rem),
  "overlap-borders": true,
  "border-width": 1px,
  "border-color": "rule-light",
  "border-radius": null,
  "box-shadow": null,
  "background-color": transparent,
  "background-color-even": #f9f9f9,
  "background-color-hover": #f0f0f0,
  "clickable-background-color-hover": #e8e8e8, // Slightly darker for interactive indication
  "clickable-border-color-hover": "control-border-hover",
  "stacked-breakpoint": true,
  "span-count" : 6,
  "header-font-weight": bold,
  "header-border-bottom-width": 2px,
  "header-border-bottom-color": "rule",
);
File Information
  • File: _data-list.scss
  • Group: data-list
  • Type: variable
  • Lines (comments): 34-57
  • Lines (code): 59-82

Map Properties

Name Type Default Description
grid-template-columns String 1fr The default master grid columns.
grid-template-columns-stacked String 100% The stacked grid columns (default is single column stack).
row-gap Dimension 0 The space between list items (rows). Forced to 0 if overlap-borders is true.
column-gap Dimension 1rem The space between columns.
column-gap-stacked Dimension 0.5rem The space between stacked elements when stacked within an item.
group-gap-stacked Dimension 0.25rem The space between stacked elements inside a nested column when stacked.
padding Dimension 1rem clamp(0.65rem, 3vw, 1.5rem), The padding inside list items.
overlap-borders Boolean true If true, applies a negative top margin to items to prevent double-thick borders between touching rows, and forces row-gap to 0.
border-width Dimension 1px The border width for the list items.
border-color String "rule-light" The border color key for the list items.
border-radius Dimension null The border radius for the list items.
box-shadow CssValue null The box shadow for the list items.
background-color Color transparent The default background color for items.
background-color-even Color null The background color for even-numbered items (for striping).
background-color-hover Color null The background color for items on hover.
clickable-background-color-hover Color #e8e8e8 The background color for clickable items on hover.
clickable-border-color-hover String "control-border-hover" The border color for interactive (clickable) items on hover/focus.
stacked-breakpoint String true The breakpoint below which groups stack. Defaults to the global default breakpoint via function fallback.
span-count Number 4 The number of span modifiers to create, increase if needed, (ie. data-list__column--span-2, --span-3, ...)
header-font-weight CssValue bold The font weight for the header row text.
header-border-bottom-width Dimension 2px The width for the bottom border of the header row.
header-border-bottom-color String "rule" The color key for the bottom border of the header row.

Mixins

set()

Mixin

Change modules $config

File Information
  • File: _data-list.scss
  • Group: data-list
  • Type: mixin
  • Lines (comments): 84-85
  • Lines (code): 86-88

Parameters

Name Type Description
$changes Map Map of changes

Require

styles()

Mixin

Prints component styles

File Information
  • File: _data-list.scss
  • Group: data-list
  • Type: mixin
  • Lines (comments): 97-98
  • Lines (code): 99-270

Demo

View

Require

Functions

get()

Function

Get a config option

File Information
  • File: _data-list.scss
  • Group: data-list
  • Type: function
  • Lines (comments): 90-91
  • Lines (code): 92-95

Parameters

Name Type Description
$name Map Name of property

Require