@intergrav/dev.css 1.0.2 → 1.0.4

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.
Files changed (7) hide show
  1. package/README.md +17 -4
  2. package/demo.html +1 -1
  3. package/dev.css +1 -1
  4. package/package.json +1 -1
  5. package/theme/boilerplate.css +19 -0
  6. package/theme/night.css +16 -0
  7. package/theme/terminal.css +21 -0
package/README.md CHANGED
@@ -1,16 +1,22 @@
1
1
  # intergrav/dev.css
2
2
 
3
- Extremely simple, small, classless CSS framework in the style of Vercel's Geist. It weighs only ***~5.0kb***, 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
+ ![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/@intergrav/dev.css) [![GitHub Repo stars](https://img.shields.io/github/stars/intergrav/dev.css)](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 do 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
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@1/dev.min.css">
16
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@1">
11
17
  ```
12
18
 
13
- I also recommend adding a font through [intergrav/fonts](https://github.com/intergrav/fonts). Geist or Inter work with dev.css out of the box.
19
+ I also recommend adding a font through [intergrav/fonts](https://github.com/intergrav/fonts). Geist or Inter work with dev.css out of the box. It will use the default system/browser san-serif fonts otherwise.
14
20
 
15
21
  ### Geist Font
16
22
 
@@ -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/demo.html CHANGED
@@ -6,7 +6,7 @@
6
6
  <title>dev.css Demo</title>
7
7
  <link
8
8
  rel="stylesheet"
9
- href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@1/dev.min.css"
9
+ href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@1"
10
10
  />
11
11
  <link
12
12
  rel="stylesheet"
package/dev.css CHANGED
@@ -20,7 +20,7 @@
20
20
  --dc-d-tx-2: #a1a1a1;
21
21
  --dc-d-bg-1: #000;
22
22
  --dc-d-bg-2: #ffffff0f;
23
- --dc-d-bg-3: #2e2e2e;
23
+ --dc-d-bg-3: #ffffff24;
24
24
  --dc-d-lk-1: #52a8ff;
25
25
  --dc-d-lkb-1: #0072f5;
26
26
  --dc-d-lkb-2: #0062d1;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@intergrav/dev.css",
3
- "version": "1.0.2",
3
+ "version": "1.0.4",
4
4
  "description": "Extremely simple, small, classless CSS framework in the style of Vercel's Geist design system. Fork of xz/new.css.",
5
5
  "main": "dev.css",
6
6
  "repository": {
package/theme/boilerplate.css ADDED
@@ -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
+ }
package/theme/terminal.css ADDED
@@ -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
+ }