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