Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add directive(s) to support grids #342

Open
2bndy5 opened this issue Apr 13, 2024 · 0 comments
Open

add directive(s) to support grids #342

2bndy5 opened this issue Apr 13, 2024 · 0 comments
Labels
enhancement New feature or request feat: upstream a feature that exists upstream but is not well supported in sphinx-immaterial

Comments

@2bndy5
Copy link
Collaborator

2bndy5 commented Apr 13, 2024

In mkdocs-material v9.5.0, support for grids was introduced. While upstream requires a third-party mkdocs plugin (& raw HTML for <div> container), we could simply use a combination of rst-class and container directives.

rST equivalent to material MD

.. rst-example:: Card grid

    .. rst-class:: grid cards

        .. container::

            - :si-icon:`fontawesome/brands/html5` **HTML** for content and structure
            - :si-icon:`fontawesome/brands/js` **JavaScript** for interactivity
            - :si-icon:`fontawesome/brands/css3` **CSS** for text running out of boxes
            - :si-icon:`fontawesome/brands/internet-explorer` **Internet Explorer** ... huh?
.. rst-example:: Card grid, blocks

    .. rst-class:: grid

        .. container::

            .. rst-class:: card

            :si-icon:`fontawesome/brands/html5` **HTML** for content and structure

            .. rst-class:: card

            :si-icon:`fontawesome/brands/js` **JavaScript** for interactivity

            .. rst-class:: card

            :si-icon:`fontawesome/brands/css3` **CSS** for text running out of boxes

                :si-icon:`fontawesome/brands/internet-explorer` **Internet Explorer** ... huh?
.. rst-example:: Generic grid

    .. rst-class:: grid

        .. container::

            .. md-tab-set::

                .. md-tab-item:: Unordered list

                    * Sed sagittis eleifend rutrum
                    * Donec vitae suscipit est
                    * Nulla tempor lobortis orci

                .. md-tab-item:: Ordered list

                    1. Sed sagittis eleifend rutrum
                    2. Donec vitae suscipit est
                    3. Nulla tempor lobortis orci

            .. code-block:: rst
                :caption: Content tabs

                .. md-tab-set::

                    .. md-tab-item:: Unordered list

                        * Sed sagittis eleifend rutrum
                        * Donec vitae suscipit est
                        * Nulla tempor lobortis orci

                    .. md-tab-item:: Ordered list

                        1. Sed sagittis eleifend rutrum
                        2. Donec vitae suscipit est
                        3. Nulla tempor lobortis orci

It would nicer to have a directive that acts as syntactic sugar to automatically achieve this. For inspiration, sphinx-design has a grid and grid-tem directives, although they are a bit more deterministic than upstream's implementation.

@2bndy5 2bndy5 added enhancement New feature or request feat: upstream a feature that exists upstream but is not well supported in sphinx-immaterial labels Apr 13, 2024
@2bndy5 2bndy5 changed the title add directive to support grids add directive(s) to support grids Apr 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request feat: upstream a feature that exists upstream but is not well supported in sphinx-immaterial
Projects
None yet
Development

No branches or pull requests

1 participant