@intergrav/dev.css 1.0.3 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -2
- package/dev.css +1 -1
- package/package.json +1 -1
- package/theme/boilerplate.css +19 -0
- package/theme/night.css +16 -0
- package/theme/terminal.css +21 -0
package/README.md
CHANGED
|
@@ -1,10 +1,16 @@
|
|
|
1
1
|
# intergrav/dev.css
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
 [](https://github.com/intergrav/dev.css)
|
|
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
|
+
It weighs only **~5kb** and makes any plain HTML file look great.
|
|
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.
|
|
4
10
|
|
|
5
11
|
## Importing
|
|
6
12
|
|
|
7
|
-
In your HTML's `<head>` all you have to write is this, and you're done!
|
|
13
|
+
In your HTML's `<head>` all you have to write is this, and you're done! (`.min` means to minify the file)
|
|
8
14
|
|
|
9
15
|
```html
|
|
10
16
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@1">
|
|
@@ -26,3 +32,10 @@ I also recommend adding a font through [intergrav/fonts](https://github.com/inte
|
|
|
26
32
|
```html
|
|
27
33
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/inter.min.css">
|
|
28
34
|
```
|
|
35
|
+
|
|
36
|
+
## Themes
|
|
37
|
+
|
|
38
|
+
You can also 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:
|
|
39
|
+
```html
|
|
40
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@1/theme/terminal.min.css">
|
|
41
|
+
```
|
package/dev.css
CHANGED
package/package.json
CHANGED
|
@@ -0,0 +1,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
|
+
}
|
package/theme/night.css
ADDED
|
@@ -0,0 +1,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
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
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
|
+
}
|