Page 1 of 1

Placing topic content into responsive tiles

Posted: Mon Jun 20, 2022 9:22 pm
by 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 138 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
image.png (79.53 KiB) Viewed 1458 times

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

image.png
image.png (138.51 KiB) Viewed 1458 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!

Re: Placing topic content into responsive tiles

Posted: Fri Jun 24, 2022 7:51 am
by alin
Hi Chris,

Thank you for sharing this use case with us!

Regards,
Alin