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