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