Placing topic content into responsive tiles

[chrispitude]

Hi everyone,

The following testcase shows how you can place any DITA topic content into responsive CSS flex tiles:

webhelp_topic_content_in_tiles.zip

(28.36 KiB) Downloaded 142 times

The tile content should be in <li> elements, contained inside an <ul outputclass="flex"> element. For example,

Code: Select all

<ul id="ul_tlg_ys1_ytb" outputclass="flex">
  <li>
    <p>"Getting started" links</p>
    <ul id="ul_vhk_1fq_wtb">
      <li>link</li>
      <li>link</li>
      <li>link</li>
    </ul>
    <image href="oxygen.png" placement="break" id="image_fkz_px1_ytb"
      outputclass="flex-end"/>
  </li>
  <li>
    <p>Setup/configuration links</p>
    <ul id="ul_n55_1fq_wtb">
      <li>link</li>
      <li>link</li>
    </ul>
    <image href="oxygen.png" placement="break" outputclass="flex-end"
      id="image_l1z_qx1_ytb"/>
  </li>

Also note that the images have outputclass="flex-end", which applies additional CSS rules to move the element to the bottom of the tile. Here is what it looks like in the Oxygen editor (with an alternative CSS applied to highlight flex list items):

image.png (79.53 KiB) Viewed 1491 times

And here is what the WebHelp output looks like in a browser:

image.png (138.51 KiB) Viewed 1491 times

You should be able to put any content allowed by DITA into the list items.

This idea was inspired by Alin's work in this template. Thank you Alin!

[alin]

Hi Chris,

Thank you for sharing this use case with us!

Regards,
Alin