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