tiny, simple, classless CSS framework inspired by new.css
devcss.devins.page
devins.page
framework
lightweight
css
classless
stylesheet
feat: a couple changes
- simplify font stack significantly
- clean boilerplate theme
- replace boilerplate with boilerplate-auto for simplicity (you can still make static color themes)
- remove mono font line in terminal theme
+1
-1
README.md
+1
-1
README.md
+4
-7
dev.css
+4
-7
dev.css
···
20
*/
21
22
/* 1. configurable variables */
23
-
/* adjustable by you! see ./theme/boilerplate-auto.css */
24
:root {
25
/* font families */
26
-
/* modified from https://systemfontstack.com */
27
-
--dc-font: "Geist", "Inter", -apple-system, BlinkMacSystemFont, avenir next,
28
-
avenir, segoe ui variable text, segoe ui, helvetica neue, helvetica,
29
-
Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
30
-
--dc-font-mono: "Geist Mono", Menlo, Consolas, Monaco, Liberation Mono,
31
-
Lucida Console, monospace;
32
33
/* light/dark colors */
34
--dc-cs: light dark; /* light and dark scrollbars, inputs, etc */
···
20
*/
21
22
/* 1. configurable variables */
23
+
/* adjustable by you! see ./theme/boilerplate.user.css */
24
:root {
25
/* font families */
26
+
--dc-font: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;
27
+
--dc-font-mono: "Geist Mono", ui-monospace, "Cascadia Code", "Source Code Pro",
28
+
Menlo, Consolas, "DejaVu Sans Mono", monospace;
29
30
/* light/dark colors */
31
--dc-cs: light dark; /* light and dark scrollbars, inputs, etc */
-34
theme/boilerplate-auto.user.css
-34
theme/boilerplate-auto.user.css
···
1
-
/* ==userstyle==
2
-
@name boilerplate-auto for dev.css
3
-
@description a template that you can modify, but with two color schemes for light/dark mode. copied from dev.css defaults. remove lines that you want to keep as the dev.css default, such as the font lines
4
-
@namespace author
5
-
@version 1.0.0
6
-
@author author <author@example.com> (https://example.com)
7
-
@homepageURL https://example.com
8
-
@supportURL https://example.com/issues
9
-
@license MIT
10
-
==/userstyle== */
11
-
12
-
:root {
13
-
/* font families */
14
-
/* modified from https://systemfontstack.com */
15
-
--dc-font: "Geist", "Inter", -apple-system, BlinkMacSystemFont, avenir next,
16
-
avenir, segoe ui variable text, segoe ui, helvetica neue, helvetica,
17
-
Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
18
-
--dc-font-mono: "Geist Mono", Menlo, Consolas, Monaco, Liberation Mono,
19
-
Lucida Console, monospace;
20
-
21
-
/* light/dark colors */
22
-
--dc-cs: light dark; /* light/dark scrollbars, inputs, etc */
23
-
--dc-tx-1: light-dark(#171717, #ededed); /* primary text */
24
-
--dc-tx-2: light-dark(#666, #a1a1a1); /* secondary text */
25
-
--dc-bg-1: light-dark(#fff, #0a0a0a); /* primary background */
26
-
--dc-bg-2: light-dark(#fafafa, #000); /* secondary background */
27
-
--dc-bg-3: light-dark(#ebebeb, #2e2e2e); /* border */
28
-
--dc-lk-1: light-dark(#005ff2, #47a8ff); /* link text */
29
-
--dc-lkb-1: light-dark(#006bff, #006efe); /* link button */
30
-
--dc-lkb-2: light-dark(#0059ec, #005be7); /* link button hover */
31
-
--dc-lkb-tx: light-dark(#fff, #fff); /* text over link button */
32
-
--dc-ac-1: light-dark(#a000f8, #9440d5); /* accent color */
33
-
--dc-ac-tx: light-dark(#fff, #fff); /* text over accent color */
34
-
}
···
+16
-20
theme/boilerplate.user.css
+16
-20
theme/boilerplate.user.css
···
1
/* ==userstyle==
2
@name boilerplate for dev.css
3
-
@description a template that you can modify. copied from dev.css defaults. remove lines that you want to keep as the dev.css default, such as the font lines
4
@namespace author
5
@version 1.0.0
6
@author author <author@example.com> (https://example.com)
···
11
12
:root {
13
/* font families */
14
-
/* modified from https://systemfontstack.com */
15
-
--dc-font: "Geist", "Inter", -apple-system, BlinkMacSystemFont, avenir next,
16
-
avenir, segoe ui variable text, segoe ui, helvetica neue, helvetica,
17
-
Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
18
-
--dc-font-mono: "Geist Mono", Menlo, Consolas, Monaco, Liberation Mono,
19
-
Lucida Console, monospace;
20
21
-
/* colors */
22
-
--dc-cs: light; /* light/dark scrollbars, inputs, etc */
23
-
--dc-tx-1: #171717; /* primary text */
24
-
--dc-tx-2: #666; /* secondary text */
25
-
--dc-bg-1: #fff; /* primary background */
26
-
--dc-bg-2: #fafafa; /* secondary background */
27
-
--dc-bg-3: #ebebeb; /* border */
28
-
--dc-lk-1: #005ff2; /* link text */
29
-
--dc-lkb-1: #006bff; /* link button */
30
-
--dc-lkb-2: #0059ec; /* link button hover */
31
-
--dc-lkb-tx: #fff; /* text over link button */
32
-
--dc-ac-1: #a000f8; /* accent color */
33
-
--dc-ac-tx: #fff; /* text over accent color */
34
}
···
1
/* ==userstyle==
2
@name boilerplate for dev.css
3
+
@description a template that you can modify. mostly copied from dev.css defaults. removing lines will revert to the dev.css default, for example the font lines
4
@namespace author
5
@version 1.0.0
6
@author author <author@example.com> (https://example.com)
···
11
12
:root {
13
/* font families */
14
+
--dc-font: sans-serif;
15
+
--dc-font-mono: monospace;
16
17
+
/* light/dark colors */
18
+
--dc-cs: light dark; /* light/dark scrollbars, inputs, etc */
19
+
--dc-tx-1: light-dark(#171717, #ededed); /* primary text */
20
+
--dc-tx-2: light-dark(#666, #a1a1a1); /* secondary text */
21
+
--dc-bg-1: light-dark(#fff, #0a0a0a); /* primary background */
22
+
--dc-bg-2: light-dark(#fafafa, #000); /* secondary background */
23
+
--dc-bg-3: light-dark(#ebebeb, #2e2e2e); /* border */
24
+
--dc-lk-1: light-dark(#005ff2, #47a8ff); /* link text */
25
+
--dc-lkb-1: light-dark(#006bff, #006efe); /* link button */
26
+
--dc-lkb-2: light-dark(#0059ec, #005be7); /* link button hover */
27
+
--dc-lkb-tx: light-dark(#fff, #fff); /* text over link button */
28
+
--dc-ac-1: light-dark(#a000f8, #9440d5); /* accent color */
29
+
--dc-ac-tx: light-dark(#fff, #fff); /* text over accent color */
30
}
-3
theme/terminal.user.css
-3
theme/terminal.user.css