Filtering

You can filter content just adding the fl fl-{{ filter name }} classes in the elements you want filter, NtDocutils will create the buttons dynamically at the left bottom corner and set the first filter that it finds as default. E.g:

.. class:: fl fl-linux

**Text for Linux**

.. class:: fl fl-windows

**Text for Windows**

Will result in:

Text for Linux

Text for Windows

And creates two buttons at the bottom left corner with the filters names.

Attachments

You can set a list of useful files in the button by adding the following lines in the article:

.. raw:: html

    <script>
      ATTACHMENTS = [
        {
          url: 'index.rst',
          name: 'NtDocutils MDL Theme 1.0.0.rst',
          icon: 'code'
        }
      ]
    </script>

.. raw:: html

    <script>
      ATTACHMENTS = [
        {
          "url": URL,
          "name": DISPLAY_NAME,
          "icon": ICON_NAME
        },
        ...
        {
          "url": URL_N,
          "name": DISPLAY_NAME_N,
          "icon": ICON_NAME_N
        }
      ]
    </script>

Translations

You can link article translations in the button by adding the following lines in the article:

.. raw:: html

    <script>
      LANGS = [
        {
          url: '/es/articulos/ntdocutils/',
          name: 'Español (Spanish)'
        }
      ]
    </script>

.. raw:: html

    <script>
      LANGS = [
        {
          "url": URL,
          "name": DISPLAY_NAME
        },
        ...
        {
          "url": URL_N,
          "name": DISPLAY_NAME_N
        }
      ]
    </script>

Versions

You can link article versions in the button by adding the following lines in the article:

.. raw:: html

    <script>
      VERSIONS = [
        {
          url: 'v1.0.0/',
          name: 'v1.0.0'
        }
      ];
    </script>

.. raw:: html

    <script>
      VERSIONS = [
        {
          "url": URL,
          "name": DISPLAY_VERSION_NUMBER
        },
        ...
        {
          "url": URL_N,
          "name": DISPLAY_VERSION_NUMBER_N
        }
      ];
    </script>

Printing

There are some special classes that let you improve the way your article is printed when something goes wrong; for example, some content doesn't fit at the page or simply can't be showed as it should in paper. These classes are:

• .media-screen: shows the element just in a screen.

• .media-print: shows the element just in paper.

Examples:

• White spaces for paper (useful for ensure printing format):

.. Page break

.. |pb| raw:: html

    <div class="media-print" style="page-break-after: always"></div>

.. Line break

.. |lb| raw:: html

    <br class="media-print"/>

• Display content for specific device:

.. Screen

.. raw:: html

    <object data="example.html" type="text/html" height="400px"
        width="100%" class="media-screen">
    </object>

.. Paper

.. image:: images/example.png
    :class: media-print

Responsiveness

With responsiveness classes is easy to improve how the article is viewed in different sized screens, just use large-screen and small-screen when you want it work, try it, resize the window.

##########################
# LARGE SCREEN DETECTED! #
##########################

##########################
# SMALL SCREEN DETECTED! #
##########################

.. code:: text
    :class: large-screen

    ##########################
    # LARGE SCREEN DETECTED! #
    ##########################

.. code:: text
    :class: small-screen

    ##########################
    # SMALL SCREEN DETECTED! #
    ##########################

Theme customization

You can use the customize tool from the MDL site to get a custom .css with your preferred colors, after that, you must setup some styles by creating a file with the following template:

customize.css

1 /* Ribbon */
2 
3     .ribbon {
4         background-color: {{ Primary color }};
5     }
6 
7 /* ... */

83 /* ... */
84 
85 /* Links */
86 
87     /*a {
88         color: {{ Accent color }};
89     }*/
90 
91 /* ... */

The recommended color for the ribbon background (line 4) is the primary color from the theme, you can get this value searching the property color at the rule .mdl-button.mdl-button--colored in the file downloaded from MDL (material.min.css). The links (line 88) use the accent color from the theme, but in some cases this make them a little unreadable, so you could uncomment it and use the primary color. You should feel free editing the others rules, but usually they will be fine with that values. When you are ready, you have to run NtDocutils with the following option:

$ ntdocutils -T mdl \
    --stylesheet=path/to/material.min.css,path/to/customize.css \
    source.rst destination.html

C:\> ntdocutils -T mdl \
       --stylesheet=path/to/material.min.css,path/to/customize.css \
       source.rst destination.html