@intergrav/dev.css 3.1.1 → 3.2.0

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 (14) hide show
  1. package/README.md +98 -122
  2. package/addon/header-sidebar.css +35 -35
  3. package/addon/header-sticky.css +9 -9
  4. package/demo.html +294 -294
  5. package/dev.css +499 -488
  6. package/package.json +32 -30
  7. package/theme/boilerplate-auto.css +54 -51
  8. package/theme/boilerplate.css +23 -22
  9. package/theme/catppuccin-frappe.css +50 -47
  10. package/theme/catppuccin-macchiato.css +50 -47
  11. package/theme/catppuccin-mocha.css +50 -47
  12. package/theme/day.css +18 -17
  13. package/theme/night.css +18 -17
  14. package/theme/terminal.css +24 -23
package/README.md CHANGED
@@ -1,122 +1,98 @@
1
- # intergrav/dev.css
2
-
3
- [![NPM Version](https://img.shields.io/npm/v/@intergrav/dev.css)](https://www.npmjs.com/package/@intergrav/dev.css) [![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/@intergrav/dev.css)](https://cdn.jsdelivr.net/npm/@intergrav/dev.css/) [![GitHub Repo stars](https://img.shields.io/github/stars/intergrav/dev.css)](https://github.com/intergrav/dev.css)
4
-
5
- Tiny, simple, classless CSS framework in the style of Vercel's [Geist](https://vercel.com/geist) design system. Inspired by [xz/new.css](https://github.com/xz/new.css).
6
-
7
- The minified stylesheet weighs only **~4.8kb** and can make any plain HTML file look clean and modern. It also has a light and dark theme.
8
-
9
- <details>
10
- <summary>Preview</summary>
11
-
12
- <img src="https://raw.githubusercontent.com/intergrav/branding/main/dev.css/preview/desktop-light.png" alt="dev.css desktop demo, light mode">
13
- <img src="https://raw.githubusercontent.com/intergrav/branding/main/dev.css/preview/desktop-dark.png" alt="dev.css desktop demo, dark mode">
14
- <img height="748px" src="https://raw.githubusercontent.com/intergrav/branding/main/dev.css/preview/mobile-light.png" alt="dev.css mobile demo, dark mode">
15
- <img height="748px" src="https://raw.githubusercontent.com/intergrav/branding/main/dev.css/preview/mobile-dark.png" alt="dev.css mobile demo, dark mode">
16
-
17
- </details>
18
-
19
- ## Importing
20
-
21
- In your HTML's `<head>` all you have to write is this, and you're done! (`.min` means to minify the file)
22
-
23
- ```html
24
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3">
25
- ```
26
-
27
- 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 if those are not available.
28
-
29
- ### Geist Font
30
-
31
- ```html
32
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist.min.css">
33
- ```
34
-
35
- Recommended monospace variant:
36
-
37
- ```html
38
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist-mono.min.css">
39
- ```
40
-
41
- ### Inter Font
42
-
43
- ```html
44
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/inter.min.css">
45
- ```
46
-
47
- ## Elements
48
-
49
- dev.css takes advantage of semantic HTML elements. Here are some guidelines on how these should be used for the best results.
50
-
51
- ### Header
52
-
53
- Use the `<header>` tag to create a large header for your page. Only use this at the very top of your `<body>`, or else it may look wonky.
54
-
55
- For the title, the header should contain an `<h1>` tag. You can also add an `<h4>` tag before the `<h1>` tag if you want to show extra information.
56
-
57
- If you need a navigation bar, you can add a `<nav>` with `<a>` links inside it. dev.css will automatically add dividing bullet points between or before the `<a>` tags, depending on whether the user is in topbar or sidebar mode. In sidebar mode, the navigation bar will lay out into separate lines.
58
-
59
- Optionally, you could add a `<p>` tag after the `<h1>` tag if you want to give a description of the page the user is currently on.
60
-
61
- ### Footer
62
-
63
- Optionally, use the `<footer>` tag to create a footer for your page. Only use this at the bottom of your `<body>`, or else it may look wonky. You can add whatever content in here that you'd like.
64
-
65
- ### Text
66
-
67
- Wrap all body text in `<p>` tags, unless it's the sole child of another element. If you want to write quotes, you can use the `<blockquote>` tag. To highlight text, wrap it in the `<mark>` tag. Want to show code? Use `<code>` for short inline code. Use `<pre>` for code blocks. Use `<kbd>` for keyboard input.
68
-
69
- ### Button
70
-
71
- For a link button, you can wrap the button in an `<a>` tag. Here's a code example:
72
-
73
- ```html
74
- <a href="https://example.com">
75
- <button>Click me!</button>
76
- </a>
77
- ```
78
-
79
- ### Details
80
-
81
- The `<details>` element can make a toggle-able dropdown without using any JavaScript. Here's a code example:
82
-
83
- ```html
84
- <details>
85
- <summary>Click me!</summary>
86
- <p>Lorem ipsum dolor sit amet.</p>
87
- </details>
88
- ```
89
-
90
- ### More
91
-
92
- To learn about other HTML elements and how to write HTML, visit [W3Schools/html](https://www.w3schools.com/html/).
93
-
94
- ## Addons
95
-
96
- dev.css at the minimum is very basic. Addons are small CSS snippets that adjust or add on to the functionality of dev.css, based on what you want for your users. Examples include turning the header into a sidebar, or making the header sticky. If you are adding an addon, it must be added **after** the main dev.css file. You might also need order them in a specific way to make it work. Here are a few built-in addons.
97
-
98
- ### `header-sticky.css`
99
-
100
- This makes the header sticky - always at the top of the screen. Keep in mind that I do not recommend using this if your header is large, as it could affect usability of your site since it'll always be onscreen and will take up a lot of space. Only use it if your header is small, e.g. only contains a one-line `<h1>` and `<nav>`.
101
-
102
- ```html
103
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-sticky.min.css">
104
- ```
105
-
106
- ### `header-sidebar.css`
107
-
108
- This turns the header into a sidebar on displays that are wide enough to support it. It will list the navigation out vertically in this mode. It will responsively turn back into the default state if the viewport is too thin to contain everything. If you are using this with `header-sticky.css`, be sure to add it **after** that rather than before. To import it, add this line after `dev.css`:
109
-
110
- ```html
111
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-sidebar.min.css">
112
- ```
113
-
114
- ## Themes
115
-
116
- You can use custom colors and custom fonts in dev.css through themes. See the `/theme` folder to view some premade ones. To use a theme, simply apply it after the dev.css stylesheet. I provide a terminal-like theme, night and day themes, and a set of Catppuccin themes. For example, to apply the terminal theme, place this after your main stylesheet:
117
-
118
- ```html
119
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/theme/terminal.min.css">
120
- ```
121
-
122
- If you're making a theme, I highly recommend using the `boilerplate-auto.css` template rather than the `boilerplate.css` template for accessibility reasons.
1
+ # intergrav/dev.css
2
+
3
+ [![NPM Version](https://img.shields.io/npm/v/@intergrav/dev.css)](https://www.npmjs.com/package/@intergrav/dev.css) [![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/@intergrav/dev.css)](https://cdn.jsdelivr.net/npm/@intergrav/dev.css/) [![GitHub Repo stars](https://img.shields.io/github/stars/intergrav/dev.css)](https://github.com/intergrav/dev.css)
4
+
5
+ Tiny, simple, classless CSS framework inspired by Vercel's [Geist](https://vercel.com/geist) design system. It is designed to make any plain HTML file look clean and modern. The minified stylesheet weighs only **~4.8kb** and includes both light and dark themes.
6
+
7
+ <details>
8
+ <summary>Click to view preview</summary>
9
+ <img src="https://raw.githubusercontent.com/intergrav/branding/main/dev.css/preview/desktop-light.png" alt="dev.css desktop demo, light mode">
10
+ <img src="https://raw.githubusercontent.com/intergrav/branding/main/dev.css/preview/desktop-dark.png" alt="dev.css desktop demo, dark mode">
11
+ <img height="748px" src="https://raw.githubusercontent.com/intergrav/branding/main/dev.css/preview/mobile-light.png" alt="dev.css mobile demo, dark mode">
12
+ <img height="748px" src="https://raw.githubusercontent.com/intergrav/branding/main/dev.css/preview/mobile-dark.png" alt="dev.css mobile demo, dark mode">
13
+ </details>
14
+
15
+ ## Importing
16
+
17
+ To use dev.css in your HTML, simply add the following line to the `<head>` section of your HTML file:
18
+
19
+ ```html
20
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3">
21
+ ```
22
+
23
+ You can also add a font from [intergrav/fonts](https://github.com/intergrav/fonts#readme) to improve the experience, however it will increase the website download size. Geist and Inter fonts work with dev.css out of the box, other fonts will require a theme to be used. If these fonts are not available, the default system/browser sans-serif and monospace fonts will be used, such as Microsoft's Segoe UI or Apple's San Francisco.
24
+
25
+ ## Elements
26
+
27
+ dev.css takes advantage of semantic HTML elements. Here are some guidelines on how to use them for the best results.
28
+
29
+ ### Header
30
+
31
+ Use the `<header>` tag to create a large header for your page. Place it at the very top of your `<body>`. For the title, use an `<h1>` tag. You can also add an optional `<h4>` tag before the `<h1>` tag to provide extra information. If you need a navigation bar, add a `<nav>` element with a `<ul>` that contains `<li>` items with `<a>` links. dev.css will automatically lay out the navigation items horizontally, with dividing bullet points between them. If you are using the `header-sidebar.css` addon, the navigation items will be laid out vertically when in sidebar mode. Optionally, you can add a `<p>` tag after the `<h1>` tag to provide a description of the current page.
32
+
33
+ ### Footer
34
+
35
+ Optionally, use the `<footer>` tag to create a footer for your page. Place it at the bottom of your `<body>`. You can add any content you like inside the footer.
36
+
37
+ ### Text
38
+
39
+ Wrap all body text in `<p>` tags, unless it's the sole child of another element. Use the `<blockquote>` tag for quotes. To highlight text, wrap it in the `<mark>` tag. For code, use `<code>` for short inline code snippets and `<pre>` for code blocks. Use `<kbd>` for keyboard input.
40
+
41
+ ### Button
42
+
43
+ To create a link button, wrap the button in an `<a>` tag. Here's an example:
44
+
45
+ ```html
46
+ <a href="https://example.com">
47
+ <button>Click me!</button>
48
+ </a>
49
+ ```
50
+
51
+ ### Details
52
+
53
+ The `<details>` element can be used to create a toggle-able dropdown without using any JavaScript. Here's an example:
54
+
55
+ ```html
56
+ <details>
57
+ <summary>Click me!</summary>
58
+ <p>Lorem ipsum dolor sit amet.</p>
59
+ </details>
60
+ ```
61
+
62
+ ### More
63
+
64
+ To learn about other HTML elements and how to write HTML, visit [W3Schools/html](https://www.w3schools.com/html/).
65
+
66
+ ## Addons
67
+
68
+ dev.css provides a basic set of styles. Addons are small CSS snippets that can be used to adjust or add functionality to dev.css based on your needs. If you are adding an addon, make sure to include it **after** the main dev.css file. Here are a few built-in addons.
69
+
70
+ ### `header-sticky.css`
71
+
72
+ This addon makes the header sticky, always staying at the top of the screen. Note that this addon is recommended for small headers, as it may affect the usability of your site if the header is large and takes up a lot of space. To use this addon, add the following line after the `dev.css` import:
73
+
74
+ ```html
75
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-sticky.min.css">
76
+ ```
77
+
78
+ ### `header-sidebar.css`
79
+
80
+ This addon turns the header into a sidebar on wide displays. The navigation items are listed vertically in this mode. The sidebar will responsively switch back to the default state if the viewport is too narrow to contain everything. If you are using this addon with `header-sticky.css`, make sure to include it **after** the `header-sticky.css` import. To use this addon, add the following line after the `dev.css` import:
81
+
82
+ ```html
83
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-sidebar.min.css">
84
+ ```
85
+
86
+ ## Themes
87
+
88
+ dev.css supports custom colors and fonts through themes. You can find some pre-made themes in the `/theme` folder. To use a theme, simply apply it after the dev.css stylesheet. There are themes inspired by terminals, night and day themes, and a set of Catppuccin themes. For example, to apply the terminal theme, add the following line after the `dev.css` import:
89
+
90
+ ```html
91
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/theme/terminal.min.css">
92
+ ```
93
+
94
+ If you are creating a custom theme, it is recommended to use the `boilerplate-auto.css` template for better accessibility.
95
+
96
+ ## Credits
97
+
98
+ - [xz/new.css](https://github.com/xz/new.css) is the main inspiration for this project
package/addon/header-sidebar.css CHANGED
@@ -1,35 +1,35 @@
1
- /* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
2
- /* about: turns the header into a sidebar if the viewport is wide enough */
3
- /* warn: if using with the header-sticky addon, be sure to include this after it */
4
-
5
- @media (min-width: calc((48rem + 4rem) + ((16rem)*2))) {
6
- header {
7
- all: unset;
8
- }
9
-
10
- header {
11
- padding: 3rem 2rem;
12
- padding-right: 0;
13
- position: fixed;
14
- top: 0;
15
- left: calc(50% - ((48rem + 4rem) / 2) - (16rem));
16
- width: 16rem;
17
- height: calc(100% - 6rem);
18
- overflow-y: auto;
19
- }
20
-
21
- header nav ul {
22
- padding-left: 1rem;
23
- border-top: 1px solid var(--dc-bg-3);
24
- padding-top: 1rem;
25
- margin-top: 1rem;
26
- }
27
-
28
- header nav ul li {
29
- display: list-item;
30
- }
31
-
32
- header nav ul li:not(:first-child)::before {
33
- content: unset;
34
- }
35
- }
1
+ /* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
2
+ /* about: turns the header into a sidebar if the viewport is wide enough */
3
+ /* warn: if using with the header-sticky addon, be sure to include this after it */
4
+
5
+ @media (min-width: calc((48rem + 4rem) + ((16rem)*2))) {
6
+ header {
7
+ all: unset;
8
+ }
9
+
10
+ header {
11
+ padding: 3rem 2rem;
12
+ padding-right: 0;
13
+ position: fixed;
14
+ top: 0;
15
+ left: calc(50% - ((48rem + 4rem) / 2) - (16rem));
16
+ width: 16rem;
17
+ height: calc(100% - 6rem);
18
+ overflow-y: auto;
19
+ }
20
+
21
+ header nav ul {
22
+ padding-left: 1rem;
23
+ border-top: 1px solid var(--dc-bg-3);
24
+ padding-top: 1rem;
25
+ margin-top: 1rem;
26
+ }
27
+
28
+ header nav ul li {
29
+ display: list-item;
30
+ }
31
+
32
+ header nav ul li:not(:first-child)::before {
33
+ content: unset;
34
+ }
35
+ }
package/addon/header-sticky.css CHANGED
@@ -1,9 +1,9 @@
1
- /* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
2
- /* about: makes the header sticky, always at the top of the screen */
3
- /* warn: if using with the header-sidebar addon, be sure to include this before it */
4
- /* warn: i do not recommend using this if your header is large. may affect usability */
5
-
6
- header {
7
- position: sticky;
8
- top: 0;
9
- }
1
+ /* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
2
+ /* about: makes the header sticky, always at the top of the screen */
3
+ /* warn: if using with the header-sidebar addon, be sure to include this before it */
4
+ /* warn: i do not recommend using this if your header is large. may affect usability */
5
+
6
+ header {
7
+ position: sticky;
8
+ top: 0;
9
+ }