blob: fa7d1cde6ec6d7455cc2aa7d199533c93239499a (
plain)
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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
|
extends _layout/_docs-layout.pug
block variables
- var slug = 'components'
- var parent = 'components'
- var title = 'components - Spectre.css CSS Framework'
- var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
block docs-content
+docs-heading('components', 'Components')
include _layout/_ad-g.pug
p
strong Spectre.css
| is a lightweight, responsive and modern CSS framework for faster and extensible development.
p
| Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.
.docs-demo.columns
.column.col-6.col-xs-12
.card
.card-header
.card-title.h5 Accordions
.card-body
| Used to toggle sections of content
.card-footer
a.btn.btn-primary(href="components/accordions.html") View
.column.col-6.col-xs-12
.card
.card-header
.card-title.h5 Avatars
.card-body
| User profile pictures
.card-footer
a.btn.btn-primary(href="components/avatars.html") View
.column.col-6.col-xs-12
.card
.card-header
.card-title.h5 Badges
.card-body
| Used as unread number indicators
.card-footer
a.btn.btn-primary(href="components/badges.html") View
.column.col-6.col-xs-12
.card
.card-header
.card-title.h5 Bars
.card-body
| Progress of a task or the value within the known range
.card-footer
a.btn.btn-primary(href="components/bars.html") View
.column.col-6.col-xs-12
.card
.card-header
.card-title.h5 Breadcrumbs
.card-body
| Navigational hierarchies to indicate current location
.card-footer
a.btn.btn-primary(href="components/breadcrumbs.html") View
.column.col-6.col-xs-12
.card
.card-header
.card-title.h5 Cards
.card-body
| Flexible content containers
.card-footer
a.btn.btn-primary(href="components/cards.html") View
.column.col-6.col-xs-12
.card
.card-header
.card-title.h5 Chips
.card-body
| Complex entities in small blocks
.card-footer
a.btn.btn-primary(href="components/chips.html") View
.column.col-6.col-xs-12
.card
.card-header
.card-title.h5 Empty states
.card-body
| Navigational hierarchies to indicate current location
.card-footer
a.btn.btn-primary(href="components/empty.html") View
.column.col-6.col-xs-12
.card
.card-header
.card-title.h5 Menu
.card-body
| Vertical list of links or buttons for actions and navigation
.card-footer
a.btn.btn-primary(href="components/menu.html") View
.column.col-6.col-xs-12
.card
.card-header
.card-title.h5 Modals
.card-body
| Flexible dialog prompts
.card-footer
a.btn.btn-primary(href="components/modals.html") View
.column.col-6.col-xs-12
.card
.card-header
.card-title.h5 Nav
.card-body
| Vertical list of links
.card-footer
a.btn.btn-primary(href="components/nav.html") View
.column.col-6.col-xs-12
.card
.card-header
.card-title.h5 Pagination
.card-body
| Vertical list of links or buttons for actions and navigation
.card-footer
a.btn.btn-primary(href="components/pagination.html") View
.column.col-6.col-xs-12
.card
.card-header
.card-title.h5 Panels
.card-body
| Flexible view container with auto-expand content section
.card-footer
a.btn.btn-primary(href="components/panels.html") View
.column.col-6.col-xs-12
.card
.card-header
.card-title.h5 Popovers
.card-body
| Small overlay content containers
.card-footer
a.btn.btn-primary(href="components/popovers.html") View
.column.col-6.col-xs-12
.card
.card-header
.card-title.h5 Steps
.card-body
| Progress indicators of a sequence of task steps
.card-footer
a.btn.btn-primary(href="components/steps.html") View
.column.col-6.col-xs-12
.card
.card-header
.card-title.h5 Tabs
.card-body
| Switch between different views
.card-footer
a.btn.btn-primary(href="components/tabs.html") View
.column.col-6.col-xs-12
.card
.card-header
.card-title.h5 Tiles
.card-body
| Repeatable or embeddable information blocks
.card-footer
a.btn.btn-primary(href="components/tiles.html") View
.column.col-6.col-xs-12
.card
.card-header
.card-title.h5 Toasts
.card-body
| Progress indicators of a sequence of task steps
.card-footer
a.btn.btn-primary(href="components/toasts.html") View
.column.col-6.col-xs-12
.card
.card-header
.card-title.h5 Tooltips
.card-body
| Context information labels that appear on hover and focus
.card-footer
a.btn.btn-primary(href="components/tooltips.html") View
include _layout/_ad-c.pug
include _layout/_footer.pug
|
