lightweight, simple, classless CSS framework inspired by new.css
devcss.devins.page
framework
lightweight
css
classless
stylesheet
chore: cleanup and reorganize
+76
-88
+76
-88
dev.css
+76
-88
dev.css
···
13
13
4. margins for most elements
14
14
5. typography
15
15
6. document
16
-
7. header
17
-
8. footer
18
-
9. blockquotes
19
-
10. buttons and inputs
20
-
11. code and keyboards
21
-
12. details
22
-
13. description lists
23
-
14. horizontal rules
24
-
15. fieldsets
25
-
16. tables
26
-
17. lists
16
+
7. blockquotes
17
+
8 buttons and inputs
18
+
9. code and keyboards
19
+
10. details
20
+
11. description lists
21
+
12. horizontal rules
22
+
13. fieldsets
23
+
14. tables
24
+
15. lists
27
25
*/
28
26
29
27
/* 1. configurable variables */
···
225
223
overflow-x: hidden;
226
224
}
227
225
228
-
main,
229
-
aside {
230
-
padding: 1.5rem;
231
-
background: var(--dc-bg-1);
232
-
border: 1px solid var(--dc-bg-3);
233
-
border-radius: 0.25rem;
234
-
}
235
-
236
-
article {
237
-
padding: 1rem;
238
-
background: var(--dc-bg-2);
239
-
border: 1px solid var(--dc-bg-3);
240
-
border-radius: 0.375rem;
241
-
}
242
-
243
-
article > *:last-child,
244
-
aside > *:last-child,
245
-
main > *:last-child {
246
-
margin-bottom: 0;
247
-
}
248
-
249
-
@media only screen and (max-width: 48rem) {
250
-
main {
251
-
margin: -1rem;
252
-
margin-bottom: 0rem;
253
-
background: none;
254
-
border: none;
255
-
}
256
-
257
-
aside {
258
-
margin-top: 1rem;
259
-
margin-bottom: 1rem;
260
-
}
261
-
262
-
header {
263
-
background-color: var(--dc-bg-1);
264
-
border-bottom: 1px solid var(--dc-bg-3);
265
-
}
266
-
}
267
-
268
-
aside h1,
269
-
aside h2,
270
-
aside h3 {
271
-
padding-bottom: 0;
272
-
border-bottom: none;
273
-
}
274
-
275
-
@media only screen and (min-width: 82rem) {
276
-
aside {
277
-
position: absolute;
278
-
left: calc(50% - ((48rem) / 2) - (16rem));
279
-
width: 16rem;
280
-
overflow-y: auto;
281
-
}
282
-
}
283
-
284
-
/* 7. header */
285
-
286
226
header {
287
227
padding: 1rem calc(50vw - 50%);
288
-
margin: 0rem calc(50% - 50vw) 1rem;
228
+
margin: 0rem calc(50% - 50vw) 0rem;
289
229
}
290
230
291
231
header * {
···
317
257
content: "• ";
318
258
}
319
259
320
-
@media only screen and (max-width: 48rem) {
321
-
main,
322
-
aside {
323
-
padding: 1rem;
324
-
}
325
-
}
326
-
327
-
/* 8. footer */
328
-
329
260
footer > *:last-child {
330
261
margin-bottom: 0;
331
262
}
···
343
274
content: "• ";
344
275
}
345
276
346
-
/* 9. blockquotes */
277
+
main,
278
+
aside {
279
+
padding: 1.5rem;
280
+
background: var(--dc-bg-1);
281
+
border: 1px solid var(--dc-bg-3);
282
+
border-radius: 0.25rem;
283
+
}
284
+
285
+
article {
286
+
padding: 1rem;
287
+
background: var(--dc-bg-2);
288
+
border: 1px solid var(--dc-bg-3);
289
+
border-radius: 0.375rem;
290
+
}
291
+
292
+
article > *:last-child,
293
+
aside > *:last-child,
294
+
main > *:last-child {
295
+
margin-bottom: 0;
296
+
}
297
+
298
+
aside h1,
299
+
aside h2,
300
+
aside h3 {
301
+
padding-bottom: 0;
302
+
border-bottom: none;
303
+
}
304
+
305
+
@media only screen and (max-width: 48rem) {
306
+
main {
307
+
margin: -1rem;
308
+
margin-bottom: 0rem;
309
+
background: none;
310
+
border: none;
311
+
}
312
+
313
+
header {
314
+
background-color: var(--dc-bg-1);
315
+
border-bottom: 1px solid var(--dc-bg-3);
316
+
margin: 0rem calc(50% - 50vw) 1rem !important;
317
+
}
318
+
319
+
main,
320
+
aside {
321
+
padding: 1rem;
322
+
}
323
+
}
324
+
325
+
@media only screen and (min-width: 82rem) {
326
+
aside {
327
+
position: absolute;
328
+
left: calc(50% - ((48rem) / 2) - (16rem));
329
+
width: 16rem;
330
+
overflow-y: auto;
331
+
}
332
+
}
333
+
334
+
/* 7. blockquotes */
347
335
blockquote {
348
336
padding: 1.25rem;
349
337
background: var(--dc-bg-2);
···
357
345
margin-bottom: 0;
358
346
}
359
347
360
-
/* 10. buttons and inputs */
348
+
/* 8. buttons and inputs */
361
349
a button,
362
350
button,
363
351
input[type="submit"],
···
420
408
accent-color: var(--dc-ac-1);
421
409
}
422
410
423
-
/* 11. code and keyboards */
411
+
/* 9. code and keyboards */
424
412
code,
425
413
samp,
426
414
kbd,
···
447
435
border: 0;
448
436
}
449
437
450
-
/* 12. details */
438
+
/* 10. details */
451
439
details {
452
440
padding: 0.5rem 1rem;
453
441
background: var(--dc-bg-2);
···
474
462
padding-bottom: 0;
475
463
}
476
464
477
-
/* 13. description lists */
465
+
/* 11. description lists */
478
466
dt {
479
467
font-weight: bold;
480
468
}
···
483
471
content: "→ ";
484
472
}
485
473
486
-
/* 14. horizontal rules */
474
+
/* 12 horizontal rules */
487
475
hr {
488
476
border: 0;
489
477
border-bottom: 2px solid var(--dc-bg-3);
490
478
}
491
479
492
-
/* 15. fieldsets */
480
+
/* 13. fieldsets */
493
481
fieldset {
494
482
margin-top: 1rem;
495
483
padding: 2rem;
···
501
489
padding: auto 0.5rem;
502
490
}
503
491
504
-
/* 16. tables */
492
+
/* 14. tables */
505
493
table {
506
494
border-collapse: collapse;
507
495
width: 100%;
···
527
515
margin-bottom: 0.5rem;
528
516
}
529
517
530
-
/* 17. lists */
518
+
/* 15. lists */
531
519
ol,
532
520
ul {
533
521
padding-left: 2rem;