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