Simply pip install
sphinx-design and add the extension to your
extensions = ["sphinx_design"]
For using with MyST Parser, for Markdown documentation, it is recommended to use the
colon_fence syntax extension:
extensions = ["myst_parser", "sphinx_design"] myst_enable_extensions = ["colon_fence"]
To hide the the title header of a page, add to the top of the page:
--- sd_hide_title: true ---
Chrome >= 60
Firefox >= 60
iOS >= 12
Safari >= 12
Explorer >= 12
Migrating from sphinx-panels¶
This package arose as an iteration on sphinx-panels, with the intention to make it more flexible, easier to use, and minimise CSS clashes wth sphinx themes.
Reduce direct use of CSS classes¶
These are replaced by the use of directive options, which are:
Easier to understand
Easier to validate
Easier to work with non-HTML outputs
Easier to improve/refactor
panel directive replaced¶
panel directive is replaced by the use of the top-level
grid-item-card directive children, rather than delimiting cards by
If no card is needed, then the
grid-item directive can be used instead and
card can be also used independently of grids.
.. panels:: is equivalent to
.. grid:: 1 2 2 2 with option
tabbed directive replaced¶
tabbed directive is replaced by the use of the top-level
tab-item directive children.
:sync: option allows to synchronize tab selection across sets.
tab-set-code directive provides a shorthand for synced code examples.
octicon icon role¶
The default SVGs produced are now sized relative to the surrounding text (i.e. using
The syntax for specifying a custom size and adding classes is also changed.
This is similar for favicon icons, where the
, delimiter is also replaced by
Updated Bootstrap CSS from v4 -> v5, which in particular allows top-level grid to define both column numbers and gutter sizes.
All CSS classes are prefixed with
sd- (no clash with other theme/extension CSS)
All colors use CSS variables (customisable)