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
|
extends ../_layout/_docs-layout.pug
block variables
- var slug = 'installation'
- var parent = 'getting-started'
- var title = 'Installation - Getting started - 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('installation', 'Installation')
include ../_layout/_ad-g.pug
p
| There are 5 ways to get started with Spectre CSS framework in your projects. You can either install manually, from CDN or use package managers.
+docs-subheading('install-manually', 'Install manually')
p
| Download the compiled and minified
a(href='https://github.com/picturepan2/spectre/releases', target='_blank') Spectre CSS file
| (core ~10KB min+gzip):
p
a.btn.btn-primary(href='https://github.com/picturepan2/spectre/releases', target='_blank') Download Spectre.css
p
| Include
code spectre.css
| located in
strong /dist
| in your website or Web app <head>. Also, you can add
code spectre-icons.css
| and
code spectre-exp.css
| accordingly.
//- install manually
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<link rel="stylesheet" href="spectre.min.css">
<link rel="stylesheet" href="spectre-exp.min.css">
<link rel="stylesheet" href="spectre-icons.min.css">
+docs-subheading('install-cdn', 'Install from CDN')
p
| Alternatively, you can use the
a(href='https://unpkg.com/', target='_blank') unpkg
| or
a(href='https://cdnjs.com/libraries/spectre.css', target='_blank') cdnjs
| CDN to load compiled Spectre.css.
//- install from CDN
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
+docs-subheading('install-npm', 'Install with NPM')
//- install with npm
pre.code.c-select-all(data-lang='Bash')
code
:highlight(lang="Bash")
npm install spectre.css --save
+docs-subheading('install-yarn', 'Install with Yarn')
//- install with yarn
pre.code.c-select-all(data-lang='Bash')
code
:highlight(lang="bash")
yarn add spectre.css
+docs-subheading('install-bower', 'Install from Bower')
//- install with bower
pre.code.c-select-all(data-lang='Bash')
code
:highlight(lang="bash")
bower install spectre.css --save
include ../_layout/_ad-c.pug
include ../_layout/_footer.pug
|
