Shibuya
sphinx-design¶
sphinx-design extension add many components for Sphinx documentation.
Documentation: https://sphinx-design.readthedocs.io/
Source Code: https://github.com/executablebooks/sphinx-design
Install¶
pip install sphinx-design
Then, add the extension to your conf.py:
extensions = [
# ...
"sphinx_design",
]
Examples¶
Single card¶
A simple card:
Card content
A full featured card:
Header
Card content
Card with header:
Header
Card content
Card with footer:
Card content
Grid items¶
A
B
C
Grid cards¶
If you’re new to Python and Sphinx, this is a great place to start.
Tailor configurations to meet your specific requirements with customizable settings.
Learn the syntax of reStructuredText and examine how it is formatted.
Your contributions can make a meaningful impact and help drive the project forward!
Nesting grids¶
Multi-line
content
Content
Content
Content
Content
Dropdown¶
Dropdown title
Dropdown content
Tabs¶
Directive tab-set:
Content 1
Content 2
Directive tab-set-code:
foo = "str"
a = 1;
Directive tab-set with code-block:
Badges¶
plain badge
primary primary-line
secondary secondary-line
success success-line
info info-line
warning warning-line
danger danger-line
light light-line
muted muted-line
dark dark-line
black black-line
white white-line
Octicon Icons¶
alert:
bell:
book:
clock:
Article Info¶
Executable Books
Jul 24, 2021
5 min read
Only with Shibuya¶
By adding a class of surface, a card would be rendered:
.. grid:: 1 1 2 3
:class-row: surface
A visually stunning and modern design that makes your documentation look professional and appealing.
Look great on all devices, from desktops to smartphones, without compromising on readability or functionality.
Users can switch between light and dark modes according to their preference.
Customize the colors to match your brand or personal preferences with radix colors.
Great CSS/UI for lots of Jupyter related extensions, enhance your AI documentation.
Layouts of landing page, simple one page, and three-column documentation page.