Front Page Grid#

The front page of this documentation example contains a four panel responsive grid which links to different sections of the documentation.

This grid is constructed using directives from Sphinx Design

You can add this grid to your front page. If you follow the suggested structure of your docs, you should not have to edit this much. If your folders are arranged in a different way, be sure to update the text after button-link:: to the appropriate values.

You may also considering changing the text for the buttons and card descriptions.

This grid is responsive, meaning it will change the number of columns depending on your screen size. This behavior is defined by four numbers on line 1 following .. grid::. This grid is configured for 1 column for “extra small” and “small” windows (<576px and 768px widths, respectively), and 2 columns for medium and large screens (992px and >1200px).

 1.. grid:: 1 1 2 2
 2
 3    .. grid-item-card:: Getting Started
 4    :margin: 0 3 0 0
 5
 6    Learn how to update your Sphinx theme.
 7
 8    .. button-link:: ./getting_started/index.html
 9        :color: primary
10        :expand:
11
12        To the Getting Started Guide
13
14    .. grid-item-card::  User Guide
15    :margin: 0 3 0 0
16
17    To the User Guide.
18
19    .. button-link:: ./user_guide/index.html
20        :color: primary
21        :expand:
22
23        To the User Guide
24
25    .. grid-item-card:: API Reference
26    :margin: 0 3 0 0
27
28    Most projects will also need an API reference.
29
30    .. button-link:: ./api/index.html
31        :color: primary
32        :expand:
33
34        To the API Reference.
35
36    .. grid-item-card::  Developer Guide
37    :margin: 0 3 0 0
38
39    How to contribute to molssi_doc_theme
40
41    .. button-link:: ./developer_guide.html
42        :color: primary
43        :expand:
44
45        To the Developer Guide

The Sphinx Design library has many other elements you might consider using in your documentation.