-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
138 lines (131 loc) · 4.77 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="/docs/light-syntax.css" rel="stylesheet" />
<!-- Styless.CSS -->
<link href="styless.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/plugins/autoloader/prism-autoloader.min.js"></script>
<title>Styless - Minmal classless CSS framework.</title>
<style>
.banner {
padding: 10rem 0;
}
.row {
display: flex;
gap: 1rem;
}
.col {
flex: 1;
min-width: 0
}
</style>
</head>
<body>
<main>
<article>
<div class="banner">
<h1 style="text-align:center;" align="center">
Build fast, simple sites with Styless
</h1>
<p style="text-align:center;" align="center">
Quickly write simple sites with Styless, a simple front-end open
source stylesheet. Perfect for content first sites or blogs.
</p>
<div style="text-align: center;">
<button onclick="location.href='guide'">Get Started</button>
.
<button onclick="location.href='download'">Download</button>
</div>
</div>
<h2>Get started any way you want</h2>
<p>
Jump right into building with Bootstrap—use the CDN, install it via package manager, or download the sourcecode.
</p>
<div class="row">
<section class="col">
<h3>Install via package manager</h3>
<p>
Install Styless’s source Sass and JavaScript files via npm
<!--, RubyGems, Composer, or Meteor-->. Package managed
installs don’t include documentation or our full build scripts.
<!--You can also use our npm template repo to
quickly generate a Styless project via npm.-->
</p>
<pre><code>npm install styless.css</code></pre>
<!--<pre><code>gem install bootstrap -v 5.2.0-beta1</code></pre>-->
<!--Read our installation docs for more info and additional package managers.-->
</section>
<section class="col">
<h3>Include via CDN</h3>
<p>
When you only need to include Styless’s compiled CSS or JS, you can use jsDelivr. See it in action with
our simple quick start, or browse the examples to jumpstart your next project.
</p>
<pre
class="language-html"><code><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/styless.min.css" rel="stylesheet" crossorigin="anonymous" /></code></pre>
</section>
</div>
<hr>
<div class="row">
<div class="col">
<h3>Starter template</h3>
<p>
Be sure to have your pages set up with the latest design and
development standards. That means using an HTML5 doctype and including
a viewport meta tag for proper responsive behaviors. Put it all
together and your pages should look like this:
</p>
<ul>
<li>
<strong>HTML5 doctype</strong>
</li>
<li>
<strong>Responsive meta tag</strong>
</li>
<li>
<strong>Box-sizing</strong>
</li>
<li>
<strong>Normalize</strong>
</li>
</ul>
<p>
For next steps, use our <a href="/examples">examples</a> to start.
</p>
</div>
<div class="col">
<pre class="language-html"><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/styless.min.css" rel="stylesheet" crossorigin="anonymous" />
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html></code></pre>
</div>
</div>
<hr>
<section>
<h2>Components</h2>
<h3>Buttons</h3>
<div class="row">
<div class="col">
<button>Hello World!</button>
</div>
<div class="col">
<pre class="language-html"><code></code></pre>
</div>
</div>
</section>
</article>
</main>
</body>
</html>