executablebooks / sphinx-panels

A sphinx extension for creating panels in a grid layout

sphinx-panels

🚨This repository is not actively maintained. Use sphinx-design instead! See the migration guide and this github issue for more information.🚨

A sphinx extension for creating document components optimised for HTML+CSS.

• The panels directive creates panels of content in a grid layout, utilising both the Bootstrap 4 grid system, and cards layout.

• The link-button directive creates a click-able button, linking to a URL or reference, and can also be used to make an entire panel click-able.

• The dropdown directive creates toggle-able content.

• The tabbed directive creates tabbed content.

• opticon and fa (fontawesome) roles allow for inline icons to be added.

.. panels::

    Content of the top-left panel

    ---

    Content of the top-right panel

    ---

    Content of the bottom-left panel

    ---

    Content of the bottom-right panel

The link-button directive can be used to create buttons, which link to a URL (default) or reference. They can be styled by Bootstrap button classes:

.. panels::

    .. link-button:: https://example.com
        :type: url
        :tooltip: hallo
        :classes: btn-success

    ---

    This entire panel is clickable.

    +++

    .. link-button:: panels/usage
        :type: ref
        :text: Go To Reference
        :classes: btn-outline-primary btn-block stretched-link

The dropdown directive combines a Bootstrap card with the HTML details tag to create a collapsible drop-down panel.

.. dropdown:: Click on me to see my content!

    I'm the content which can be anything:

    .. link-button:: https://example.com
        :text: Like a Button
        :classes: btn-primary

Development

To run the tests:

pip install tox
tox -e py37-sphinx3

To test building the docs:

tox -e docs-clean html
tox -e docs-rebuild html

For live builds of the docs:

tox -e docs-live html

You can also build the docs in different themes, by setting HTML_THEME to one of alabaster, sphinx_rtd_theme, pydata_sphinx_theme, sphinx_book_theme:

export HTML_THEME=sphinx_book_theme
tox -e docs-live

For code style and SCSS -> CSS updating:

pip install pre-commit
pre-commit run --all