Placing topic content into responsive tiles

Having trouble installing Oxygen XML WebHelp? Got a bug to report? Post it all here.
chrispitude
Posts: 529
Joined: Thu May 02, 2019 2:32 pm

Placing topic content into responsive tiles

Post 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 10 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 676 times

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

image.png
image.png (138.51 KiB) Viewed 676 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
Site Admin
Posts: 221
Joined: Thu Dec 24, 2009 11:21 am

Re: Placing topic content into responsive tiles

Post by alin »

Hi Chris,

Thank you for sharing this use case with us!

Regards,
Alin
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com
Post Reply