Allow assigning CSS class to listing items via YAML params

[petrbouchal]

Description

For listings, especially of type card, it would be helpful to be able to assign a CSS class either globally via a param in the listing YAML setting and/or via a field within each item (when content is defined in YAML, this is easy - it's not clear whether this is feasible for listings where content is derived from the file structure).

This would make it easy to (a) style whole listings via CSS and (b) create a visual key to different types of listing items.

Currently, this requires creating a custom listing where only one line of code of the EJS template differs from the built-in default.

An example implementing a combination of both approeaches (applying a class to all listing items, currently via template-params and a local one via a custom field, is at https://github.com/petrbouchal/pank-cz/blob/live-prelim/ejs/inspirace.ejs.

[mcanouil]

Thanks for the feedback.

Your link does not work. Private repository?

Why not target CSS/HTML elements to customise your listings? It works pretty well.
You can use include-in-header for specific pages or use theme option to inject complementary SCSS file.

[petrbouchal]

Thanks. Apologies, repo now made public.

For targeting all items, what you suggest would work. But it requires overriding rules and also targeting specific #elements, so I though assigning a class to all items in a specific listing would make this more straightforward. But I agree this use case can be served without any new feature.

For assigning a different CSS rule to each listing item (or, more likely, groups of items), this would have to currently be done by matching text or targeting elements via some data- param (ideally custom)? That is probably possible too but seems quite convoluted and possible brittle.

[mcanouil]

I though assigning a class to all items in a specific listing would make this more straightforward

The main issue I see with this is that it would require a lot of parameters to target all components of a listing. Additionally, listing is not only "cards", it can be "table" or "default".
In the end, to me it seems to include more complexity rather than simplifying customisation using (S)CSS classic approach.

Here is an example to reduce the font-size of "other values" inside each cards:

---
title: "Data"
listing:
  - id: data-listing
    contents: data
    type: grid
include-in-header:
  text: |
    <style type="text/css">
    .small-other-values .quarto-grid-item .card-other-values {
      font-size: .6em;
    }
    </style>
---

::: {#data-listing .small-other-values}
:::

[petrbouchal]

Thanks, that makes sense.

The use case that this does not cover is for different items to be assigned different classes/rules - which has usability relevance in that one can e.g. colour different types of items differently.

[mcanouil]

You can use CSS rules to colour differently the nth elements.