frame·plates - Tables / Lists

Entry’s title	1st col	2nd col	3rd col	4th col
Renault Twingo 2023	X7868-9448-00928	XAUZZ17449930020	XAG-ZZ0440030029	X-9289 4432 8820
Ford Focus Tournier 1.0eco 5-Gang	@7868-9288-00998	ZZ1782993WAU0000	PSA-DL0018810089	ZUR-428962328890
Ferrari Enzo 612	#7868-9288-00998	WAUZZ17829930000	VAG-ZZ0020030089	L-9289 5232 8890
Brabus GT950	WAUZZ17829930000	#7868-9288-00998	L-9289 5232 8890	VAG-ZZ0020030089

There are dozens of methods to display tabular content responsively, this one is relatively simple and based on plain html table markup. It solves the problem of scrolling away the column headers – without scripting.

The labels for mobile (single column) are created as :before pseudo element, the disadvantage here is: content is in the stylesheet, which screen readers do not like. But in the th the information is still present in the source, so this shouldn‘t be a problem.

In order not to require a new stylesheet build the very classes to edit the pseudo-contents are kept in the head section of the respective page. Like this one here:

@media all and (min-width: 20em) {
  table td:nth-child(1):not(:empty):before {
    content: " ";
  }
  table td:nth-child(2):not(:empty):before {
    content: "1st col";
  }
  table td:nth-child(3):not(:empty):before {
    content: "2nd col";
  }
  …
}

/* pseudo classes switched off */
@media all and (min-width: 48em) {
  table td:before {
    display: none;
  }
}

Unordered List
The misson here is to integrate all structural html without messing too much with it. Which, again, means as little markup as possible, so working in source code is mostly content, not markup.
All we do here is remove non-grid dimensions, paddings and sizes and maintain a figure-backgrund-contrast that fits the environment
Beyond that most of the content formatting is applicable on <ul> and <li> what these examples should help illustrate
Here we use .card for the surrounding container and .smaller for the entire list.

Ordered List
The misson here is to integrate all structural html without messing too much with it. Which, again, means as little markup as possible, so working in source code is mostly content, not markup.
All we do here is remove non-grid dimensions, paddings and sizes and maintain a figure-backgrund-contrast that fits the environment
Here we use .mono for the entire list.

Larger List
The misson here is to integrate all structural html without messing too much with it.
Which, again, means as little markup as possible, so working in source code is mostly content, not markup.
All we do here is remove non-grid dimensions, paddings and sizes and maintain a figure-backgrund-contrast that fits the environment
Here we use .larger for the entire list.

Smallest List
The misson here is to integrate all structural html without messing too much with it.
Which, again, means as little markup as possible, so working in source code is mostly content, not markup.
All we do here is remove non-grid dimensions, paddings and sizes and maintain a figure-backgrund-contrast that fits the environment
Here we use .card for the surrounding container and .smallest for the entire list.

this is a definition term: and this would be the definition description, then
grain of salt: We include them here to adjust the few proportional definitions inherent to dl dt dd to the grid system, but nothing beyond that. Do not use this element (nor <ul> elements) to merely create indentation on a page. Although it works, this is a bad practice and obscures the meaning of description lists.
how to use: Just use the unmodified html-tags inside a column (inside a section) to position the list and control the width of the list. To prevent bad readability – should a dl ever make it into a full-width container (on the desktop end) – there is a character-per-line limit in place 75ch and an slightly increased line-height of 1.5, but less than the regular paragraphs here (1.75).; <section class="row-right">
  <div class="co-34">
    <dl>
      <dt>term</dt>
      <dd>description</dd>
    </dl>
  </div>
</section>; Due to the horizontal/vertical ambiguity of definition lists on the one hand and the main-axis/secondary-axis of flex on the other we don‘t aim for two-column layouts with dls, since the definition allows for more than one description for each term, which messes with the alignment a lot. So if we need a grid-like appearance, just use columns.

tables & lists

Lists

Definition Lists