tiny, simple, classless CSS framework inspired by new.css
devcss.devins.page
devins.page
framework
lightweight
css
classless
stylesheet
feat: boilerplate-auto
+3
-1
README.md
+3
-1
README.md
···
113
113
114
114
## Themes
115
115
116
-
You can use custom colors and custom fonts in dev.css through themes. See the `/theme` folder to view some premade ones. You can also copy the `boilerplate.css` and make a theme yourself. Simply apply it after the dev.css stylesheet. For example, to apply the terminal theme, put this after your main stylesheet:
116
+
You can use custom colors and custom fonts in dev.css through themes. See the `/theme` folder to view some premade ones. To use a theme, simply apply it after the dev.css stylesheet. For example, to apply the terminal theme, place this after your main stylesheet:
117
117
118
118
```html
119
119
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/theme/terminal.min.css">
120
120
```
121
+
122
+
If you're making a theme, I highly recommend using the `boilerplate-auto.css` template rather than the `boilerplate.css` template for accessibility reasons.
+1
demo.html
+1
demo.html
···
5
5
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
<title>Demo - dev.css</title>
7
7
<link rel="stylesheet" href="dev.css" />
8
+
<link rel="stylesheet" href="theme/boilerplate-auto.css" />
8
9
<link
9
10
rel="stylesheet"
10
11
href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist.min.css"
+51
theme/boilerplate-auto.css
+51
theme/boilerplate-auto.css
···
1
+
/* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
2
+
/* about: a template that you can modify, but with an automatic light/dark mode */
3
+
/* note: you can remove lines that you want to keep as the dev.css default, such as the font lines */
4
+
5
+
:root {
6
+
/* font families */
7
+
--dc-font-sans: sans-serif; /* sans serif */
8
+
--dc-font-mono: monospace; /* monospace */
9
+
10
+
/* light colors */
11
+
--dc-tx-1: #000000; /* primary text */
12
+
--dc-tx-2: #1a1a1a; /* secondary text */
13
+
--dc-bg-1: #fafafa; /* main background */
14
+
--dc-bg-2: #fff; /* secondary background */
15
+
--dc-bg-3: #ebebeb; /* outlines */
16
+
--dc-lk-1: #0068d6; /* link text */
17
+
--dc-lkb-1: #0072f5; /* link button background */
18
+
--dc-lkb-2: #0062d1; /* link button background (hover) */
19
+
--dc-lkb-tx: #ededed; /* link button text */
20
+
--dc-ac-1: #8e4ec6; /* accent color */
21
+
--dc-ac-tx: #ededed; /* accent color text */
22
+
23
+
/* dark colors */
24
+
--dc-d-tx-1: #ededed;
25
+
--dc-d-tx-2: #a1a1a1;
26
+
--dc-d-bg-1: #000;
27
+
--dc-d-bg-2: #0a0a0a;
28
+
--dc-d-bg-3: #2e2e2e;
29
+
--dc-d-lk-1: #52a8ff;
30
+
--dc-d-lkb-1: #0072f5;
31
+
--dc-d-lkb-2: #0062d1;
32
+
--dc-d-lkb-tx: #ededed;
33
+
--dc-d-ac-1: #8e4ec6;
34
+
--dc-d-ac-tx: #ededed;
35
+
}
36
+
37
+
@media (prefers-color-scheme: dark) {
38
+
:root {
39
+
--dc-tx-1: var(--dc-d-tx-1);
40
+
--dc-tx-2: var(--dc-d-tx-2);
41
+
--dc-bg-1: var(--dc-d-bg-1);
42
+
--dc-bg-2: var(--dc-d-bg-2);
43
+
--dc-bg-3: var(--dc-d-bg-3);
44
+
--dc-lk-1: var(--dc-d-lk-1);
45
+
--dc-lkb-1: var(--dc-d-lkb-1);
46
+
--dc-lkb-2: var(--dc-d-lkb-2);
47
+
--dc-lkb-tx: var(--dc-d-lkb-tx);
48
+
--dc-ac-1: var(--dc-d-ac-1);
49
+
--dc-ac-tx: var(--dc-d-ac-tx);
50
+
}
51
+
}
+16
-14
theme/boilerplate.css
+16
-14
theme/boilerplate.css
···
1
1
/* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
2
2
/* about: a template that you can modify */
3
+
/* note: you can remove lines that you want to keep as the dev.css default, such as the font lines */
3
4
4
5
:root {
5
-
/* fonts */
6
-
--dc-font-sans: sans-serif; /* Sans Serif */
7
-
--dc-font-mono: monospace; /* Monospace */
6
+
/* font families */
7
+
--dc-font-sans: sans-serif; /* sans serif */
8
+
--dc-font-mono: monospace; /* monospace */
9
+
8
10
/* colors */
9
-
--dc-tx-1: #000000; /* Primary text */
10
-
--dc-tx-2: #1a1a1a; /* Secondary text */
11
-
--dc-bg-1: #fafafa; /* Main background */
12
-
--dc-bg-2: #fff; /* Secondary background */
13
-
--dc-bg-3: #ebebeb; /* Outlines */
14
-
--dc-lk-1: #0068d6; /* Link text */
15
-
--dc-lkb-1: #0072f5; /* Link button background */
16
-
--dc-lkb-2: #0062d1; /* Link button background (hover) */
17
-
--dc-lkb-tx: #ededed; /* Link button text */
18
-
--dc-ac-1: #8e4ec6; /* Accent color */
19
-
--dc-ac-tx: #ededed; /* Accent color text */
11
+
--dc-tx-1: #000000; /* primary text */
12
+
--dc-tx-2: #1a1a1a; /* secondary text */
13
+
--dc-bg-1: #fafafa; /* main background */
14
+
--dc-bg-2: #fff; /* secondary background */
15
+
--dc-bg-3: #ebebeb; /* outlines */
16
+
--dc-lk-1: #0068d6; /* link text */
17
+
--dc-lkb-1: #0072f5; /* link button background */
18
+
--dc-lkb-2: #0062d1; /* link button background (hover) */
19
+
--dc-lkb-tx: #ededed; /* link button text */
20
+
--dc-ac-1: #8e4ec6; /* accent color */
21
+
--dc-ac-tx: #ededed; /* accent color text */
20
22
}
+2
-1
theme/terminal.css
+2
-1
theme/terminal.css
···
4
4
@import url("https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist-mono.min.css");
5
5
6
6
:root {
7
-
/* fonts */
7
+
/* font families */
8
8
--dc-font-sans: "Geist Mono", monospace;
9
9
--dc-font-mono: "Geist Mono", monospace;
10
+
10
11
/* colors */
11
12
--dc-tx-1: #ffffff;
12
13
--dc-tx-2: #eeeeee;