tiny, simple, classless CSS framework inspired by new.css
devcss.devins.page
devins.page
framework
lightweight
css
classless
stylesheet
feat: a lot of improvements, and themes
+9
-1
README.md
+9
-1
README.md
···
1
1
# intergrav/dev.css
2
2
3
-
Extremely simple, small, classless CSS framework in the style of Vercel's Geist. It weighs only **~5kb** and makes any plain HTML file look great. It has a light and dark theme, and the header turns into a sidebar on wider displays so that you get more vertical space.
3
+
Extremely simple, small, classless CSS framework in the style of Vercel's Geist. Inspired by [xz/new.css](https://github.com/xz/new.css).
4
+
5
+
It weighs only **~5kb** and makes any plain HTML file look great.
6
+
7
+
It has a light and dark theme, and the header turns into a sidebar on wider displays so that you get more vertical space.
4
8
5
9
## Importing
6
10
···
26
30
```html
27
31
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/inter.min.css">
28
32
```
33
+
34
+
## Themes
35
+
36
+
You can also use custom colors and 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.
+1
-1
dev.css
+1
-1
dev.css
+19
theme/boilerplate.css
+19
theme/boilerplate.css
···
1
+
/* This theme is a template that you can modify */
2
+
3
+
:root {
4
+
/* Fonts */
5
+
--dc-font-sans: sans-serif; /* Sans Serif */
6
+
--dc-font-mono: monospace; /* Monospace */
7
+
/* Colors */
8
+
--dc-tx-1: #000000; /* Primary text */
9
+
--dc-tx-2: #1a1a1a; /* Secondary text */
10
+
--dc-bg-1: #fafafa; /* Main background */
11
+
--dc-bg-2: #fff; /* Secondary background */
12
+
--dc-bg-3: #ebebeb; /* Outlines */
13
+
--dc-lk-1: #0068d6; /* Link text */
14
+
--dc-lkb-1: #0072f5; /* Link button background */
15
+
--dc-lkb-2: #0062d1; /* Link button background (hover) */
16
+
--dc-lkb-tx: #ededed; /* Link button text */
17
+
--dc-ac-1: #8e4ec6; /* Accent color */
18
+
--dc-ac-tx: #ededed; /* Accent color text */
19
+
}
+16
theme/night.css
+16
theme/night.css
···
1
+
/* This theme will make it always dark, regardless of device setting */
2
+
3
+
:root {
4
+
/* Colors */
5
+
--dc-tx-1: #ededed;
6
+
--dc-tx-2: #a1a1a1;
7
+
--dc-bg-1: #000;
8
+
--dc-bg-2: #ffffff0f;
9
+
--dc-bg-3: #ffffff24;
10
+
--dc-lk-1: #52a8ff;
11
+
--dc-lkb-1: #0072f5;
12
+
--dc-lkb-2: #0062d1;
13
+
--dc-lkb-tx: #ededed;
14
+
--dc-ac-1: #8e4ec6;
15
+
--dc-ac-tx: #ededed;
16
+
}
+21
theme/terminal.css
+21
theme/terminal.css
···
1
+
/* This theme has a similar look to a computer terminal */
2
+
3
+
@import url("https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist-mono.min.css");
4
+
5
+
:root {
6
+
/* Fonts */
7
+
--dc-font-sans: "Geist Mono", monospace;
8
+
--dc-font-mono: "Geist Mono", monospace;
9
+
/* Colors */
10
+
--dc-tx-1: #ffffff;
11
+
--dc-tx-2: #eeeeee;
12
+
--dc-bg-1: #000000;
13
+
--dc-bg-2: #002700;
14
+
--dc-bg-3: #005800;
15
+
--dc-lk-1: #00ff00;
16
+
--dc-lkb-1: #00ff00;
17
+
--dc-lkb-2: #00d400;
18
+
--dc-lkb-tx: #000000;
19
+
--dc-ac-1: #00ff00;
20
+
--dc-ac-tx: #000000;
21
+
}