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)