Usage

Play with Kit

© Kit jumping into logo by Mozilla

DPiCSS works with details, picture and image. Since alt attribute is entered, details summary accessibility is fulfilled, but an optional span can be added as child of summary tag to display HTML content under the thumbnail.

Here is the associated markup to use with DPiCSS:

<details data-dpicss="<OPTIONAL_LIST_OF_KEYWORDS_PARAMETERS>">
    <summary title="<OPTIONAL_TOOLTIP_TEXT>">
        <picture>
            <img src="<THUMBNAIL_IMAGE_URL>"
                alt="<THUMBNAIL_ALTERNATE_TEXT>"
                width="<NATURAL_WIDTH_OF_BOTH_IMAGES>"
                height="<NATURAL_HEIGHT_OF_BOTH_IMAGES>"
                loading="lazy">
        </picture>
        <!-- Optional <span>, can be removed if unnecessary-->
        <span>
            Optional summary text into a span tag
        </span>
    </summary>
    <picture>
        <img src="<LARGE_SIZED_IMAGE_URL>"
            alt="<LARGE_SIZED_IMAGE_ALTERNATE_TEXT>"
            width="<NATURAL_WIDTH_OF_BOTH_IMAGES>"
            height="<NATURAL_WIDTH_OF_BOTH_IMAGES>"
            loading="lazy">
    </picture>
    <!-- Optional below - Any content as "details" tag can display -->
</details>

• <OPTIONAL_LIST_OF_KEYWORDS_PARAMETERS>
  The keyword based parameters of DPiCSS
• <OPTIONAL_TOOLTIP_TEXT>
  May be useful if no optional span is set into the summary tag, even if <img alt="..." attribute is there to describe your stuff. Also consider using aria-label.
• <THUMBNAIL_IMAGE_URL>
  The URL of the thumbnail.
• <THUMBNAIL_ALTERNATE_TEXT>
  The alternate text of the thumbnail. Enter a proper alt attribute that describes image and action of the thumbnail.
• <NATURAL_WIDTH_OF_BOTH_IMAGES>
  The natural width of both images. It is highly recommended for the thumbnail to have the same width as the large sized image, otherwise aspect ratio issues may occur.
• <NATURAL_HEIGHT_OF_BOTH_IMAGES>
  The natural height of both images. It is highly recommended for the thumbnail to have the same height as the large sized image, otherwise aspect ratio issues may occur.
• <LARGE_SIZED_IMAGE_URL>
  The URL of the large sized image.
• <LARGE_SIZED_IMAGE_ALTERNATE_TEXT>
  The alternate text of the large sized image. Enter a proper alt attribute that describes the large sized image.

Simple example

Here is a fully fonctionnal minimalistic example with a still AVIF file thumbnail and an animated AVIF.

Interoperability

Since DPiCSS uses CSS and HTML5 tags, it may interfere with others librairies or frameworks. The following sandboxes includes most common CSS libraries to check DPiCSS renders properly across every framework or library. Feel free to suggest other libraries or report issues.

With Bootstrap

Example of a page with Bootstrap and DPiCSS.

With Tailwind

Example of a page with Tailwind CSS and DPiCSS.

With Reset CSS

Example of a page with Eric A. Meyer Reset CSS and DPiCSS.

Normalize CSS

Example of a page with Normalize CSS and DPiCSS.