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
|
<!DOCTYPE html>
<html lang="en">
<head>
<title>Spectre.css CSS Framework</title>
<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="description" content="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.">
<meta name="author" content="Yan Zhu">
<meta property="og:url" content="https://picturepan2.github.io/spectre/">
<meta property="og:title" content="Spectre.css CSS Framework">
<meta property="og:description" content="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.">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@spectrecss">
<meta name="twitter:creator" content="@picturepan2">
<link rel="shortcut icon" href="img/favicons/favicon.ico">
<link rel="icon" href="img/favicons/favicon.png">
<link rel="stylesheet" href="dist/spectre.min.css">
<link rel="stylesheet" href="dist/spectre-icons.min.css">
<link rel="stylesheet" href="dist/spectre-exp.min.css">
<link rel="stylesheet" href="dist/docs.min.css">
<link rel="canonical" href="https://picturepan2.github.io/spectre/">
</head>
<body>
<div class="section section-hero bg-gray">
<div class="grid-hero container grid-lg text-center" id="overview">
<div class="docs-brand"><a class="docs-logo" href="index.html"><img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework">
<h2>SPECTRE</h2></a></div>
<h1>SPECTRE.CSS</h1>
<h2>A
<u>Lightweight</u>,
<u>Responsive</u> and
<u>Modern</u> CSS Framework
</h2>
<p><a class="btn btn-primary btn-lg mr-2" href="getting-started.html">Docs</a><a class="btn btn-primary btn-lg" href="https://github.com/picturepan2/spectre" target="_blank">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-ads bg-gray">
<div class="docs-ad">
<div class="hide-md text-center">
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
<div class="show-md text-center">
<!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
</div>
</div>
<div class="section section-features bg-primary text-light text-center">
<div class="container grid-lg">
<h2>Introduction</h2>
<div class="columns">
<div class="column col-10 col-sm-12 col-mx-auto text-left">
<p class="text-secondary"><strong>Spectre.css </strong>is a lightweight, responsive and modern CSS framework for faster and extensible development.</p>
<p class="text-secondary">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.</p>
</div>
<div class="column col-10 col-sm-12 col-mx-auto"><a class="btn btn-lg" href="getting-started/installation.html">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 class="btn btn-primary" href="https://twitter.com/spectrecss" 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 class="btn btn-primary" href="https://www.paypal.me/picturepan2" 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">Sponsor via Patreon</div>
</div>
<div class="card-body">Your name or company logo will be put on Spectre Docs homepage.</div>
<div class="card-footer"><a class="btn btn-primary" href="https://www.patreon.com/spectrecss" target="_blank">Sponsor</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="section section-ads bg-gray"></div>
<footer class="section section-footer">
<div class="docs-footer container grid-lg" id="copyright">
<p><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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
<p>Designed and built with <span class="text-error">♥</span> 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>
|
