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