blob: e819cf14c44d4c1cf75bd83d2cef216654f27cc3 (
plain)
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/_layout.pug
block variables
- var slug = 'index'
- var parent = 'index'
- var title = 'Spectre.css CSS Framework'
- var description = 'Spectre.css 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 content
.section.section-hero.bg-gray
#overview.grid-hero.container.grid-lg.text-center
.docs-brand
a.docs-logo(href='index.html')
img(src='img/spectre-logo.svg' alt='Spectre.css CSS Framework')
h2 SPECTRE
h1 SPECTRE.CSS
h2
| A #[u Lightweight], #[u Responsive] and #[u Modern] CSS Framework
p
a.btn.btn-primary.btn-lg.mr-2(href='getting-started.html') Docs
a.btn.btn-primary.btn-lg(href='https://github.com/picturepan2/spectre' target='_blank') GitHub
p.text-gray
| Latest version:
span.version
.columns
.column.col-4.col-xs-12
.card.text-center
.card-header
span.card-title Lightweight
.card-body
| Lightweight (~10KB gzipped) starting point for your projects
.column.col-4.col-xs-12
.card.text-center
.card-header
span.card-title Responsive
.card-body
| Flexbox-based, responsive and mobile-friendly layout
.column.col-4.col-xs-12
.card.text-center
.card-header
span.card-title Modern
.card-body
| Elegantly designed and developed elements and components
.section.section-ads.bg-gray
include _layout/_ad-g.pug
.section.section-features.bg-primary.text-light.text-center
.container.grid-lg
h2 Introduction
.columns
.column.col-10.col-sm-12.col-mx-auto.text-left
p.text-secondary
strong Spectre.css
| is a lightweight, responsive and modern CSS framework for faster and extensible development.
p.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.
.column.col-10.col-sm-12.col-mx-auto
a.btn.btn-lg(href='getting-started/installation.html') Install SPECTRE.CSS
.section.section-updates.bg-gray
.container.grid-lg
.columns
.column.col-4.col-xs-12
.card
.card-header
.card-title.h6 Spectre Twitter
.card-body
| For the latest announcements and updates, follow on Twitter:
a(href='https://twitter.com/spectrecss' target='_blank') @spectrecss
| .
.card-footer
a.btn.btn-primary(href='https://twitter.com/spectrecss' target='_blank') Follow
.column.col-4.col-xs-12
.card
.card-header
.card-title.h6 PayPal Donate
.card-body
| Spectre.css is completely free to use. If you enjoy it, please consider donating for the further development. ♥
.card-footer
a.btn.btn-primary(href='https://www.paypal.me/picturepan2' target='_blank') Donate
.column.col-4.col-xs-12
.card
.card-header
.card-title.h6 Spectre Docs
.card-body
| Spectre Docs experience has been completely rewritten and improved.
.card-footer
a.btn.btn-primary(href='getting-started.html') Explore
.section.section-ads.bg-gray
include _layout/_ad-c.pug
footer.section.section-footer
include _layout/_footer.pug
|
