lightweight, simple, classless CSS framework inspired by new.css
devcss.devins.page
framework
lightweight
css
classless
stylesheet
1/* dev.css v5, a lightweight CSS framework - https://tangled.org/devins.page/dev.css */
2/* about: tiny, simple, classless CSS framework inspired by new.css */
3
4/* table of contents
5 1. configurable variables
6 2. typography
7 3. document
8 4. blockquotes
9 5. buttons and inputs
10 6. code and keyboards
11 7. details
12 8. description lists
13 9. horizontal rules
14 10. fieldsets
15 11. tables
16 12. lists
17 13. media
18*/
19
20/* 1. configurable variables */
21/* adjustable by you! see ./theme/boilerplate.user.css */
22:root {
23 /* font families */
24 --dc-font: ui-sans-serif, system-ui, sans-serif;
25 --dc-font-mono: ui-monospace, monospace;
26
27 /* light/dark colors */
28 color-scheme: light dark; /* light and dark scrollbars, inputs, etc */
29 --dc-tx-1: light-dark(#171717, #ededed); /* primary text */
30 --dc-tx-2: light-dark(#666, #a1a1a1); /* secondary text */
31 --dc-bg-1: light-dark(#fff, #0a0a0a); /* primary background */
32 --dc-bg-2: light-dark(#fafafa, #000); /* secondary background */
33 --dc-bg-3: light-dark(#ebebeb, #575757); /* border */
34 --dc-lk-1: light-dark(#005ff2, #47a8ff); /* link text */
35 --dc-lkb-1: light-dark(#006bff, #006efe); /* link button */
36 --dc-lkb-2: light-dark(#0059ec, #005be7); /* link button hover */
37 --dc-lkb-tx: light-dark(#fff, #fff); /* text over link button */
38 --dc-ac-1: light-dark(#a000f8, #9440d5); /* accent color */
39 --dc-ac-tx: light-dark(#fff, #fff); /* text over accent color */
40}
41
42/* 2. typography */
43
44p,
45h1,
46h2,
47h3,
48h4,
49h5,
50h6 {
51 overflow-wrap: break-word;
52}
53
54p {
55 text-wrap: pretty;
56}
57
58h1,
59h2,
60h3,
61h4,
62h5,
63h6 {
64 text-wrap: balance;
65}
66
67body {
68 font-family: var(--dc-font);
69 color: var(--dc-tx-2);
70 line-height: 1.5;
71}
72
73code,
74pre,
75kbd,
76samp {
77 font-family: var(--dc-font-mono);
78 font-size: 0.9rem;
79}
80
81h1,
82h2,
83h3,
84h4,
85h5,
86h6 {
87 color: var(--dc-tx-1);
88}
89
90h1,
91h2,
92h3 {
93 padding-block-end: 0.125rem;
94 border-block-end: 1px solid var(--dc-bg-3);
95 line-height: 1;
96}
97
98article h1,
99article h2,
100article h3 {
101 padding-block-end: 0.125rem;
102 border-block-end: none;
103}
104
105a {
106 color: var(--dc-lk-1);
107}
108
109mark {
110 border-radius: 0.375rem;
111 padding: 0.125rem 0.25rem;
112 background: var(--dc-ac-1);
113 color: var(--dc-ac-tx);
114}
115
116/* 3. document */
117body {
118 max-width: 48rem;
119 margin: 1rem auto 0;
120 padding: 0 1rem;
121 background: var(--dc-bg-2);
122 overflow-x: hidden;
123}
124
125header {
126 padding: 1rem calc(50vw - 50%);
127 margin: 0 calc(50% - 50vw) 0;
128 margin-top: -1rem;
129}
130
131header * {
132 padding: 0;
133 margin: 0;
134}
135
136header > *:not(:last-child) {
137 margin-block-end: 0.25rem;
138}
139
140header h1,
141header h2,
142header h3 {
143 border-block-end: none;
144 padding-block-end: 0;
145}
146
147header nav ul,
148footer nav ul {
149 display: flex;
150 flex-wrap: wrap;
151 list-style: none;
152 padding: 0;
153}
154
155header nav ul li,
156footer nav ul li {
157 margin: 0;
158 display: flex;
159}
160
161header nav ul li:not(:first-child)::before,
162footer nav ul li:not(:first-child)::before {
163 content: "•";
164 margin: 0 0.25em;
165}
166
167article {
168 margin-block: 1rem;
169}
170
171main,
172article {
173 padding-inline: 1.5rem;
174 background: var(--dc-bg-1);
175 border: 1px solid var(--dc-bg-3);
176 border-radius: 0.25rem;
177}
178
179main article {
180 background: var(--dc-bg-2);
181 border-radius: 0.375rem;
182}
183
184@media only screen and (max-width: 48rem) {
185 main {
186 margin: -1rem;
187 background: none;
188 border: none;
189 }
190
191 header {
192 background-color: var(--dc-bg-1);
193 border-block-end: 1px solid var(--dc-bg-3);
194 margin-block-end: 1rem;
195 }
196
197 footer {
198 border-block-start: 1px solid var(--dc-bg-3);
199 }
200
201 main,
202 article {
203 padding: 1rem;
204 }
205}
206
207@media only screen and (min-width: 82rem) {
208 aside {
209 position: absolute;
210 width: 16rem;
211 }
212
213 aside:nth-child(even) {
214 left: calc(50% - ((48rem) / 2) - (16rem));
215 }
216
217 aside:nth-child(odd) {
218 right: calc(50% - ((48rem) / 2) - (16rem));
219 }
220}
221
222/* 4. blockquotes */
223blockquote {
224 padding: 1rem;
225 margin-inline: 0;
226 background: var(--dc-bg-2);
227 border: 1px solid var(--dc-bg-3);
228 border-inline-start: 5px solid var(--dc-bg-3);
229 border-radius: 0.375rem;
230}
231
232/* 5. buttons and inputs */
233input,
234button,
235textarea,
236select {
237 font: inherit;
238}
239
240button,
241input[type="submit"],
242input[type="reset"],
243input[type="button"] {
244 display: inline-block;
245 padding: 0.25rem 0.75rem;
246 text-align: center;
247 text-decoration: none;
248 background: var(--dc-lkb-1);
249 color: var(--dc-lkb-tx);
250 border: 0;
251 border-radius: 0.375rem;
252 box-sizing: border-box;
253 cursor: pointer;
254}
255
256button[disabled],
257input[type="submit"][disabled],
258input[type="reset"][disabled],
259input[type="button"][disabled] {
260 cursor: not-allowed;
261 opacity: 0.5;
262}
263
264.button:focus,
265.button:enabled:hover,
266button:focus,
267button:enabled:hover,
268input[type="submit"]:focus,
269input[type="submit"]:enabled:hover,
270input[type="reset"]:focus,
271input[type="reset"]:enabled:hover,
272input[type="button"]:focus,
273input[type="button"]:enabled:hover {
274 background: var(--dc-lkb-2);
275}
276
277textarea,
278select,
279input {
280 padding: 0.25rem 0.5rem;
281 background: var(--dc-bg-2);
282 color: var(--dc-tx-2);
283 border: 1px solid var(--dc-bg-3);
284 border-radius: 0.375rem;
285 box-shadow: none;
286 box-sizing: border-box;
287}
288
289textarea {
290 max-width: 100%;
291}
292
293input,
294progress {
295 accent-color: var(--dc-ac-1);
296}
297
298/* 6. code and keyboards */
299code,
300samp,
301kbd,
302pre {
303 background: var(--dc-bg-2);
304 border: 1px solid var(--dc-bg-3);
305 border-radius: 0.375rem;
306 padding: 0.125rem 0.25rem;
307 tab-size: 4;
308}
309
310kbd {
311 border-block-end: 3px solid var(--dc-bg-3);
312}
313
314pre {
315 padding: 1rem;
316 max-width: 100%;
317 overflow: auto;
318}
319
320pre code {
321 padding: 0;
322 border: 0;
323}
324
325/* 7. details */
326details {
327 margin-block: 1rem;
328}
329
330details:not(aside details) {
331 padding: 1rem;
332 background: var(--dc-bg-2);
333 border: 1px solid var(--dc-bg-3);
334 border-radius: 0.375rem;
335}
336
337aside details {
338 margin-block-start: 0;
339}
340
341summary {
342 cursor: pointer;
343 font-weight: bold;
344}
345
346details[open] > :last-child {
347 margin-block-end: 0;
348}
349
350/* 8. description lists */
351dt {
352 font-weight: bold;
353}
354
355dd::before {
356 content: "→ ";
357}
358
359/* 9. horizontal rules */
360hr {
361 border: 0;
362 border-block-end: 2px solid var(--dc-bg-3);
363}
364
365/* 10. fieldsets */
366fieldset {
367 padding: 1rem;
368 border: 1px solid var(--dc-bg-3);
369 border-radius: 0.375rem;
370}
371
372legend {
373 padding: auto 0.5rem;
374}
375
376/* 11. tables */
377table {
378 border-collapse: collapse;
379 width: 100%;
380}
381
382td,
383th {
384 border: 1px solid var(--dc-bg-3);
385 text-align: left;
386 padding: 0.5rem;
387}
388
389th {
390 background: var(--dc-bg-2);
391}
392
393tr:nth-child(even) {
394 background: var(--dc-bg-2);
395}
396
397table caption {
398 font-weight: bold;
399}
400
401/* 12. lists */
402ol,
403ul {
404 padding-inline-start: 2rem;
405}
406
407li {
408 margin-top: 0.4rem;
409}
410
411/* 13. media */
412img,
413picture,
414video,
415canvas,
416svg {
417 max-width: 100%;
418 height: auto;
419}