tiny, simple, classless CSS framework inspired by new.css
devcss.devins.page
devins.page
framework
lightweight
css
classless
stylesheet
docs: some things
+3
-3
README.md
+3
-3
README.md
···
4
4
5
5
dev.css is a tiny, simple, classless CSS framework inspired by Vercel's [Geist](https://vercel.com/geist) design system. It is designed to make any plain HTML file look clean and modern. The minified stylesheet weighs only **~5.9kb** and includes both light and dark themes.
6
6
7
+
You can find the website at <a href="https://devcss.devins.page">devcss.devins.page</a>, which contains a demo page.
8
+
7
9
<details>
8
10
<summary>Click to view preview</summary>
9
11
<img src="https://raw.githubusercontent.com/intergrav/branding/main/dev.css/preview/desktop-light.png" alt="dev.css desktop demo, light mode">
···
21
23
- Collecting your most used links
22
24
- Prototyping your raw HTML
23
25
24
-
dev.css was not meant for very complex websites.
25
-
26
-
An example of a site that uses dev.css is [SkywardMC's wiki](https://skywardmc.org).
26
+
dev.css was not meant for very complex websites. An example of a site that uses dev.css is [SkywardMC's wiki](https://skywardmc.org).
27
27
28
28
## Importing
29
29
-348
demo.html
-348
demo.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>Demo - dev.css</title>
7
-
<link rel="stylesheet" href="dev.css" />
8
-
<link rel="stylesheet" href="theme/terminal.user.css" />
9
-
<link
10
-
rel="stylesheet"
11
-
href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist.min.css"
12
-
/>
13
-
<link
14
-
rel="stylesheet"
15
-
href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist-mono.min.css"
16
-
/>
17
-
</head>
18
-
19
-
<body>
20
-
<header>
21
-
<h1>dev.css</h1>
22
-
<p>Optional short summary of the page.</p>
23
-
<nav>
24
-
<ul>
25
-
<li><a href="demo">Demo</a></li>
26
-
<li><a href="https://github.com/intergrav/dev.css">GitHub</a></li>
27
-
<li>
28
-
<a href="https://www.npmjs.com/package/@intergrav/dev.css">npm</a>
29
-
</li>
30
-
<li>
31
-
<a href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css/"
32
-
>jsDelivr</a
33
-
>
34
-
</li>
35
-
</ul>
36
-
</nav>
37
-
</header>
38
-
39
-
<aside>
40
-
<h1>Sidebar</h1>
41
-
<p>
42
-
Optional sidebar that you can use for pretty much anything. See the
43
-
README for more information.
44
-
</p>
45
-
<ul>
46
-
<li><a href="">Page 1</a></li>
47
-
<li><a href="">Page 2</a></li>
48
-
<li><a href="">Page 3</a></li>
49
-
<li>
50
-
<a href="">Page 4</a>
51
-
<ul>
52
-
<li><a href="">Page 4.1</a></li>
53
-
</ul>
54
-
</li>
55
-
<li>
56
-
<a href="">Page 5</a>
57
-
<ul>
58
-
<li><a href="">Page 5.1</a></li>
59
-
<li><a href="">Page 5.2</a></li>
60
-
</ul>
61
-
</li>
62
-
<li><a href="">Page 6</a></li>
63
-
</ul>
64
-
</aside>
65
-
66
-
<main>
67
-
<h1>Demo</h1>
68
-
<p>
69
-
This is the demo page for dev.css, a classless, lightweight, and
70
-
accessible CSS framework! Lorem ipsum odor amet, consectetuer adipiscing
71
-
elit. Hac suscipit magnis a, duis sollicitudin imperdiet.
72
-
</p>
73
-
<h2>Heading 2</h2>
74
-
<p>
75
-
Lorem ipsum odor amet, consectetuer adipiscing elit. Hac suscipit magnis
76
-
a, duis sollicitudin imperdiet. Aliquam inceptos quis semper libero
77
-
gravida purus dui posuere lacinia. Aliquet erat torquent auctor leo
78
-
habitasse feugiat iaculis pharetra. Dignissim ridiculus gravida dictumst
79
-
donec iaculis.
80
-
</p>
81
-
<h3>Heading 3</h3>
82
-
<p>
83
-
Sed tortor congue mauris molestie per facilisi vulputate. Quam aenean
84
-
mollis dui sollicitudin; per pretium mattis. Dis luctus vestibulum proin
85
-
id neque porta. Vehicula sapien aenean tellus inceptos lectus facilisis
86
-
viverra. Lacinia habitasse convallis diam elit lobortis luctus.
87
-
</p>
88
-
<h4>Heading 4</h4>
89
-
<p>
90
-
Mattis per parturient convallis tempor nec posuere imperdiet. Natoque
91
-
dolor enim tempus bibendum ligula facilisis ipsum interdum. Netus
92
-
maximus laoreet adipiscing enim phasellus. Luctus nunc at egestas
93
-
torquent porttitor nostra aliquam tempus.
94
-
</p>
95
-
<h5>Heading 5</h5>
96
-
<p>
97
-
Erat interdum etiam condimentum, nullam odio ex maximus vel. Rhoncus
98
-
suspendisse vestibulum aptent amet torquent class suscipit ultrices
99
-
viverra.
100
-
</p>
101
-
<h6>Heading 6</h6>
102
-
<p>
103
-
Mattis primis lacus ac metus sollicitudin consequat bibendum luctus.
104
-
Ridiculus dignissim tortor viverra posuere cras curabitur.
105
-
</p>
106
-
107
-
<br />
108
-
<hr />
109
-
<br />
110
-
111
-
<blockquote>
112
-
This entire page was made with just dev.css and basic HTML. You can view
113
-
the source
114
-
<a href="https://github.com/intergrav/dev.css/blob/main/demo.html"
115
-
>here</a
116
-
>.
117
-
</blockquote>
118
-
119
-
<br />
120
-
<hr />
121
-
<br />
122
-
123
-
<p>
124
-
Lorem <mark>ipsum</mark> dolor sit amet
125
-
<strong>consectetur</strong> adipisicing elit. Aut
126
-
<i>harum molestias</i> labore amet possimus
127
-
<s>exercitationem aperiam</s> earum, doloribus
128
-
<u>nobis ducimus</u> maiores quia voluptates quis omnis molestiae
129
-
quisquam. <a href="#">Voluptatibus, officiis laudantium?</a>
130
-
</p>
131
-
132
-
<p>
133
-
Lorem ipsum dolor sit amet consectetur adipisicing elit.
134
-
<code>Hic culpa, nobis doloremque</code> veniam non, nihil cupiditate
135
-
odit repellat est <kbd>ALT + F4</kbd> expedita facilis. Fuga aspernatur,
136
-
alias debitis eveniet totam minima vel.
137
-
</p>
138
-
139
-
<ul>
140
-
<li>List item</li>
141
-
<li>List item</li>
142
-
<li>List item</li>
143
-
<li>List item</li>
144
-
</ul>
145
-
146
-
<ol>
147
-
<li>Step 1</li>
148
-
<li>Step 2</li>
149
-
<li>????</li>
150
-
<li>Profit!</li>
151
-
</ol>
152
-
153
-
<dl>
154
-
<dt>Web</dt>
155
-
<dd>The part of the Internet that contains websites and web pages</dd>
156
-
<dt>HTML</dt>
157
-
<dd>A markup language for creating web pages</dd>
158
-
<dt>CSS</dt>
159
-
<dd>A technology to make HTML look better</dd>
160
-
</dl>
161
-
162
-
<blockquote cite="https://en.wikiquote.org/wiki/Edward_Snowden">
163
-
If you think privacy is unimportant for you because you have nothing to
164
-
hide, you might as well say free speech is unimportant for you because
165
-
you have nothing useful to say.
166
-
<br />
167
-
<br />
168
-
– Edward Snowden
169
-
</blockquote>
170
-
171
-
<pre><code><!DOCTYPE html>
172
-
<html>
173
-
<head>
174
-
<title>Hello World</title>
175
-
</head>
176
-
<body>
177
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
178
-
</body>
179
-
</html></code></pre>
180
-
181
-
<br />
182
-
<hr />
183
-
<br />
184
-
185
-
<details>
186
-
<summary>Click me!</summary>
187
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
188
-
</details>
189
-
190
-
<br />
191
-
<hr />
192
-
<br />
193
-
194
-
<article>
195
-
<h1>Article element</h1>
196
-
<p>This is an article element by itself.</p>
197
-
</article>
198
-
199
-
<article>
200
-
<h1>Article element</h1>
201
-
<p>This is an article element with other nested elements.</p>
202
-
<article>
203
-
<h2>Article 1</h2>
204
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
205
-
</article>
206
-
<article>
207
-
<h2>Article 2</h2>
208
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
209
-
</article>
210
-
<details>
211
-
<summary>Click me!</summary>
212
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
213
-
</details>
214
-
</article>
215
-
216
-
<br />
217
-
<hr />
218
-
<br />
219
-
220
-
<table>
221
-
<caption>
222
-
Ho-kago Tea Time
223
-
</caption>
224
-
<thead>
225
-
<tr>
226
-
<th>Name</th>
227
-
<th>Instrument</th>
228
-
</tr>
229
-
</thead>
230
-
<tbody>
231
-
<tr>
232
-
<td>Yui Hirasawa</td>
233
-
<td>Lead Guitar</td>
234
-
</tr>
235
-
<tr>
236
-
<td>Mio Akiyama</td>
237
-
<td>Bass</td>
238
-
</tr>
239
-
<tr>
240
-
<td>Ritsu Tainaka</td>
241
-
<td>Drums</td>
242
-
</tr>
243
-
<tr>
244
-
<td>Tsumugi Kotobuki</td>
245
-
<td>Keyboard</td>
246
-
</tr>
247
-
<tr>
248
-
<td>Azusa Nakano</td>
249
-
<td>Rhythm Guitar</td>
250
-
</tr>
251
-
</tbody>
252
-
<tfoot>
253
-
<tr>
254
-
<th>Name</th>
255
-
<th>Instrument</th>
256
-
</tr>
257
-
</tfoot>
258
-
</table>
259
-
260
-
<br />
261
-
<hr />
262
-
<br />
263
-
264
-
<form>
265
-
<p>
266
-
<em>
267
-
This is not a real form and does not submit or save any information.
268
-
</em>
269
-
</p>
270
-
<p>
271
-
<label>First name</label><br />
272
-
<input type="text" name="first_name" />
273
-
</p>
274
-
<p>
275
-
<label>Last name</label><br />
276
-
<input type="text" name="last_name" />
277
-
</p>
278
-
<p>
279
-
<label>Gender</label><br />
280
-
<label>
281
-
<input type="radio" name="gender" value="Male" />
282
-
Male
283
-
</label>
284
-
<br />
285
-
<label>
286
-
<input type="radio" name="gender" value="Female" />
287
-
Female
288
-
</label>
289
-
<br />
290
-
<label>
291
-
<input type="radio" name="gender" value="other-none-na" />
292
-
Non-binary
293
-
</label>
294
-
</p>
295
-
<p>
296
-
<label>Email</label><br />
297
-
<input type="email" name="email" required="" />
298
-
</p>
299
-
<p>
300
-
<label>Phone number</label><br />
301
-
<input type="tel" name="phone" />
302
-
</p>
303
-
<p>
304
-
<label>Password</label><br />
305
-
<input type="password" name="password" />
306
-
</p>
307
-
<p>
308
-
<label>Country</label><br />
309
-
<select>
310
-
<option>China</option>
311
-
<option>India</option>
312
-
<option>United States</option>
313
-
<option>Indonesia</option>
314
-
<option>Brazil</option>
315
-
</select>
316
-
</p>
317
-
<p>
318
-
<label>Comments</label><br />
319
-
<textarea></textarea>
320
-
</p>
321
-
<p>
322
-
<label>
323
-
<input type="checkbox" value="terms" />
324
-
I agree to the <a>terms and conditions</a>
325
-
</label>
326
-
</p>
327
-
<p>
328
-
<button>Sign up</button>
329
-
<button type="reset">Reset form</button>
330
-
<button disabled="disabled">Disabled</button>
331
-
</p>
332
-
</form>
333
-
334
-
<br />
335
-
<hr />
336
-
<br />
337
-
338
-
<img
339
-
src="https://elements.xz.style/assets/fuji-daniel-hehn.jpg"
340
-
alt="Mt. Fuji"
341
-
/>
342
-
</main>
343
-
344
-
<footer>
345
-
<p>This is an optional footer.</p>
346
-
</footer>
347
-
</body>
348
-
</html>