tiny, simple, classless CSS framework inspired by new.css
devcss.devins.page
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 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>