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