lightweight, simple, classless CSS framework inspired by new.css
devcss.devins.page
framework
lightweight
css
classless
stylesheet
feat: css and demo files
+688
+250
demo.html
+250
demo.html
···
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="dev.css" />
8
+
</head>
9
+
<body>
10
+
<header>
11
+
<h1>dev.css Demo</h1>
12
+
<nav>
13
+
<a>Home</a> / <a>About</a> / <a>Portfolio</a> / <a>Awesome</a> /
14
+
<a>Sauce</a>
15
+
</nav>
16
+
</header>
17
+
18
+
<h1>Heading 1</h1>
19
+
<p>
20
+
This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
21
+
elit.
22
+
</p>
23
+
<h2>Heading 2</h2>
24
+
<p>
25
+
This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
26
+
elit.
27
+
</p>
28
+
<h3>Heading 3</h3>
29
+
<p>
30
+
This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
31
+
elit.
32
+
</p>
33
+
<h4>Heading 4</h4>
34
+
<p>
35
+
This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
36
+
elit.
37
+
</p>
38
+
<h5>Heading 5</h5>
39
+
<p>
40
+
This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
41
+
elit.
42
+
</p>
43
+
<h6>Heading 6</h6>
44
+
<p>
45
+
This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
46
+
elit.
47
+
</p>
48
+
49
+
<br />
50
+
<hr />
51
+
<br />
52
+
53
+
<p>
54
+
Lorem <mark>ipsum</mark> dolor sit amet
55
+
<strong>consectetur</strong> adipisicing elit. Aut
56
+
<i>harum molestias</i> labore amet possimus
57
+
<s>exercitationem aperiam</s> earum, doloribus
58
+
<u>nobis ducimus</u> maiores quia voluptates quis omnis molestiae
59
+
quisquam. <a href="#">Voluptatibus, officiis laudantium?</a>
60
+
</p>
61
+
62
+
<p>
63
+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
64
+
<code>Hic culpa, nobis doloremque</code> veniam non, nihil cupiditate odit
65
+
repellat est <kbd>ALT + F4</kbd> expedita facilis. Fuga aspernatur, alias
66
+
debitis eveniet totam minima vel.
67
+
</p>
68
+
69
+
<ul>
70
+
<li>List item</li>
71
+
<li>List item</li>
72
+
<li>List item</li>
73
+
<li>List item</li>
74
+
</ul>
75
+
76
+
<ol>
77
+
<li>Step 1</li>
78
+
<li>Step 2</li>
79
+
<li>????</li>
80
+
<li>Profit!</li>
81
+
</ol>
82
+
83
+
<dl>
84
+
<dt>Web</dt>
85
+
<dd>The part of the Internet that contains websites and web pages</dd>
86
+
<dt>HTML</dt>
87
+
<dd>A markup language for creating web pages</dd>
88
+
<dt>CSS</dt>
89
+
<dd>A technology to make HTML look better</dd>
90
+
</dl>
91
+
92
+
<blockquote cite="https://en.wikiquote.org/wiki/Edward_Snowden">
93
+
If you think privacy is unimportant for you because you have nothing to
94
+
hide, you might as well say free speech is unimportant for you because you
95
+
have nothing useful to say.
96
+
<br />
97
+
<br />
98
+
– Edward Snowden
99
+
</blockquote>
100
+
101
+
<pre>
102
+
<!DOCTYPE html>
103
+
<html>
104
+
<head>
105
+
<title>Hello World</title>
106
+
</head>
107
+
<body>
108
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
109
+
</body>
110
+
</html></pre
111
+
>
112
+
113
+
<br />
114
+
<hr />
115
+
<br />
116
+
117
+
<table>
118
+
<caption>
119
+
Ho-kago Tea Time
120
+
</caption>
121
+
<thead>
122
+
<tr>
123
+
<th>Name</th>
124
+
<th>Instrument</th>
125
+
</tr>
126
+
</thead>
127
+
<tbody>
128
+
<tr>
129
+
<td>Yui Hirasawa</td>
130
+
<td>Lead Guitar</td>
131
+
</tr>
132
+
<tr>
133
+
<td>Mio Akiyama</td>
134
+
<td>Bass</td>
135
+
</tr>
136
+
<tr>
137
+
<td>Ritsu Tainaka</td>
138
+
<td>Drums</td>
139
+
</tr>
140
+
<tr>
141
+
<td>Tsumugi Kotobuki</td>
142
+
<td>Keyboard</td>
143
+
</tr>
144
+
<tr>
145
+
<td>Azusa Nakano</td>
146
+
<td>Rhythm Guitar</td>
147
+
</tr>
148
+
</tbody>
149
+
<tfoot>
150
+
<tr>
151
+
<th>Name</th>
152
+
<th>Instrument</th>
153
+
</tr>
154
+
</tfoot>
155
+
</table>
156
+
157
+
<br />
158
+
<hr />
159
+
<br />
160
+
161
+
<form>
162
+
<p>
163
+
<em>
164
+
This is not a real form and does not submit or save any information.
165
+
</em>
166
+
</p>
167
+
<p>
168
+
<label>First name</label><br />
169
+
<input type="text" name="first_name" />
170
+
</p>
171
+
<p>
172
+
<label>Last name</label><br />
173
+
<input type="text" name="last_name" />
174
+
</p>
175
+
<p>
176
+
<label>Gender</label><br />
177
+
<label>
178
+
<input type="radio" name="gender" value="Male" />
179
+
Male
180
+
</label>
181
+
<br />
182
+
<label>
183
+
<input type="radio" name="gender" value="Female" />
184
+
Female
185
+
</label>
186
+
<br />
187
+
<label>
188
+
<input type="radio" name="gender" value="other-none-na" />
189
+
Non-binary
190
+
</label>
191
+
</p>
192
+
<p>
193
+
<label>Email</label><br />
194
+
<input type="email" name="email" required="" />
195
+
</p>
196
+
<p>
197
+
<label>Phone number</label><br />
198
+
<input type="tel" name="phone" />
199
+
</p>
200
+
<p>
201
+
<label>Password</label><br />
202
+
<input type="password" name="password" />
203
+
</p>
204
+
<p>
205
+
<label>Country</label><br />
206
+
<select>
207
+
<option>China</option>
208
+
<option>India</option>
209
+
<option>United States</option>
210
+
<option>Indonesia</option>
211
+
<option>Brazil</option>
212
+
</select>
213
+
</p>
214
+
<p>
215
+
<label>Comments</label><br />
216
+
<textarea></textarea>
217
+
</p>
218
+
<p>
219
+
<label>
220
+
<input type="checkbox" value="terms" />
221
+
I agree to the <a>terms and conditions</a>
222
+
</label>
223
+
</p>
224
+
<p>
225
+
<button>Sign up</button>
226
+
<button type="reset">Reset form</button>
227
+
<button disabled="disabled">Disabled</button>
228
+
</p>
229
+
</form>
230
+
231
+
<br />
232
+
<hr />
233
+
<br />
234
+
235
+
<img
236
+
src="https://elements.xz.style/assets/fuji-daniel-hehn.jpg"
237
+
alt="Mt. Fuji"
238
+
/>
239
+
240
+
<p>
241
+
Inline image:
242
+
<a href="#"
243
+
><img
244
+
src="https://elements.xz.style/assets/fuji-daniel-hehn.jpg"
245
+
width="50"
246
+
alt="Mt. Fuji"
247
+
/></a>
248
+
</p>
249
+
</body>
250
+
</html>
+438
dev.css
+438
dev.css
···
1
+
:root {
2
+
/* Fonts - Geist, Inter, Apple default (Gecko and Blink), Microsoft default, browser default */
3
+
--dc-font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont,
4
+
"Segoe UI", sans-serif;
5
+
--dc-font-mono: "Geist Mono", monospace;
6
+
/* Light colors */
7
+
--dc-tx-1: #000000;
8
+
--dc-tx-2: #1a1a1a;
9
+
--dc-bg-1: #fafafa;
10
+
--dc-bg-2: #fff;
11
+
--dc-bg-3: #ebebeb;
12
+
--dc-lk-1: #0068d6;
13
+
--dc-lkb-1: #0072f5;
14
+
--dc-lkb-2: #0062d1;
15
+
--dc-lkb-tx: #ededed;
16
+
--dc-ac-1: #8e4ec6;
17
+
--dc-ac-tx: #ededed;
18
+
/* Dark colors */
19
+
--dc-d-tx-1: #ededed;
20
+
--dc-d-tx-2: #a1a1a1;
21
+
--dc-d-bg-1: #000;
22
+
--dc-d-bg-2: #ffffff0f;
23
+
--dc-d-bg-3: #2e2e2e;
24
+
--dc-d-lk-1: #52a8ff;
25
+
--dc-d-lkb-1: #0072f5;
26
+
--dc-d-lkb-2: #0062d1;
27
+
--dc-d-lkb-tx: #ededed;
28
+
--dc-d-ac-1: #8e4ec6;
29
+
--dc-d-ac-tx: #ededed;
30
+
}
31
+
32
+
@media (prefers-color-scheme: dark) {
33
+
:root {
34
+
--dc-tx-1: var(--dc-d-tx-1);
35
+
--dc-tx-2: var(--dc-d-tx-2);
36
+
--dc-bg-1: var(--dc-d-bg-1);
37
+
--dc-bg-2: var(--dc-d-bg-2);
38
+
--dc-bg-3: var(--dc-d-bg-3);
39
+
--dc-lk-1: var(--dc-d-lk-1);
40
+
--dc-lkb-1: var(--dc-d-lkb-1);
41
+
--dc-lkb-2: var(--dc-d-lkb-2);
42
+
--dc-lkb-tx: var(--dc-d-lkb-tx);
43
+
--dc-ac-1: var(--dc-d-ac-1);
44
+
--dc-ac-tx: var(--dc-d-ac-tx);
45
+
}
46
+
}
47
+
48
+
* {
49
+
margin: 0;
50
+
padding: 0;
51
+
}
52
+
53
+
address,
54
+
area,
55
+
article,
56
+
aside,
57
+
audio,
58
+
blockquote,
59
+
datalist,
60
+
details,
61
+
dl,
62
+
fieldset,
63
+
figure,
64
+
form,
65
+
input,
66
+
iframe,
67
+
img,
68
+
meter,
69
+
nav,
70
+
ol,
71
+
optgroup,
72
+
option,
73
+
output,
74
+
p,
75
+
pre,
76
+
progress,
77
+
ruby,
78
+
section,
79
+
table,
80
+
textarea,
81
+
ul,
82
+
video {
83
+
margin-bottom: 1rem;
84
+
}
85
+
86
+
html,
87
+
input,
88
+
select,
89
+
button {
90
+
font-family: var(--dc-font-sans);
91
+
}
92
+
93
+
body {
94
+
margin: 0 auto;
95
+
max-width: 750px;
96
+
padding: 2rem;
97
+
border-radius: 4px;
98
+
overflow-x: hidden;
99
+
word-break: break-word;
100
+
overflow-wrap: break-word;
101
+
background: var(--dc-bg-1);
102
+
color: var(--dc-tx-2);
103
+
font-size: 1.03rem;
104
+
line-height: 1.5;
105
+
}
106
+
107
+
::selection {
108
+
background: var(--dc-ac-1);
109
+
color: var(--dc-ac-tx);
110
+
}
111
+
112
+
h1,
113
+
h2,
114
+
h3,
115
+
h4,
116
+
h5,
117
+
h6 {
118
+
line-height: 1;
119
+
color: var(--dc-tx-1);
120
+
padding-top: 0.875rem;
121
+
}
122
+
123
+
h1,
124
+
h2,
125
+
h3 {
126
+
padding-bottom: 6px;
127
+
margin-bottom: 8px;
128
+
border-bottom: 1px solid var(--dc-bg-3);
129
+
}
130
+
131
+
h4,
132
+
h5,
133
+
h6 {
134
+
margin-bottom: 0.3rem;
135
+
}
136
+
137
+
h1 {
138
+
font-size: 2.25rem;
139
+
}
140
+
141
+
h2 {
142
+
font-size: 1.85rem;
143
+
}
144
+
145
+
h3 {
146
+
font-size: 1.55rem;
147
+
}
148
+
149
+
h4 {
150
+
font-size: 1.25rem;
151
+
}
152
+
153
+
h5 {
154
+
font-size: 1rem;
155
+
}
156
+
157
+
h6 {
158
+
font-size: 0.875rem;
159
+
}
160
+
161
+
a {
162
+
color: var(--dc-lk-1);
163
+
}
164
+
165
+
abbr:hover {
166
+
cursor: help;
167
+
}
168
+
169
+
blockquote {
170
+
padding: 1.5rem;
171
+
background: var(--dc-bg-2);
172
+
border-left: 5px solid var(--dc-bg-3);
173
+
border-radius: 4px;
174
+
}
175
+
176
+
blockquote *:last-child {
177
+
padding-bottom: 0;
178
+
margin-bottom: 0;
179
+
}
180
+
181
+
header {
182
+
background: var(--dc-bg-2);
183
+
border-bottom: 1px solid var(--dc-bg-3);
184
+
padding: 0.75rem;
185
+
margin: -2rem calc(50% - 50vw) 2rem;
186
+
padding-left: calc(50vw - 50%);
187
+
padding-right: calc(50vw - 50%);
188
+
189
+
/* Sticky header if supported */
190
+
position: sticky;
191
+
top: 0;
192
+
193
+
/* Blur for transparent surface if supported */
194
+
backdrop-filter: blur(16px);
195
+
}
196
+
197
+
/* Move header to the side to preserve vertical space, if screen is minimum width 1452px */
198
+
@media (min-width: 1452px) {
199
+
header {
200
+
width: 260px;
201
+
height: auto;
202
+
position: fixed;
203
+
left: calc(50% - 725px);
204
+
background: #ffffff00;
205
+
border-bottom: 0;
206
+
padding: 2rem 1.5rem;
207
+
margin: 0;
208
+
209
+
/* Disable blur */
210
+
backdrop-filter: none;
211
+
}
212
+
}
213
+
214
+
header h1,
215
+
header h2,
216
+
header h3 {
217
+
padding-bottom: 0;
218
+
border-bottom: 0;
219
+
}
220
+
221
+
header > *:first-child {
222
+
margin-top: 0;
223
+
padding-top: 0;
224
+
}
225
+
226
+
header > *:last-child {
227
+
margin-bottom: 0;
228
+
}
229
+
230
+
a button,
231
+
button,
232
+
input[type="submit"],
233
+
input[type="reset"],
234
+
input[type="button"] {
235
+
font-size: 1rem;
236
+
display: inline-block;
237
+
padding: 6px 12px;
238
+
text-align: center;
239
+
text-decoration: none;
240
+
white-space: nowrap;
241
+
background: var(--dc-lkb-1);
242
+
color: var(--dc-lkb-tx);
243
+
border: 0;
244
+
border-radius: 4px;
245
+
box-sizing: border-box;
246
+
cursor: pointer;
247
+
}
248
+
249
+
a button[disabled],
250
+
button[disabled],
251
+
input[type="submit"][disabled],
252
+
input[type="reset"][disabled],
253
+
input[type="button"][disabled] {
254
+
cursor: not-allowed;
255
+
opacity: 0.5;
256
+
}
257
+
258
+
.button:focus,
259
+
.button:enabled:hover,
260
+
button:focus,
261
+
button:enabled:hover,
262
+
input[type="submit"]:focus,
263
+
input[type="submit"]:enabled:hover,
264
+
input[type="reset"]:focus,
265
+
input[type="reset"]:enabled:hover,
266
+
input[type="button"]:focus,
267
+
input[type="button"]:enabled:hover {
268
+
background: var(--dc-lkb-2);
269
+
}
270
+
271
+
a img {
272
+
margin-bottom: 0;
273
+
}
274
+
275
+
code,
276
+
pre,
277
+
kbd,
278
+
samp {
279
+
font-family: var(--dc-font-mono);
280
+
}
281
+
282
+
code,
283
+
samp,
284
+
kbd,
285
+
pre {
286
+
background: var(--dc-bg-2);
287
+
border: 1px solid var(--dc-bg-3);
288
+
border-radius: 4px;
289
+
padding: 3px 6px;
290
+
font-size: 0.9em;
291
+
}
292
+
293
+
kbd {
294
+
border-bottom: 3px solid var(--dc-bg-3);
295
+
}
296
+
297
+
pre {
298
+
padding: 1rem 1.4rem;
299
+
max-width: 100%;
300
+
overflow: auto;
301
+
}
302
+
303
+
pre code {
304
+
background: inherit;
305
+
font-size: inherit;
306
+
color: inherit;
307
+
border: 0;
308
+
padding: 0;
309
+
margin: 0;
310
+
}
311
+
312
+
code pre {
313
+
display: inline;
314
+
background: inherit;
315
+
font-size: inherit;
316
+
color: inherit;
317
+
border: 0;
318
+
padding: 0;
319
+
margin: 0;
320
+
}
321
+
322
+
details {
323
+
padding: 0.6rem 1rem;
324
+
background: var(--dc-bg-2);
325
+
border: 1px solid var(--dc-bg-3);
326
+
border-radius: 4px;
327
+
}
328
+
329
+
summary {
330
+
cursor: pointer;
331
+
font-weight: bold;
332
+
}
333
+
334
+
details[open] {
335
+
padding-bottom: 0.75rem;
336
+
}
337
+
338
+
details[open] summary {
339
+
margin-bottom: 6px;
340
+
}
341
+
342
+
details[open] > *:last-child {
343
+
margin-bottom: 0;
344
+
}
345
+
346
+
dt {
347
+
font-weight: bold;
348
+
}
349
+
350
+
dd::before {
351
+
content: "→ ";
352
+
}
353
+
354
+
hr {
355
+
border: 0;
356
+
border-bottom: 1px solid var(--dc-bg-3);
357
+
margin: 1rem auto;
358
+
}
359
+
360
+
fieldset {
361
+
margin-top: 1rem;
362
+
padding: 2rem;
363
+
border: 1px solid var(--dc-bg-3);
364
+
border-radius: 4px;
365
+
}
366
+
367
+
legend {
368
+
padding: auto 0.5rem;
369
+
}
370
+
371
+
table {
372
+
border-collapse: collapse;
373
+
width: 100%;
374
+
}
375
+
376
+
td,
377
+
th {
378
+
border: 1px solid var(--dc-bg-3);
379
+
text-align: left;
380
+
padding: 0.5rem;
381
+
}
382
+
383
+
th {
384
+
background: var(--dc-bg-2);
385
+
}
386
+
387
+
tr:nth-child(even) {
388
+
background: var(--dc-bg-2);
389
+
}
390
+
391
+
table caption {
392
+
font-weight: bold;
393
+
margin-bottom: 0.5rem;
394
+
}
395
+
396
+
textarea {
397
+
max-width: 100%;
398
+
}
399
+
400
+
ol,
401
+
ul {
402
+
padding-left: 2rem;
403
+
}
404
+
405
+
li {
406
+
margin-top: 0.4rem;
407
+
}
408
+
409
+
ul ul,
410
+
ol ul,
411
+
ul ol,
412
+
ol ol {
413
+
margin-bottom: 0;
414
+
}
415
+
416
+
mark {
417
+
padding: 3px 6px;
418
+
background: var(--dc-ac-1);
419
+
color: var(--dc-ac-tx);
420
+
border-radius: 4px;
421
+
}
422
+
423
+
textarea,
424
+
select,
425
+
input {
426
+
padding: 6px 12px;
427
+
margin-bottom: 0.5rem;
428
+
background: var(--dc-bg-2);
429
+
color: var(--dc-tx-2);
430
+
border: 1px solid var(--dc-bg-3);
431
+
border-radius: 4px;
432
+
box-shadow: none;
433
+
box-sizing: border-box;
434
+
}
435
+
436
+
img {
437
+
max-width: 100%;
438
+
}