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
|
extends _layout/_docs-layout.pug
block variables
- var slug = 'elements'
- var parent = 'elements'
- var title = 'Elements - Spectre.css CSS Framework'
- var description = 'Spectre.css CSS Framework 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('elements', 'Elements')
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 Typography
.card-body
| Headings, paragraphs, semantic text, blockquote and lists elements
.card-footer
a.btn.btn-primary(href="elements/typography.html") View
.column.col-6.col-xs-12
.card
.card-header
.card-title.h5 Tables
.card-body
| Tables and data sets
.card-footer
a.btn.btn-primary(href="elements/tables.html") View
.column.col-6.col-xs-12
.card
.card-header
.card-title.h5 Buttons
.card-body
| Simple button styles for actions in different types and sizes
.card-footer
a.btn.btn-primary(href="elements/buttons.html") View
.column.col-6.col-xs-12
.card
.card-header
.card-title.h5 Forms
.card-body
| Input, textarea, select, checkbox, radio and switch
.card-footer
a.btn.btn-primary(href="elements/forms.html") View
.column.col-6.col-xs-12
.card
.card-header
.card-title.h5 Icons
.card-body
| Single-element, responsive and pure CSS icons
.card-footer
a.btn.btn-primary(href="elements/icons.html") View
.column.col-6.col-xs-12
.card
.card-header
.card-title.h5 Labels
.card-body
| Formatted text tags for highlighted, informative information
.card-footer
a.btn.btn-primary(href="elements/labels.html") View
.column.col-6.col-xs-12
.card
.card-header
.card-title.h5 Code
.card-body
| Inline and multiline code snippets
.card-footer
a.btn.btn-primary(href="elements/code.html") View
.column.col-6.col-xs-12
.card
.card-header
.card-title.h5 Media
.card-body
| Responsive images, figures and video
.card-footer
a.btn.btn-primary(href="elements/media.html") View
include _layout/_ad-c.pug
include _layout/_footer.pug
|
