tiny, simple, classless CSS framework inspired by new.css
devcss.devins.page
devins.page
framework
lightweight
css
classless
stylesheet
feat: website+wisp deploy
+32
.tangled/workflows/wisp-deploy.yaml
+32
.tangled/workflows/wisp-deploy.yaml
···
···
1
+
when:
2
+
- event: ["push"]
3
+
branch: ["main"]
4
+
- event: ["manual"]
5
+
6
+
engine: "nixery"
7
+
8
+
clone:
9
+
skip: false
10
+
depth: 1
11
+
submodules: false
12
+
13
+
dependencies:
14
+
nixpkgs:
15
+
- coreutils
16
+
- curl
17
+
18
+
environment:
19
+
SITE_PATH: "."
20
+
SITE_NAME: "devcss.devins.page"
21
+
WISP_HANDLE: "devins.page"
22
+
23
+
steps:
24
+
- name: deploy to wisp
25
+
command: |
26
+
curl https://sites.wisp.place/nekomimi.pet/wisp-cli-binaries/wisp-cli-x86_64-linux -o wisp-cli
27
+
chmod +x wisp-cli
28
+
./wisp-cli deploy \
29
+
"$WISP_HANDLE" \
30
+
--path "$SITE_PATH" \
31
+
--site "$SITE_NAME" \
32
+
--password "$WISP_APP_PASSWORD"
+373
index.html
+373
index.html
···
···
1
+
<!doctype html>
2
+
<html lang="en">
3
+
<head>
4
+
<meta charset="UTF-8" />
5
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+
<title>Home - dev.css</title>
7
+
<meta name="title" content="dev.css" />
8
+
<meta
9
+
name="description"
10
+
content="dev.css is a lightweight, classless CSS framework"
11
+
/>
12
+
<meta
13
+
name="keywords"
14
+
content="css, web development, framework, lightweight, vercel, geist"
15
+
/>
16
+
<meta name="robots" content="index, follow" />
17
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
18
+
<meta name="language" content="English" />
19
+
<meta name="author" content="intergrav" />
20
+
<link
21
+
rel="stylesheet"
22
+
href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4"
23
+
/>
24
+
</head>
25
+
26
+
<body>
27
+
<header>
28
+
<h1>dev.css</h1>
29
+
<p>A lightweight, classless CSS framework.</p>
30
+
<nav>
31
+
<ul>
32
+
<li><a href="https://tangled.org/devins.page/dev.css">git</a></li>
33
+
<li>
34
+
<a href="https://www.npmjs.com/package/@intergrav/dev.css">npm</a>
35
+
</li>
36
+
<li>
37
+
<a href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css/"
38
+
>jsDelivr</a
39
+
>
40
+
</li>
41
+
</ul>
42
+
</nav>
43
+
</header>
44
+
45
+
<main>
46
+
<section>
47
+
<h1>Home</h1>
48
+
<p>
49
+
dev.css is a tiny, simple, classless CSS framework inspired by
50
+
Vercel's
51
+
<a href="https://vercel.com/geist">Geist</a> design system. It is
52
+
designed to make any plain HTML file look clean and modern. The
53
+
minified stylesheet weighs only <bold>~5.5kb</bold> and includes both
54
+
light and dark themes. Scroll down for a demo.
55
+
</p>
56
+
<p>
57
+
For installation instructions and much more information, see the
58
+
<a href="https://tangled.org/devins.page/dev.css">README.</a>
59
+
</p>
60
+
<h2>Who is this for?</h2>
61
+
<p>dev.css is a great choice for:</p>
62
+
<ul>
63
+
<li>A simple blog</li>
64
+
<li>A simple "about me" website</li>
65
+
<li>Collecting your most used links</li>
66
+
<li>Prototyping your raw HTML</li>
67
+
</ul>
68
+
<p>
69
+
dev.css was not meant for very complex websites. An example of a site
70
+
that uses dev.css is
71
+
<a href="https://skywardmc.org">SkywardMC's wiki</a>. This website was
72
+
also entirely made with dev.css, of course.
73
+
</p>
74
+
<p>
75
+
If you're using dev.css on your site, feel free to use this "powered
76
+
by dev.css" badge if you want to promote the project:
77
+
</p>
78
+
<pre><code><a href="https://devcss.devins.page"><img src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/badge.svg" alt="powered by dev.css"></a></code></pre>
79
+
<a href="https://devcss.devins.page"
80
+
><img
81
+
src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/badge.svg"
82
+
alt="powered by dev.css"
83
+
/></a>
84
+
</section>
85
+
86
+
<section>
87
+
<h1>Demo</h1>
88
+
<p>
89
+
Below is the demo for dev.css, a classless, lightweight, and
90
+
accessible CSS framework! Lorem ipsum odor amet, consectetuer
91
+
adipiscing elit. Hac suscipit magnis a, duis sollicitudin imperdiet.
92
+
</p>
93
+
<h2>Heading 2</h2>
94
+
<p>
95
+
Lorem ipsum odor amet, consectetuer adipiscing elit. Hac suscipit
96
+
magnis a, duis sollicitudin imperdiet. Aliquam inceptos quis semper
97
+
libero gravida purus dui posuere lacinia. Aliquet erat torquent auctor
98
+
leo habitasse feugiat iaculis pharetra. Dignissim ridiculus gravida
99
+
dictumst donec iaculis.
100
+
</p>
101
+
<h3>Heading 3</h3>
102
+
<p>
103
+
Sed tortor congue mauris molestie per facilisi vulputate. Quam aenean
104
+
mollis dui sollicitudin; per pretium mattis. Dis luctus vestibulum
105
+
proin id neque porta. Vehicula sapien aenean tellus inceptos lectus
106
+
facilisis viverra. Lacinia habitasse convallis diam elit lobortis
107
+
luctus.
108
+
</p>
109
+
<h4>Heading 4</h4>
110
+
<p>
111
+
Mattis per parturient convallis tempor nec posuere imperdiet. Natoque
112
+
dolor enim tempus bibendum ligula facilisis ipsum interdum. Netus
113
+
maximus laoreet adipiscing enim phasellus. Luctus nunc at egestas
114
+
torquent porttitor nostra aliquam tempus.
115
+
</p>
116
+
<h5>Heading 5</h5>
117
+
<p>
118
+
Erat interdum etiam condimentum, nullam odio ex maximus vel. Rhoncus
119
+
suspendisse vestibulum aptent amet torquent class suscipit ultrices
120
+
viverra.
121
+
</p>
122
+
<h6>Heading 6</h6>
123
+
<p>
124
+
Mattis primis lacus ac metus sollicitudin consequat bibendum luctus.
125
+
Ridiculus dignissim tortor viverra posuere cras curabitur.
126
+
</p>
127
+
128
+
<br />
129
+
<hr />
130
+
<br />
131
+
132
+
<blockquote>
133
+
This entire page was made with just dev.css and basic HTML. You can
134
+
view the source
135
+
<a href="https://tangled.org/devins.page/dev.css/blob/main/index.html"
136
+
>here</a
137
+
>.
138
+
</blockquote>
139
+
140
+
<br />
141
+
<hr />
142
+
<br />
143
+
144
+
<p>
145
+
Lorem <mark>ipsum</mark> dolor sit amet
146
+
<strong>consectetur</strong> adipisicing elit. Aut
147
+
<i>harum molestias</i> labore amet possimus
148
+
<s>exercitationem aperiam</s> earum, doloribus
149
+
<u>nobis ducimus</u> maiores quia voluptates quis omnis molestiae
150
+
quisquam. <a href="#">Voluptatibus, officiis laudantium?</a>
151
+
</p>
152
+
153
+
<p>
154
+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
155
+
<code>Hic culpa, nobis doloremque</code> veniam non, nihil cupiditate
156
+
odit repellat est <kbd>ALT + F4</kbd> expedita facilis. Fuga
157
+
aspernatur, alias debitis eveniet totam minima vel.
158
+
</p>
159
+
160
+
<ul>
161
+
<li>List item</li>
162
+
<li>List item</li>
163
+
<li>List item</li>
164
+
<li>List item</li>
165
+
</ul>
166
+
167
+
<ol>
168
+
<li>Step 1</li>
169
+
<li>Step 2</li>
170
+
<li>????</li>
171
+
<li>Profit!</li>
172
+
</ol>
173
+
174
+
<dl>
175
+
<dt>Web</dt>
176
+
<dd>The part of the Internet that contains websites and web pages</dd>
177
+
<dt>HTML</dt>
178
+
<dd>A markup language for creating web pages</dd>
179
+
<dt>CSS</dt>
180
+
<dd>A technology to make HTML look better</dd>
181
+
</dl>
182
+
183
+
<blockquote cite="https://en.wikiquote.org/wiki/Edward_Snowden">
184
+
If you think privacy is unimportant for you because you have nothing
185
+
to hide, you might as well say free speech is unimportant for you
186
+
because you have nothing useful to say.
187
+
<br />
188
+
<br />
189
+
– Edward Snowden
190
+
</blockquote>
191
+
192
+
<pre><code><!DOCTYPE html>
193
+
<html>
194
+
<head>
195
+
<title>Hello World</title>
196
+
</head>
197
+
<body>
198
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
199
+
</body>
200
+
</html></code></pre>
201
+
202
+
<br />
203
+
<hr />
204
+
<br />
205
+
206
+
<details>
207
+
<summary>Click me!</summary>
208
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
209
+
</details>
210
+
211
+
<br />
212
+
<hr />
213
+
<br />
214
+
215
+
<article>
216
+
<h1>Article element</h1>
217
+
<p>This is an article element by itself.</p>
218
+
</article>
219
+
220
+
<article>
221
+
<h1>Article element</h1>
222
+
<p>This is an article element with other nested elements.</p>
223
+
<article>
224
+
<h2>Article 1</h2>
225
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
226
+
</article>
227
+
<article>
228
+
<h2>Article 2</h2>
229
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
230
+
</article>
231
+
<details>
232
+
<summary>Click me!</summary>
233
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
234
+
</details>
235
+
</article>
236
+
237
+
<br />
238
+
<hr />
239
+
<br />
240
+
241
+
<table>
242
+
<caption>
243
+
Table caption
244
+
</caption>
245
+
<thead>
246
+
<tr>
247
+
<th>Meal</th>
248
+
<th>Time</th>
249
+
</tr>
250
+
</thead>
251
+
<tbody>
252
+
<tr>
253
+
<td>Breakfast</td>
254
+
<td>5-10 AM</td>
255
+
</tr>
256
+
<tr>
257
+
<td>Lunch</td>
258
+
<td>12-2 PM</td>
259
+
</tr>
260
+
<tr>
261
+
<td>Dinner</td>
262
+
<td>6-9 PM</td>
263
+
</tr>
264
+
</tbody>
265
+
</table>
266
+
267
+
<br />
268
+
<hr />
269
+
<br />
270
+
271
+
<form>
272
+
<p>
273
+
<em>
274
+
This is not a real form and does not submit or save any
275
+
information.
276
+
</em>
277
+
</p>
278
+
<p>
279
+
<label>First name</label><br />
280
+
<input type="text" name="first_name" />
281
+
</p>
282
+
<p>
283
+
<label>Last name</label><br />
284
+
<input type="text" name="last_name" />
285
+
</p>
286
+
<p>
287
+
<label>Number</label><br />
288
+
<label>
289
+
<input type="radio" name="radiooptions" value="1" />
290
+
1
291
+
</label>
292
+
<br />
293
+
<label>
294
+
<input type="radio" name="radiooptions" value="2" />
295
+
2
296
+
</label>
297
+
<br />
298
+
<label>
299
+
<input type="radio" name="radiooptions" value="3" />
300
+
3
301
+
</label>
302
+
</p>
303
+
<p>
304
+
<label>Email</label><br />
305
+
<input type="email" name="email" required="" />
306
+
</p>
307
+
<p>
308
+
<label>Phone number</label><br />
309
+
<input type="tel" name="phone" />
310
+
</p>
311
+
<p>
312
+
<label>Password</label><br />
313
+
<input type="password" name="password" />
314
+
</p>
315
+
<p>
316
+
<label>Country</label><br />
317
+
<select>
318
+
<option>United States</option>
319
+
<option>China</option>
320
+
<option>India</option>
321
+
<option>Indonesia</option>
322
+
<option>Brazil</option>
323
+
</select>
324
+
</p>
325
+
<p>
326
+
<label>Comments</label><br />
327
+
<textarea></textarea>
328
+
</p>
329
+
<p>
330
+
<label>
331
+
<input type="checkbox" value="terms" />
332
+
I agree to the <a>terms and conditions</a>
333
+
</label>
334
+
</p>
335
+
<p>
336
+
<button>Sign up</button>
337
+
<button type="reset">Reset form</button>
338
+
<button disabled="disabled">Disabled</button>
339
+
</p>
340
+
</form>
341
+
342
+
<br />
343
+
<hr />
344
+
<br />
345
+
346
+
<figure>
347
+
<img
348
+
alt="Apple and walnut orchards after a night of snowfall in Sangla in the Kinnaur district of the northern Indian state of Himachal Pradesh."
349
+
src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Orchards_in_snow%2C_Sangla%2C_Himachal_Pradesh%2C_India.jpg/1024px-Orchards_in_snow%2C_Sangla%2C_Himachal_Pradesh%2C_India.jpg?20250409065119"
350
+
/>
351
+
<figcaption>
352
+
Photo by
353
+
<a
354
+
href="https://commons.wikimedia.org/wiki/File:Orchards_in_snow,_Sangla,_Himachal_Pradesh,_India.jpg"
355
+
>UnpetitproleX</a
356
+
>,
357
+
<a href="https://creativecommons.org/licenses/by-sa/4.0"
358
+
>CC BY-SA 4.0</a
359
+
>, via Wikimedia Commons
360
+
</figcaption>
361
+
</figure>
362
+
</section>
363
+
</main>
364
+
365
+
<footer>
366
+
<p>
367
+
dev.css and this website was written by
368
+
<a href="https://devins.page">intergrav</a>. Inspired by
369
+
<a href="https://github.com/xz/new.css">new.css</a>.
370
+
</p>
371
+
</footer>
372
+
</body>
373
+
</html>