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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="author" content="https://github.com/picturepan2/">
<title>Spectre.css - A lightweight, responsive and modern CSS framework</title>
<link rel="stylesheet" href="dist/spectre.css">
<link rel="stylesheet" href="dist/spectre-icons.css">
<link rel="stylesheet" href="css/docs.css">
</head>
<body>
<div class="section section-hero bg-gray">
<div id="overview" class="grid-hero container grid-lg text-center">
<div class="docs-brand">
<a href="index.html" class="docs-logo">
<img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework">
<h2>Spectre.css</h2>
</a>
</div>
<h1>Spectre.css</h1>
<h2>A <u>lightweight</u>, <u>responsive</u> and <u>modern</u> CSS framework</h2>
<p>
<a href="getting-started.html" class="btn btn-primary btn-lg">Docs</a>
<a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary btn-lg">GitHub</a>
</p>
<p class="text-gray">Latest version: <span class="version"></span></p>
<div class="columns">
<div class="column col-4 col-xs-12">
<div class="card text-center">
<div class="card-header">
<span class="card-title">Lightweight</span>
</div>
<div class="card-body">
Lightweight (~10KB gzipped) starting point for your projects
</div>
</div>
</div>
<div class="column col-4 col-xs-12">
<div class="card text-center">
<div class="card-header">
<span class="card-title">Responsive</span>
</div>
<div class="card-body">
Flexbox-based, responsive and mobile-friendly layout
</div>
</div>
</div>
<div class="column col-4 col-xs-12">
<div class="card text-center">
<div class="card-header">
<span class="card-title">Modern</span>
</div>
<div class="card-body">
Elegantly designed and developed elements and components
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section section-features bg-primary text-light text-center">
<div class="container grid-lg">
<h2>Installation</h2>
<div class="columns">
<div class="column col-10 col-sm-12 col-mx-auto text-left">
<p class="text-large text-secondary">There are 5 ways to get started with Spectre.css CSS framework in your projects. You can either install manually, from CDN or use NPM, Yarn and Bower.</p>
</div>
<div class="column col-10 col-sm-12 col-mx-auto">
<a href="getting-started.html#installation" class="btn btn-lg">Install Spectre.css</a>
</div>
</div>
</div>
</div>
<div class="section section-updates bg-gray">
<div class="container grid-lg">
<div class="columns">
<div class="column col-4 col-xs-12">
<div class="card">
<div class="card-header">
<div class="card-title h6">Spectre Twitter</div>
</div>
<div class="card-body">
For the latest announcements and updates, follow on Twitter: <a href="https://twitter.com/spectrecss" target="_blank">@spectrecss</a>.
</div>
<div class="card-footer">
<a href="https://twitter.com/spectrecss" class="btn btn-primary" target="_blank">Follow</a>
</div>
</div>
</div>
<div class="column col-4 col-xs-12">
<div class="card">
<div class="card-header">
<div class="card-title h6">PayPal Donate</div>
</div>
<div class="card-body">
Spectre.css is completely free to use. If you enjoy it, please consider donating for the further development. ♥
</div>
<div class="card-footer">
<a href="https://www.paypal.me/picturepan2" class="btn btn-primary" target="_blank">Donate</a>
</div>
</div>
</div>
<div class="column col-4 col-xs-12">
<div class="card">
<div class="card-header">
<div class="card-title h6">Spectre Docs</div>
</div>
<div class="card-body">
Spectre Docs experience has been completely rewritten and improved.
</div>
<div class="card-footer">
<a href="getting-started.html" class="btn btn-primary">Explore</a>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="section section-footer">
<div id="copyright" class="grid-footer container grid-lg">
<p><a href="getting-started.html" target="_blank">Documents</a> | <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p>
<p>Designed and built with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
</div>
</footer>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-2702768-8', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
|