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