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
|
extends _layout.pug
include _mixins.pug
block content
.docs-container.off-canvas.off-canvas-sidebar-show
.docs-navbar
a.off-canvas-toggle.btn.btn-link.btn-action(href='#sidebar')
i.icon.icon-menu
a.btn.btn-primary(href='https://github.com/picturepan2/spectre' target='_blank') GitHub
#sidebar.docs-sidebar.off-canvas-sidebar
.docs-brand
a.docs-logo(href='index.html')
img(src='img/spectre-logo.svg' alt='Spectre.css CSS Framework')
h2 SPECTRE
.docs-nav
.accordion-container
+docs-accordion(
'getting-started',
'Getting started',
{url: '#introduction', name: 'Introduction'},
{url: '#installation', name: 'Installation'},
{url: '#custom', name: 'Custom version'},
{url: '#browsers', name: 'Browser support'},
{url: '#whatsnew', name: 'What\'s new'}
)
+docs-accordion(
'elements',
'Elements',
{url: '#typography', name: 'Typography'},
{url: '#tables', name: 'Tables'},
{url: '#buttons', name: 'Buttons'},
{url: '#forms', name: 'Forms'},
{url: '#icons', name: 'Icons'},
{url: '#labels', name: 'Labels'},
{url: '#code', name: 'Code'},
{url: '#media', name: 'Media'}
)
+docs-accordion(
'layout',
'Layout',
{url: '#grid', name: 'Flexbox grid'},
{url: '#responsive', name: 'Responsive'},
{url: '#navbar', name: 'Navbar'}
)
+docs-accordion(
'components',
'Components',
{url: '#accordions', name: 'Accordions'},
{url: '#avatars', name: 'Avatars'},
{url: '#badges', name: 'Badges'},
{url: '#bars', name: 'Bars'},
{url: '#breadcrumbs', name: 'Breadcrumbs'},
{url: '#cards', name: 'Cards'},
{url: '#chips', name: 'Chips'},
{url: '#empty', name: 'Empty states'},
{url: '#menu', name: 'Menu'},
{url: '#modals', name: 'Modals'},
{url: '#nav', name: 'Nav'},
{url: '#pagination', name: 'Pagination'},
{url: '#panels', name: 'Panels'},
{url: '#popovers', name: 'Popovers'},
{url: '#steps', name: 'Steps'},
{url: '#tabs', name: 'Tabs'},
{url: '#tiles', name: 'Tiles'},
{url: '#toasts', name: 'Toasts'},
{url: '#tooltips', name: 'Tooltips'}
)
+docs-accordion(
'utilities',
'Utilities',
{url: '#colors', name: 'Colors'},
{url: '#cursors', name: 'Cursors'},
{url: '#display', name: 'Display'},
{url: '#divider', name: 'Divider'},
{url: '#loading', name: 'Loading'},
{url: '#position', name: 'Position'},
{url: '#shapes', name: 'Shapes'},
{url: '#text', name: 'Text'}
)
+docs-accordion(
'experimentals',
'Experimentals',
{url: '#autocomplete', name: 'Autocomplete'},
{url: '#calendars', name: 'Calendars'},
{url: '#carousels', name: 'Carousels'},
{url: '#comparison', name: 'Comparison sliders'},
{url: '#filters', name: 'Filters'},
{url: '#meters', name: 'Meters'},
{url: '#off-canvas', name: 'Off-canvas'},
{url: '#parallax', name: 'Parallax'},
{url: '#progress', name: 'Progress'},
{url: '#sliders', name: 'Sliders'},
{url: '#timelines', name: 'Timelines'}
)
a.off-canvas-overlay(href='#close')
.off-canvas-content
#content.docs-content
block docs-content
|
