1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
|
---
sd_hide_title: true
---
# sphinx-design
::::::{div} landing-title
:style: "padding: 0.1rem 0.5rem 0.6rem 0; background-image: linear-gradient(315deg, #438ff9 0%, #1572f4 74%); clip-path: polygon(0px 0px, 100% 0%, 100% 100%, 0% calc(100% - 1.5rem)); -webkit-clip-path: polygon(0px 0px, 100% 0%, 100% 100%, 0% calc(100% - 1.5rem));"
::::{grid}
:reverse:
:gutter: 2 3 3 3
:margin: 4 4 1 2
:::{grid-item}
:columns: 12 4 4 4
```{image} ./_static/logo_square.svg
:width: 200px
:class: sd-m-auto sd-animate-grow50-rot20
```
:::
:::{grid-item}
:columns: 12 8 8 8
:child-align: justify
:class: sd-text-white sd-fs-3
A sphinx extension for designing beautiful, screen-size responsive web-components.
```{button-ref} get_started
:ref-type: doc
:outline:
:color: white
:class: sd-px-4 sd-fs-5
Get Started
```
:::
::::
::::::
Conflict free CSS
: All CSS classes are prefixed, to avoid conflicts with other frameworks.
Works without JavaScript
: JavaScript is not required for any "essential" functionality.
Configurable
: All colors can be configured using CSS variables.
Supports non-HTML output formats
: Components degrade gracefully for non-HTML formats.
```{toctree}
:hidden:
get_started
```
```{toctree}
:caption: Components
:hidden:
grids
cards
dropdowns
tabs
badges_buttons
additional
```
```{toctree}
:caption: Styling
:hidden:
css_variables
css_classes
```
```{toctree}
:caption: Themes
:hidden:
alabaster <https://sphinx-design.readthedocs.io/en/alabaster-theme>
sphinx-book-theme <https://sphinx-design.readthedocs.io/en/sbt-theme>
pydata-sphinx-theme <https://sphinx-design.readthedocs.io/en/pydata-theme>
sphinx-rtd-theme <https://sphinx-design.readthedocs.io/en/rtd-theme>
furo <https://sphinx-design.readthedocs.io/en/furo-theme>
```
```{toctree}
:caption: Development
:hidden:
changelog
```
::::{grid} 1 2 2 3
:margin: 4 4 0 0
:gutter: 1
:::{grid-item-card} {octicon}`table` Grids
:link: grids
:link-type: doc
Screen size adaptable grid layouts.
:::
:::{grid-item-card} {octicon}`note` Cards
:link: cards
:link-type: doc
Flexible and extensible content containers.
:::
:::{grid-item-card} {octicon}`chevron-down` Dropdowns
:link: dropdowns
:link-type: doc
Hide content in expandable containers.
:::
:::{grid-item-card} {octicon}`duplicate` Tabs
:link: tabs
:link-type: doc
Synchronisable, tabbed content sets.
:::
:::{grid-item-card} {octicon}`plus-circle` Badges, Buttons & Icons
:link: badges_buttons
:link-type: doc
Roles and directives for {bdg-primary}`badges` and other components.
:::
:::{grid-item-card} {octicon}`image` CSS Styling
:link: css_variables
:link-type: doc
Change the default colors and other CSS.
:::
::::
-----------
Created with inspiration from [Bootstrap](https://getbootstrap.com/) (v5), [Material Design](https://material.io) and [Material-UI](https://material-ui.com/) design frameworks.
|
