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>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>