tiny, simple, classless CSS framework inspired by new.css
devcss.devins.page
devins.page
framework
lightweight
css
classless
stylesheet
chore: prettier
+1
-1
.github/workflows/pages.yml
+1
-1
.github/workflows/pages.yml
+5
-4
README.md
+5
-4
README.md
···
4
5
Extremely simple, small, classless CSS framework in the style of Vercel's Geist. Inspired by [xz/new.css](https://github.com/xz/new.css).
6
7
-
The minified stylesheet weighs only **~5kb** and can make any plain HTML file look clean and modern.
8
9
It has a light and dark theme, and the header turns into a sidebar on wider displays so that you get more vertical space.
10
···
57
58
```html
59
<a href="https://example.com">
60
-
<button>Click me!</button>
61
</a>
62
```
63
···
67
68
```html
69
<details>
70
-
<summary>Click me!</summary>
71
-
<p>Lorem ipsum dolor sit amet.</p>
72
</details>
73
```
74
···
79
## Themes
80
81
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:
82
```html
83
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@2/theme/terminal.min.css">
84
```
···
4
5
Extremely simple, small, classless CSS framework in the style of Vercel's Geist. Inspired by [xz/new.css](https://github.com/xz/new.css).
6
7
+
The minified stylesheet weighs only **~5kb** and can make any plain HTML file look clean and modern.
8
9
It has a light and dark theme, and the header turns into a sidebar on wider displays so that you get more vertical space.
10
···
57
58
```html
59
<a href="https://example.com">
60
+
<button>Click me!</button>
61
</a>
62
```
63
···
67
68
```html
69
<details>
70
+
<summary>Click me!</summary>
71
+
<p>Lorem ipsum dolor sit amet.</p>
72
</details>
73
```
74
···
79
## Themes
80
81
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:
82
+
83
```html
84
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@2/theme/terminal.min.css">
85
```
+15
-15
theme/boilerplate.css
+15
-15
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
}
···
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
}
+12
-12
theme/night.css
+12
-12
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
}
···
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
}
+15
-15
theme/terminal.css
+15
-15
theme/terminal.css
···
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
}
···
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
}