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