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
9 rel="stylesheet"
10 href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist.min.css"
11 />
12 <link
13 rel="stylesheet"
14 href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist-mono.min.css"
15 />
16 </head>
17
18 <body>
19 <header>
20 <h4>dev.css</h4>
21 <h1>Demo</h1>
22 <p>This is the demo page for dev.css.</p>
23 <nav>
24 <ul>
25 <li><a href="demo">Demo</a></li>
26 <li><a href="https://github.com/intergrav/dev.css">Git</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 <h1>Heading 1</h1>
40 <p>
41 This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
42 elit.
43 </p>
44 <h2>Heading 2</h2>
45 <p>
46 This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
47 elit.
48 </p>
49 <h3>Heading 3</h3>
50 <p>
51 This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
52 elit.
53 </p>
54 <h4>Heading 4</h4>
55 <p>
56 This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
57 elit.
58 </p>
59 <h5>Heading 5</h5>
60 <p>
61 This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
62 elit.
63 </p>
64 <h6>Heading 6</h6>
65 <p>
66 This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
67 elit.
68 </p>
69
70 <br />
71 <hr />
72 <br />
73
74 <blockquote>
75 This entire page was made with dev.css. You can view the source
76 <a href="https://github.com/intergrav/dev.css/blob/main/demo.html">here</a
77 >.
78 </blockquote>
79
80 <br />
81 <hr />
82 <br />
83
84 <p>
85 Lorem <mark>ipsum</mark> dolor sit amet
86 <strong>consectetur</strong> adipisicing elit. Aut
87 <i>harum molestias</i> labore amet possimus
88 <s>exercitationem aperiam</s> earum, doloribus
89 <u>nobis ducimus</u> maiores quia voluptates quis omnis molestiae
90 quisquam. <a href="#">Voluptatibus, officiis laudantium?</a>
91 </p>
92
93 <p>
94 Lorem ipsum dolor sit amet consectetur adipisicing elit.
95 <code>Hic culpa, nobis doloremque</code> veniam non, nihil cupiditate odit
96 repellat est <kbd>ALT + F4</kbd> expedita facilis. Fuga aspernatur, alias
97 debitis eveniet totam minima vel.
98 </p>
99
100 <ul>
101 <li>List item</li>
102 <li>List item</li>
103 <li>List item</li>
104 <li>List item</li>
105 </ul>
106
107 <ol>
108 <li>Step 1</li>
109 <li>Step 2</li>
110 <li>????</li>
111 <li>Profit!</li>
112 </ol>
113
114 <dl>
115 <dt>Web</dt>
116 <dd>The part of the Internet that contains websites and web pages</dd>
117 <dt>HTML</dt>
118 <dd>A markup language for creating web pages</dd>
119 <dt>CSS</dt>
120 <dd>A technology to make HTML look better</dd>
121 </dl>
122
123 <blockquote cite="https://en.wikiquote.org/wiki/Edward_Snowden">
124 If you think privacy is unimportant for you because you have nothing to
125 hide, you might as well say free speech is unimportant for you because you
126 have nothing useful to say.
127 <br />
128 <br />
129 – Edward Snowden
130 </blockquote>
131
132 <pre>
133<!DOCTYPE html>
134 <html>
135 <head>
136 <title>Hello World</title>
137 </head>
138 <body>
139 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
140 </body>
141</html></pre
142 >
143
144 <br />
145 <hr />
146 <br />
147
148 <details>
149 <summary>Click me!</summary>
150 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
151 </details>
152
153 <br />
154 <hr />
155 <br />
156
157 <table>
158 <caption>
159 Ho-kago Tea Time
160 </caption>
161 <thead>
162 <tr>
163 <th>Name</th>
164 <th>Instrument</th>
165 </tr>
166 </thead>
167 <tbody>
168 <tr>
169 <td>Yui Hirasawa</td>
170 <td>Lead Guitar</td>
171 </tr>
172 <tr>
173 <td>Mio Akiyama</td>
174 <td>Bass</td>
175 </tr>
176 <tr>
177 <td>Ritsu Tainaka</td>
178 <td>Drums</td>
179 </tr>
180 <tr>
181 <td>Tsumugi Kotobuki</td>
182 <td>Keyboard</td>
183 </tr>
184 <tr>
185 <td>Azusa Nakano</td>
186 <td>Rhythm Guitar</td>
187 </tr>
188 </tbody>
189 <tfoot>
190 <tr>
191 <th>Name</th>
192 <th>Instrument</th>
193 </tr>
194 </tfoot>
195 </table>
196
197 <br />
198 <hr />
199 <br />
200
201 <form>
202 <p>
203 <em>
204 This is not a real form and does not submit or save any information.
205 </em>
206 </p>
207 <p>
208 <label>First name</label><br />
209 <input type="text" name="first_name" />
210 </p>
211 <p>
212 <label>Last name</label><br />
213 <input type="text" name="last_name" />
214 </p>
215 <p>
216 <label>Gender</label><br />
217 <label>
218 <input type="radio" name="gender" value="Male" />
219 Male
220 </label>
221 <br />
222 <label>
223 <input type="radio" name="gender" value="Female" />
224 Female
225 </label>
226 <br />
227 <label>
228 <input type="radio" name="gender" value="other-none-na" />
229 Non-binary
230 </label>
231 </p>
232 <p>
233 <label>Email</label><br />
234 <input type="email" name="email" required="" />
235 </p>
236 <p>
237 <label>Phone number</label><br />
238 <input type="tel" name="phone" />
239 </p>
240 <p>
241 <label>Password</label><br />
242 <input type="password" name="password" />
243 </p>
244 <p>
245 <label>Country</label><br />
246 <select>
247 <option>China</option>
248 <option>India</option>
249 <option>United States</option>
250 <option>Indonesia</option>
251 <option>Brazil</option>
252 </select>
253 </p>
254 <p>
255 <label>Comments</label><br />
256 <textarea></textarea>
257 </p>
258 <p>
259 <label>
260 <input type="checkbox" value="terms" />
261 I agree to the <a>terms and conditions</a>
262 </label>
263 </p>
264 <p>
265 <button>Sign up</button>
266 <button type="reset">Reset form</button>
267 <button disabled="disabled">Disabled</button>
268 </p>
269 </form>
270
271 <br />
272 <hr />
273 <br />
274
275 <img
276 src="https://elements.xz.style/assets/fuji-daniel-hehn.jpg"
277 alt="Mt. Fuji"
278 />
279
280 <p>
281 Inline image:
282 <a href="#"
283 ><img
284 src="https://elements.xz.style/assets/fuji-daniel-hehn.jpg"
285 width="50"
286 alt="Mt. Fuji"
287 /></a>
288 </p>
289
290 <footer>
291 <p>This is an optional footer.</p>
292 </footer>
293 </body>
294</html>