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