This repository was archived by the owner on Feb 9, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhome.html
143 lines (142 loc) · 5.06 KB
/
home.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
139
140
141
142
143
---
layout: base
permalink: /
title: Home
description: The official website of NovaSheets, the simple and powerful CSS preprocessor. Install on npm for Node or the command line, or import on a website.
keywords: nixinova, novasheets, novasheets website
css: home
js: colouring
---
<div id="showcase">
<div class="section-container">
<div class="item-container main-container">
<div class="item">
<h1>NovaSheets</h1>
<p>A simple but powerful CSS preprocessor.</p>
<p id="welcome-install" class="item-link" style="padding-bottom: 0;">
<a href="/install/">Install now</a>
<pre>npm install -g novasheets</pre>
</p>
</div>
</div>
</div>
<div class="section-container">
<div class="item-container">
<div class="item">
<h2>What is NovaSheets?</h2>
<p>NovaSheets is a powerful CSS preprocessor with the ability to easily create intricate CSS files with simple syntax. With many built-in functions for you to use, you can take your stylesheets to the next level.</p>
</div>
</div>
</div>
<div class="section-container">
<div class="item-container">
<div class="item">
<h2>Simple</h2>
<p>Variables? Functions? Mixins? Templates?<br>Find them all under one name.</p>
<p class="item-link">
<a href="/docs/">View docs</a>
</p>
</div>
<div class="item">
<pre>
<code>
@var color = hsl($[hue|300], 75%, 80%)\n
body {background: $(color|hue=200);}
</code>
</pre>
</div>
</div>
</div>
<div class="section-container">
<div class="item-container">
<div class="item">
<h2>Powerful</h2>
<p>Utilize the wide variety of built-in functions offered to you<br>– or make your own.</p>
<p class="item-link">
<a href="/docs/builtin-functions/">Learn more</a>
</p>
</div>
<div class="item">
<pre>
<code>
$(@darken | hsl(100, 20%, 30%) | 30% )\n
$(@breakpoint | 800px | .container | width: 100%; | width: 30vw; )
</code>
</pre>
</div>
</div>
</div>
<div class="section-container">
<div class="item-container">
<div class="item">
<h2>Natural</h2>
<p>Create stylesheets in a way that mirrors the HTML.</p>
<p class="item-link">
<a href="/docs/selectors/">More info</a>
</p>
</div>
<div class="item">
<pre>
<code>
body {\n
color: red;\n
main {\n
background: gray;\n
}\n
}
</code>
</pre>
</div>
</div>
</div>
<div class="section-container">
<div class="item-container">
<div class="item">
<h2>Versatile</h2>
<p>Use in the browser, in Node, or on the command line.</p>
<p class="item-link">
<a href="/docs/">See how</a>
</p>
</div>
<div class="item">
<pre>
<code>
parse('@var foo = bar:1; @endvar $(foo)') // node<br>
novasheets --compile **/*.nvss css/ // CLI
</code>
</pre>
</div>
</div>
</div>
<div class="section-container">
<div class="item-container">
<div class="item">
<h2>Lightweight</h2>
<p>With one import, gain access to the full parsing power.</p>
<p class="item-link">
<a href="/versions/">View downloads</a>
</p>
</div>
<div class="item">
<pre>
<code>
npm install -g novasheets // node<br>
<script src="novasheets.js"></script> // browser
</code>
</pre>
</div>
</div>
</div>
<div class="section-container" style="background: inherit;">
<div class="item-container two-container">
<div class="item">
<h2>Get started</h2>
<p>See the <a href="/install/">Installation</a> page.</p>
</div>
<div class="item">
<h2>Need help?</h2>
<p>See the <a href="/docs/">Documentation</a> pages.</p>
</div>
</div>
</div>
</div>