@intergrav/dev.css 4.0.3 → 4.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.
- package/LICENSE +21 -21
- package/README.md +242 -242
- package/addon/header-oneline.css +21 -21
- package/addon/header-sticky.css +18 -18
- package/addon/scroll-to-top.js +25 -25
- package/badge.svg +16 -0
- package/dev.css +527 -527
- package/package.json +3 -2
- package/theme/boilerplate.user.css +30 -30
- package/theme/catppuccin-frappe.user.css +26 -26
- package/theme/catppuccin-macchiato.user.css +26 -26
- package/theme/catppuccin-mocha.user.css +26 -26
- package/theme/day.user.css +26 -26
- package/theme/night.user.css +26 -26
- package/theme/terminal.user.css +29 -29
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2024 devin
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 devin
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,242 +1,242 @@
|
|
|
1
|
-
# intergrav/dev.css
|
|
2
|
-
|
|
3
|
-
[](https://www.npmjs.com/package/@intergrav/dev.css) [](https://cdn.jsdelivr.net/npm/@intergrav/dev.css/) [](https://discord.gg/m5tUgaM3uK) [](https://github.com/intergrav/dev.css)
|
|
4
|
-
|
|
5
|
-
dev.css is a 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 **~5.5kb** and includes both light and dark themes.
|
|
6
|
-
|
|
7
|
-
You can find the website at <a href="https://devcss.devins.page">devcss.devins.page</a>, which contains a demo page.
|
|
8
|
-
|
|
9
|
-
<details>
|
|
10
|
-
<summary>Click to view preview</summary>
|
|
11
|
-
<img src=".github/static/preview-desktop-light.png" alt="dev.css desktop demo, light mode">
|
|
12
|
-
<img src=".github/static/preview-desktop-dark.png" alt="dev.css desktop demo, dark mode">
|
|
13
|
-
<img height="748px" src=".github/static/preview-mobile-light.png" alt="dev.css mobile demo, light mode">
|
|
14
|
-
<img height="748px" src=".github/static/preview-mobile-dark.png" alt="dev.css mobile demo, dark mode">
|
|
15
|
-
</details>
|
|
16
|
-
|
|
17
|
-
## Who is this for?
|
|
18
|
-
|
|
19
|
-
dev.css is a great choice for:
|
|
20
|
-
|
|
21
|
-
- A simple blog
|
|
22
|
-
- A simple "about me" website
|
|
23
|
-
- Collecting your most used links
|
|
24
|
-
- Prototyping your raw HTML
|
|
25
|
-
|
|
26
|
-
dev.css was not meant for very complex websites. Although, if you need something more complex, you could build from/modify this stylesheet for your website. An example of a site that uses dev.css is [SkywardMC's wiki](https://skywardmc.org).
|
|
27
|
-
|
|
28
|
-
## Installing
|
|
29
|
-
|
|
30
|
-
### HTML import
|
|
31
|
-
|
|
32
|
-
To use dev.css in your HTML, simply add the following line to the `<head>` section of your HTML file:
|
|
33
|
-
|
|
34
|
-
```html
|
|
35
|
-
<link
|
|
36
|
-
rel="stylesheet"
|
|
37
|
-
href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4"
|
|
38
|
-
/>
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
### `npm`, `pnpm`, etc
|
|
42
|
-
|
|
43
|
-
Another way to install dev.css is to add the npm package to your project through your preferred package manager. This command adds the latest version to your project.
|
|
44
|
-
|
|
45
|
-
```sh
|
|
46
|
-
npm add @intergrav/dev.css
|
|
47
|
-
# or
|
|
48
|
-
pnpm add @intergrav/dev.css
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
### Importing fonts
|
|
52
|
-
|
|
53
|
-
You can also load a font from [intergrav/fonts](https://github.com/intergrav/fonts#readme) (or anywhere else) if you'd like a consistent font. 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.
|
|
54
|
-
|
|
55
|
-
## Elements and Structure
|
|
56
|
-
|
|
57
|
-
dev.css takes advantage of semantic HTML elements. Here are some guidelines on how to use them for the best results.
|
|
58
|
-
|
|
59
|
-
### Header
|
|
60
|
-
|
|
61
|
-
It's recommended that you add a header to your page. To add one, place a `<header>` tag at the top of your `<body>`. You can use an `<h1>` tag as your website's title. You can also add a `<p>` element as an optional short description of the site.
|
|
62
|
-
|
|
63
|
-
If you want to add a traditional navigation element, you should lay out your `<nav>` element like this:
|
|
64
|
-
|
|
65
|
-
```html
|
|
66
|
-
<header>
|
|
67
|
-
<h1>Website Title</h1>
|
|
68
|
-
<p>An optional description of the website.</p>
|
|
69
|
-
<nav>
|
|
70
|
-
<ul>
|
|
71
|
-
<li><a href="https://example.com">Demo</a></li>
|
|
72
|
-
<li><a href="https://example.com">GitHub</a></li>
|
|
73
|
-
<li><a href="https://example.com">npm</a></li>
|
|
74
|
-
<li><a href="https://example.com">jsDelivr</a></li>
|
|
75
|
-
</ul>
|
|
76
|
-
</nav>
|
|
77
|
-
</header>
|
|
78
|
-
```
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
If you'd like, you could instead use [breadcrumb navigation](https://en.wikipedia.org/wiki/Breadcrumb_navigation). If you're using the header-oneline addon while doing this, it's recommended to remove all other elements in the header and move `<h1>` to `<main>`.
|
|
83
|
-
|
|
84
|
-
```html
|
|
85
|
-
<header>
|
|
86
|
-
<nav>
|
|
87
|
-
<a href="../..">dev.css</a> / <a href="..">Blog</a> / Making a Website
|
|
88
|
-
</nav>
|
|
89
|
-
<h1>Making a Website</h1>
|
|
90
|
-
<p>Making a basic website with dev.css.</p>
|
|
91
|
-
</header>
|
|
92
|
-
```
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
### Main
|
|
97
|
-
|
|
98
|
-
For your main content, or the actual content of the page, it is heavily recommended that you wrap all of it in a `<main>` tag. Otherwise, certain features from dev.css may not work properly. It may also benefit search engine optimization. Here's an example:
|
|
99
|
-
|
|
100
|
-
```html
|
|
101
|
-
<main>
|
|
102
|
-
<h1>Page 1</h1>
|
|
103
|
-
<p>Welcome to my website's first page! This is an example.</p>
|
|
104
|
-
</main>
|
|
105
|
-
```
|
|
106
|
-
|
|
107
|
-
### Sidebar
|
|
108
|
-
|
|
109
|
-
Optionally, you can add a sidebar to your page for pretty much anything you'd like. A good usage for this could be, for example, complex navigation on a docs website, where you wouldn't be able to fit it all into the header. The sidebar will sort normally with the rest of the content on smaller screens. To make a sidebar, place an `<aside>` tag, and then put an `<article>` inside. You must put it above the `<main>` content. You can have up to two sidebars per page - the second one will appear on the right side. Here's an example:
|
|
110
|
-
|
|
111
|
-
```html
|
|
112
|
-
<aside>
|
|
113
|
-
<article>
|
|
114
|
-
<h1>Sidebar</h1>
|
|
115
|
-
<nav>
|
|
116
|
-
<ul>
|
|
117
|
-
<li><a href="https://example.com">Page 1</a></li>
|
|
118
|
-
<li>
|
|
119
|
-
<a href="https://example.com">Page 2</a>
|
|
120
|
-
<ul>
|
|
121
|
-
<li><a href="https://example.com">Page 2.1</a></li>
|
|
122
|
-
<li><a href="https://example.com">Page 2.2</a></li>
|
|
123
|
-
</ul>
|
|
124
|
-
</li>
|
|
125
|
-
<li><a href="https://example.com">Page 3</a></li>
|
|
126
|
-
<li><a href="https://example.com">Page 4</a></li>
|
|
127
|
-
</ul>
|
|
128
|
-
</nav>
|
|
129
|
-
</article>
|
|
130
|
-
</aside>
|
|
131
|
-
```
|
|
132
|
-
|
|
133
|
-
### Footer
|
|
134
|
-
|
|
135
|
-
Optionally, you can add a footer to your page. This could include copyright information, what the website was built with, it's source link, anything really. To make a footer, place a `<footer>` tag at the bottom of your `<body>`. It also formats the nav element in the same way that the header does.
|
|
136
|
-
|
|
137
|
-
### Final Structure
|
|
138
|
-
|
|
139
|
-
In the end, this is what your page structure should look like if you decide to add everything:
|
|
140
|
-
|
|
141
|
-
```html
|
|
142
|
-
<html>
|
|
143
|
-
<head>
|
|
144
|
-
...
|
|
145
|
-
</head>
|
|
146
|
-
<body>
|
|
147
|
-
<header>...</header>
|
|
148
|
-
<aside>...</aside>
|
|
149
|
-
<main>...</main>
|
|
150
|
-
<footer>...</footer>
|
|
151
|
-
</body>
|
|
152
|
-
</html>
|
|
153
|
-
```
|
|
154
|
-
|
|
155
|
-
### Text
|
|
156
|
-
|
|
157
|
-
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 wrap that with `<pre>` for code blocks. Use `<kbd>` for keyboard input.
|
|
158
|
-
|
|
159
|
-
### Button
|
|
160
|
-
|
|
161
|
-
To create a link button, wrap the button in an `<a>` tag. Here's an example:
|
|
162
|
-
|
|
163
|
-
```html
|
|
164
|
-
<a href="https://example.com">
|
|
165
|
-
<button>Click me!</button>
|
|
166
|
-
</a>
|
|
167
|
-
```
|
|
168
|
-
|
|
169
|
-
### Details
|
|
170
|
-
|
|
171
|
-
The `<details>` element can be used to create a toggle-able dropdown without using any JavaScript. Here's an example:
|
|
172
|
-
|
|
173
|
-
```html
|
|
174
|
-
<details>
|
|
175
|
-
<summary>Click me!</summary>
|
|
176
|
-
<p>Lorem ipsum dolor sit amet.</p>
|
|
177
|
-
</details>
|
|
178
|
-
```
|
|
179
|
-
|
|
180
|
-
### More
|
|
181
|
-
|
|
182
|
-
To learn about other HTML elements and how to write HTML, visit [W3Schools/html](https://www.w3schools.com/html/).
|
|
183
|
-
|
|
184
|
-
## Addons
|
|
185
|
-
|
|
186
|
-
dev.css provides a basic set of styles. Addons are small CSS or JS snippets that can be used to adjust or add functionality to dev.css based on your needs. Here are the built-in addons.
|
|
187
|
-
|
|
188
|
-
### `header-oneline.css`
|
|
189
|
-
|
|
190
|
-
This addon makes the header much more compact on narrow viewports. To use, add the following line after the `dev.css` import:
|
|
191
|
-
|
|
192
|
-
```html
|
|
193
|
-
<link
|
|
194
|
-
rel="stylesheet"
|
|
195
|
-
href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/addon/header-oneline.min.css"
|
|
196
|
-
/>
|
|
197
|
-
```
|
|
198
|
-
|
|
199
|
-
### `header-sticky.css`
|
|
200
|
-
|
|
201
|
-
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. If using with `header-oneline.css`, place this after. To use, add the following line after the `dev.css` import:
|
|
202
|
-
|
|
203
|
-
```html
|
|
204
|
-
<link
|
|
205
|
-
rel="stylesheet"
|
|
206
|
-
href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/addon/header-sticky.min.css"
|
|
207
|
-
/>
|
|
208
|
-
```
|
|
209
|
-
|
|
210
|
-
### `scroll-to-top.js`
|
|
211
|
-
|
|
212
|
-
This addon creates a small "scroll to top" button in the bottom right corner of your website when the user scrolls down. The button uses the default dev.css button style. The button is slightly opaque so that you can see it but it doesn't block the view. To use this addon, add the following line after the `dev.css` import:
|
|
213
|
-
|
|
214
|
-
```html
|
|
215
|
-
<script
|
|
216
|
-
src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/addon/scroll-to-top.min.js"
|
|
217
|
-
defer
|
|
218
|
-
></script>
|
|
219
|
-
```
|
|
220
|
-
|
|
221
|
-
## Themes
|
|
222
|
-
|
|
223
|
-
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 night and day themes, a set of Catppuccin themes, and a terminal theme. For example, to apply the terminal theme, add the following line after the `dev.css` import:
|
|
224
|
-
|
|
225
|
-
```html
|
|
226
|
-
<link
|
|
227
|
-
rel="stylesheet"
|
|
228
|
-
href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/theme/terminal.user.min.css"
|
|
229
|
-
/>
|
|
230
|
-
```
|
|
231
|
-
|
|
232
|
-
If you are creating your own theme, see the `boilerplate.user.css` file.
|
|
233
|
-
|
|
234
|
-
### Userstyles
|
|
235
|
-
|
|
236
|
-
The built-in themes can also be installed to your userstyle manager, such as Stylus. That theme will override any website using dev.css. To install one, open the theme's file in your browser.
|
|
237
|
-
|
|
238
|
-
## Credits
|
|
239
|
-
|
|
240
|
-
- [xz/new.css](https://github.com/xz/new.css) being a major inspiration for this project
|
|
241
|
-
- Vercel's [Geist](https://vercel.com/geist/introduction) design system
|
|
242
|
-
- [Catppuccin](https://github.com/catppuccin) for the colors used in the Catppuccin themes
|
|
1
|
+
# intergrav/dev.css
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@intergrav/dev.css) [](https://cdn.jsdelivr.net/npm/@intergrav/dev.css/) [](https://discord.gg/m5tUgaM3uK) [](https://github.com/intergrav/dev.css)
|
|
4
|
+
|
|
5
|
+
dev.css is a 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 **~5.5kb** and includes both light and dark themes.
|
|
6
|
+
|
|
7
|
+
You can find the website at <a href="https://devcss.devins.page">devcss.devins.page</a>, which contains a demo page.
|
|
8
|
+
|
|
9
|
+
<details>
|
|
10
|
+
<summary>Click to view preview</summary>
|
|
11
|
+
<img src=".github/static/preview-desktop-light.png" alt="dev.css desktop demo, light mode">
|
|
12
|
+
<img src=".github/static/preview-desktop-dark.png" alt="dev.css desktop demo, dark mode">
|
|
13
|
+
<img height="748px" src=".github/static/preview-mobile-light.png" alt="dev.css mobile demo, light mode">
|
|
14
|
+
<img height="748px" src=".github/static/preview-mobile-dark.png" alt="dev.css mobile demo, dark mode">
|
|
15
|
+
</details>
|
|
16
|
+
|
|
17
|
+
## Who is this for?
|
|
18
|
+
|
|
19
|
+
dev.css is a great choice for:
|
|
20
|
+
|
|
21
|
+
- A simple blog
|
|
22
|
+
- A simple "about me" website
|
|
23
|
+
- Collecting your most used links
|
|
24
|
+
- Prototyping your raw HTML
|
|
25
|
+
|
|
26
|
+
dev.css was not meant for very complex websites. Although, if you need something more complex, you could build from/modify this stylesheet for your website. An example of a site that uses dev.css is [SkywardMC's wiki](https://skywardmc.org).
|
|
27
|
+
|
|
28
|
+
## Installing
|
|
29
|
+
|
|
30
|
+
### HTML import
|
|
31
|
+
|
|
32
|
+
To use dev.css in your HTML, simply add the following line to the `<head>` section of your HTML file:
|
|
33
|
+
|
|
34
|
+
```html
|
|
35
|
+
<link
|
|
36
|
+
rel="stylesheet"
|
|
37
|
+
href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4"
|
|
38
|
+
/>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### `npm`, `pnpm`, etc
|
|
42
|
+
|
|
43
|
+
Another way to install dev.css is to add the npm package to your project through your preferred package manager. This command adds the latest version to your project.
|
|
44
|
+
|
|
45
|
+
```sh
|
|
46
|
+
npm add @intergrav/dev.css
|
|
47
|
+
# or
|
|
48
|
+
pnpm add @intergrav/dev.css
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### Importing fonts
|
|
52
|
+
|
|
53
|
+
You can also load a font from [intergrav/fonts](https://github.com/intergrav/fonts#readme) (or anywhere else) if you'd like a consistent font. 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.
|
|
54
|
+
|
|
55
|
+
## Elements and Structure
|
|
56
|
+
|
|
57
|
+
dev.css takes advantage of semantic HTML elements. Here are some guidelines on how to use them for the best results.
|
|
58
|
+
|
|
59
|
+
### Header
|
|
60
|
+
|
|
61
|
+
It's recommended that you add a header to your page. To add one, place a `<header>` tag at the top of your `<body>`. You can use an `<h1>` tag as your website's title. You can also add a `<p>` element as an optional short description of the site.
|
|
62
|
+
|
|
63
|
+
If you want to add a traditional navigation element, you should lay out your `<nav>` element like this:
|
|
64
|
+
|
|
65
|
+
```html
|
|
66
|
+
<header>
|
|
67
|
+
<h1>Website Title</h1>
|
|
68
|
+
<p>An optional description of the website.</p>
|
|
69
|
+
<nav>
|
|
70
|
+
<ul>
|
|
71
|
+
<li><a href="https://example.com">Demo</a></li>
|
|
72
|
+
<li><a href="https://example.com">GitHub</a></li>
|
|
73
|
+
<li><a href="https://example.com">npm</a></li>
|
|
74
|
+
<li><a href="https://example.com">jsDelivr</a></li>
|
|
75
|
+
</ul>
|
|
76
|
+
</nav>
|
|
77
|
+
</header>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
If you'd like, you could instead use [breadcrumb navigation](https://en.wikipedia.org/wiki/Breadcrumb_navigation). If you're using the header-oneline addon while doing this, it's recommended to remove all other elements in the header and move `<h1>` to `<main>`.
|
|
83
|
+
|
|
84
|
+
```html
|
|
85
|
+
<header>
|
|
86
|
+
<nav>
|
|
87
|
+
<a href="../..">dev.css</a> / <a href="..">Blog</a> / Making a Website
|
|
88
|
+
</nav>
|
|
89
|
+
<h1>Making a Website</h1>
|
|
90
|
+
<p>Making a basic website with dev.css.</p>
|
|
91
|
+
</header>
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
### Main
|
|
97
|
+
|
|
98
|
+
For your main content, or the actual content of the page, it is heavily recommended that you wrap all of it in a `<main>` tag. Otherwise, certain features from dev.css may not work properly. It may also benefit search engine optimization. Here's an example:
|
|
99
|
+
|
|
100
|
+
```html
|
|
101
|
+
<main>
|
|
102
|
+
<h1>Page 1</h1>
|
|
103
|
+
<p>Welcome to my website's first page! This is an example.</p>
|
|
104
|
+
</main>
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
### Sidebar
|
|
108
|
+
|
|
109
|
+
Optionally, you can add a sidebar to your page for pretty much anything you'd like. A good usage for this could be, for example, complex navigation on a docs website, where you wouldn't be able to fit it all into the header. The sidebar will sort normally with the rest of the content on smaller screens. To make a sidebar, place an `<aside>` tag, and then put an `<article>` inside. You must put it above the `<main>` content. You can have up to two sidebars per page - the second one will appear on the right side. Here's an example:
|
|
110
|
+
|
|
111
|
+
```html
|
|
112
|
+
<aside>
|
|
113
|
+
<article>
|
|
114
|
+
<h1>Sidebar</h1>
|
|
115
|
+
<nav>
|
|
116
|
+
<ul>
|
|
117
|
+
<li><a href="https://example.com">Page 1</a></li>
|
|
118
|
+
<li>
|
|
119
|
+
<a href="https://example.com">Page 2</a>
|
|
120
|
+
<ul>
|
|
121
|
+
<li><a href="https://example.com">Page 2.1</a></li>
|
|
122
|
+
<li><a href="https://example.com">Page 2.2</a></li>
|
|
123
|
+
</ul>
|
|
124
|
+
</li>
|
|
125
|
+
<li><a href="https://example.com">Page 3</a></li>
|
|
126
|
+
<li><a href="https://example.com">Page 4</a></li>
|
|
127
|
+
</ul>
|
|
128
|
+
</nav>
|
|
129
|
+
</article>
|
|
130
|
+
</aside>
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
### Footer
|
|
134
|
+
|
|
135
|
+
Optionally, you can add a footer to your page. This could include copyright information, what the website was built with, it's source link, anything really. To make a footer, place a `<footer>` tag at the bottom of your `<body>`. It also formats the nav element in the same way that the header does.
|
|
136
|
+
|
|
137
|
+
### Final Structure
|
|
138
|
+
|
|
139
|
+
In the end, this is what your page structure should look like if you decide to add everything:
|
|
140
|
+
|
|
141
|
+
```html
|
|
142
|
+
<html>
|
|
143
|
+
<head>
|
|
144
|
+
...
|
|
145
|
+
</head>
|
|
146
|
+
<body>
|
|
147
|
+
<header>...</header>
|
|
148
|
+
<aside>...</aside>
|
|
149
|
+
<main>...</main>
|
|
150
|
+
<footer>...</footer>
|
|
151
|
+
</body>
|
|
152
|
+
</html>
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
### Text
|
|
156
|
+
|
|
157
|
+
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 wrap that with `<pre>` for code blocks. Use `<kbd>` for keyboard input.
|
|
158
|
+
|
|
159
|
+
### Button
|
|
160
|
+
|
|
161
|
+
To create a link button, wrap the button in an `<a>` tag. Here's an example:
|
|
162
|
+
|
|
163
|
+
```html
|
|
164
|
+
<a href="https://example.com">
|
|
165
|
+
<button>Click me!</button>
|
|
166
|
+
</a>
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
### Details
|
|
170
|
+
|
|
171
|
+
The `<details>` element can be used to create a toggle-able dropdown without using any JavaScript. Here's an example:
|
|
172
|
+
|
|
173
|
+
```html
|
|
174
|
+
<details>
|
|
175
|
+
<summary>Click me!</summary>
|
|
176
|
+
<p>Lorem ipsum dolor sit amet.</p>
|
|
177
|
+
</details>
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
### More
|
|
181
|
+
|
|
182
|
+
To learn about other HTML elements and how to write HTML, visit [W3Schools/html](https://www.w3schools.com/html/).
|
|
183
|
+
|
|
184
|
+
## Addons
|
|
185
|
+
|
|
186
|
+
dev.css provides a basic set of styles. Addons are small CSS or JS snippets that can be used to adjust or add functionality to dev.css based on your needs. Here are the built-in addons.
|
|
187
|
+
|
|
188
|
+
### `header-oneline.css`
|
|
189
|
+
|
|
190
|
+
This addon makes the header much more compact on narrow viewports. To use, add the following line after the `dev.css` import:
|
|
191
|
+
|
|
192
|
+
```html
|
|
193
|
+
<link
|
|
194
|
+
rel="stylesheet"
|
|
195
|
+
href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/addon/header-oneline.min.css"
|
|
196
|
+
/>
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
### `header-sticky.css`
|
|
200
|
+
|
|
201
|
+
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. If using with `header-oneline.css`, place this after. To use, add the following line after the `dev.css` import:
|
|
202
|
+
|
|
203
|
+
```html
|
|
204
|
+
<link
|
|
205
|
+
rel="stylesheet"
|
|
206
|
+
href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/addon/header-sticky.min.css"
|
|
207
|
+
/>
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
### `scroll-to-top.js`
|
|
211
|
+
|
|
212
|
+
This addon creates a small "scroll to top" button in the bottom right corner of your website when the user scrolls down. The button uses the default dev.css button style. The button is slightly opaque so that you can see it but it doesn't block the view. To use this addon, add the following line after the `dev.css` import:
|
|
213
|
+
|
|
214
|
+
```html
|
|
215
|
+
<script
|
|
216
|
+
src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/addon/scroll-to-top.min.js"
|
|
217
|
+
defer
|
|
218
|
+
></script>
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
## Themes
|
|
222
|
+
|
|
223
|
+
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 night and day themes, a set of Catppuccin themes, and a terminal theme. For example, to apply the terminal theme, add the following line after the `dev.css` import:
|
|
224
|
+
|
|
225
|
+
```html
|
|
226
|
+
<link
|
|
227
|
+
rel="stylesheet"
|
|
228
|
+
href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/theme/terminal.user.min.css"
|
|
229
|
+
/>
|
|
230
|
+
```
|
|
231
|
+
|
|
232
|
+
If you are creating your own theme, see the `boilerplate.user.css` file.
|
|
233
|
+
|
|
234
|
+
### Userstyles
|
|
235
|
+
|
|
236
|
+
The built-in themes can also be installed to your userstyle manager, such as Stylus. That theme will override any website using dev.css. To install one, open the theme's file in your browser.
|
|
237
|
+
|
|
238
|
+
## Credits
|
|
239
|
+
|
|
240
|
+
- [xz/new.css](https://github.com/xz/new.css) being a major inspiration for this project
|
|
241
|
+
- Vercel's [Geist](https://vercel.com/geist/introduction) design system
|
|
242
|
+
- [Catppuccin](https://github.com/catppuccin) for the colors used in the Catppuccin themes
|
package/addon/header-oneline.css
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
/* header-oneline for dev.css v4, a lightweight CSS framework - https://github.com/intergrav/dev.css */
|
|
2
|
-
/* about: makes the header much more compact by sorting horizontally, good with header-sticky addon */
|
|
3
|
-
/* note: will hide most elements in header other than img, h1-6, nav, and button */
|
|
4
|
-
|
|
5
|
-
header * {
|
|
6
|
-
font-size: 1rem;
|
|
7
|
-
line-height: 1;
|
|
8
|
-
margin: 0;
|
|
9
|
-
padding: 0;
|
|
10
|
-
margin-bottom: 0 !important;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
header {
|
|
14
|
-
display: flex;
|
|
15
|
-
gap: 1rem;
|
|
16
|
-
padding: 0.75rem calc(50vw - 50%);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
header > *:not(img, h1, h2, h3, h4, h5, h6, nav, button) {
|
|
20
|
-
display: none;
|
|
21
|
-
}
|
|
1
|
+
/* header-oneline for dev.css v4, a lightweight CSS framework - https://github.com/intergrav/dev.css */
|
|
2
|
+
/* about: makes the header much more compact by sorting horizontally, good with header-sticky addon */
|
|
3
|
+
/* note: will hide most elements in header other than img, h1-6, nav, and button */
|
|
4
|
+
|
|
5
|
+
header * {
|
|
6
|
+
font-size: 1rem;
|
|
7
|
+
line-height: 1;
|
|
8
|
+
margin: 0;
|
|
9
|
+
padding: 0;
|
|
10
|
+
margin-bottom: 0 !important;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
header {
|
|
14
|
+
display: flex;
|
|
15
|
+
gap: 1rem;
|
|
16
|
+
padding: 0.75rem calc(50vw - 50%);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
header > *:not(img, h1, h2, h3, h4, h5, h6, nav, button) {
|
|
20
|
+
display: none;
|
|
21
|
+
}
|
package/addon/header-sticky.css
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
/* header-sticky for dev.css v4, a lightweight CSS framework - https://github.com/intergrav/dev.css */
|
|
2
|
-
/* about: makes the header sticky (when vh>24rem/vw>16rem). useful if the user needs to access nav often */
|
|
3
|
-
/* note: large sticky headers are bad for usability. too large? try header-oneline addon */
|
|
4
|
-
|
|
5
|
-
@media only screen and (min-height: 24rem) and (min-width: 16rem) {
|
|
6
|
-
header {
|
|
7
|
-
position: sticky;
|
|
8
|
-
top: 0;
|
|
9
|
-
z-index: 1000;
|
|
10
|
-
background-color: var(--dc-bg-2);
|
|
11
|
-
}
|
|
12
|
-
@supports (backdrop-filter: blur(24px)) {
|
|
13
|
-
header {
|
|
14
|
-
backdrop-filter: blur(24px);
|
|
15
|
-
background: none;
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
}
|
|
1
|
+
/* header-sticky for dev.css v4, a lightweight CSS framework - https://github.com/intergrav/dev.css */
|
|
2
|
+
/* about: makes the header sticky (when vh>24rem/vw>16rem). useful if the user needs to access nav often */
|
|
3
|
+
/* note: large sticky headers are bad for usability. too large? try header-oneline addon */
|
|
4
|
+
|
|
5
|
+
@media only screen and (min-height: 24rem) and (min-width: 16rem) {
|
|
6
|
+
header {
|
|
7
|
+
position: sticky;
|
|
8
|
+
top: 0;
|
|
9
|
+
z-index: 1000;
|
|
10
|
+
background-color: var(--dc-bg-2);
|
|
11
|
+
}
|
|
12
|
+
@supports (backdrop-filter: blur(24px)) {
|
|
13
|
+
header {
|
|
14
|
+
backdrop-filter: blur(24px);
|
|
15
|
+
background: none;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}
|