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