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