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