tiny, simple, classless CSS framework inspired by new.css
devcss.devins.page
devins.page
framework
lightweight
css
classless
stylesheet
Compare changes
Choose any two refs to compare.
.github/static/header-traditional.png
.github/static/header-traditional.png
This is a binary file and will not be displayed.
.github/static/preview-desktop-dark.png
.github/static/preview-desktop-dark.png
This is a binary file and will not be displayed.
.github/static/preview-desktop-light.png
.github/static/preview-desktop-light.png
This is a binary file and will not be displayed.
.github/static/preview-mobile-dark.png
.github/static/preview-mobile-dark.png
This is a binary file and will not be displayed.
.github/static/preview-mobile-light.png
.github/static/preview-mobile-light.png
This is a binary file and will not be displayed.
+1
.gitignore
+1
.gitignore
···
1
+
node_modules
.tangled/static/header-traditional.png
.tangled/static/header-traditional.png
This is a binary file and will not be displayed.
.tangled/static/preview-desktop-dark.png
.tangled/static/preview-desktop-dark.png
This is a binary file and will not be displayed.
.tangled/static/preview-desktop-light.png
.tangled/static/preview-desktop-light.png
This is a binary file and will not be displayed.
.tangled/static/preview-mobile-dark.png
.tangled/static/preview-mobile-dark.png
This is a binary file and will not be displayed.
.tangled/static/preview-mobile-light.png
.tangled/static/preview-mobile-light.png
This is a binary file and will not be displayed.
+32
.tangled/workflows/wisp-deploy.yaml
+32
.tangled/workflows/wisp-deploy.yaml
···
1
+
when:
2
+
- event: ["push"]
3
+
branch: ["main"]
4
+
- event: ["manual"]
5
+
6
+
engine: "nixery"
7
+
8
+
clone:
9
+
skip: false
10
+
depth: 1
11
+
submodules: false
12
+
13
+
dependencies:
14
+
nixpkgs:
15
+
- coreutils
16
+
- curl
17
+
18
+
environment:
19
+
SITE_PATH: "."
20
+
SITE_NAME: "devcss.devins.page"
21
+
WISP_HANDLE: "devins.page"
22
+
23
+
steps:
24
+
- name: deploy to wisp
25
+
command: |
26
+
curl https://sites.wisp.place/nekomimi.pet/wisp-cli-binaries/wisp-cli-x86_64-linux -o wisp-cli
27
+
chmod +x wisp-cli
28
+
./wisp-cli deploy \
29
+
"$WISP_HANDLE" \
30
+
--path "$SITE_PATH" \
31
+
--site "$SITE_NAME" \
32
+
--password "$WISP_APP_PASSWORD"
+48
-23
README.md
+48
-23
README.md
···
1
-
# intergrav/dev.css
1
+
# dev.css
2
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)
3
+
[](https://www.npmjs.com/package/@intergrav/dev.css) [](https://cdn.jsdelivr.net/npm/@intergrav/dev.css/) [](https://discord.gg/m5tUgaM3uK) [](https://tangled.org/devins.page/dev.css)
4
4
5
5
dev.css is a tiny, simple, classless CSS framework inspired by [new.css](https://newcss.net). It is designed to make any plain HTML file modern and responsive. The minified stylesheet weighs only **~5.5kb**. It also has some extra features, such as an optional sidebar and addons.
6
6
···
8
8
9
9
<details>
10
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">
11
+
<img src=".tangled/static/preview-desktop-light.png" alt="dev.css desktop demo, light mode">
12
+
<img src=".tangled/static/preview-desktop-dark.png" alt="dev.css desktop demo, dark mode">
13
+
<img height="748px" src=".tangled/static/preview-mobile-light.png" alt="dev.css mobile demo, light mode">
14
+
<img height="748px" src=".tangled/static/preview-mobile-dark.png" alt="dev.css mobile demo, dark mode">
15
15
</details>
16
16
17
17
## Who is this for?
···
25
25
26
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
27
28
+
If you're using dev.css on your site, feel free to use this "powered by dev.css" badge if you want to promote the project:
29
+
30
+
```html
31
+
<a href="https://devcss.devins.page"
32
+
><img
33
+
src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/badge.svg"
34
+
alt="powered by dev.css"
35
+
/></a>
36
+
```
37
+
38
+
<a href="https://devcss.devins.page"><img src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/badge.svg" alt="powered by dev.css" /></a>
39
+
28
40
## Installing
29
41
30
42
### HTML import
···
50
62
51
63
### Importing fonts
52
64
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.
65
+
You can also load a font from [intergrav/fonts](https://tangled.org/devins.page/fonts) (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
66
55
67
## Elements and Structure
56
68
···
106
118
107
119
### Sidebar
108
120
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:
121
+
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 it's also recommended to put an `<article>` inside if you want a background. 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. You can also make a sidebar collapsible by wrapping it's contents in a `<details>` tag - adding the `open` attribute will make it open by default. Here's an example:
110
122
111
123
```html
112
124
<aside>
113
125
<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>
126
+
<details open>
127
+
<summary>Sidebar</summary>
128
+
<nav>
129
+
<ul>
130
+
<li><a href="https://example.com">Page 1</a></li>
131
+
<li>
132
+
<a href="https://example.com">Page 2</a>
133
+
<ul>
134
+
<li><a href="https://example.com">Page 2.1</a></li>
135
+
<li><a href="https://example.com">Page 2.2</a></li>
136
+
</ul>
137
+
</li>
138
+
<li><a href="https://example.com">Page 3</a></li>
139
+
<li><a href="https://example.com">Page 4</a></li>
140
+
</ul>
141
+
</nav>
142
+
</details>
129
143
</article>
130
144
</aside>
131
145
```
···
214
228
```html
215
229
<script
216
230
src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/addon/scroll-to-top.min.js"
231
+
defer
232
+
></script>
233
+
```
234
+
235
+
### `responsive-sidebar.js`
236
+
237
+
This addon automatically opens and closes `<details>` elements inside sidebars at the 82rem breakpoint. This prevents sidebars from looking awkward on wide screens and improves usability on small screens. To use this addon, add the following line after the `dev.css` import:
238
+
239
+
```html
240
+
<script
241
+
src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/addon/responsive-sidebar.min.js"
217
242
defer
218
243
></script>
219
244
```
+1
-1
addon/header-oneline.css
+1
-1
addon/header-oneline.css
···
1
-
/* header-oneline for dev.css v4, a lightweight CSS framework - https://github.com/intergrav/dev.css */
1
+
/* header-oneline for dev.css v4, a lightweight CSS framework - https://tangled.org/devins.page/dev.css */
2
2
/* about: makes the header much more compact by sorting horizontally, good with header-sticky addon */
3
3
/* note: will hide most elements in header other than img, h1-6, nav, and button */
4
4
+1
-1
addon/header-sticky.css
+1
-1
addon/header-sticky.css
···
1
-
/* header-sticky for dev.css v4, a lightweight CSS framework - https://github.com/intergrav/dev.css */
1
+
/* header-sticky for dev.css v4, a lightweight CSS framework - https://tangled.org/devins.page/dev.css */
2
2
/* about: makes the header sticky (when vh>24rem/vw>16rem). useful if the user needs to access nav often */
3
3
/* note: large sticky headers are bad for usability. too large? try header-oneline addon */
4
4
+1
-1
addon/scroll-to-top.js
+1
-1
addon/scroll-to-top.js
···
1
-
/* scroll-to-top for dev.css v4, a lightweight CSS framework - https://github.com/intergrav/dev.css */
1
+
/* scroll-to-top for dev.css v4, a lightweight CSS framework - https://tangled.org/devins.page/dev.css */
2
2
/* about: shows a "scroll to top" button in the bottom right corner of the screen when scrolling */
3
3
4
4
const scrollToTopButton = document.createElement("button");
+15
bun.lock
+15
bun.lock
···
1
+
{
2
+
"lockfileVersion": 1,
3
+
"configVersion": 1,
4
+
"workspaces": {
5
+
"": {
6
+
"name": "@intergrav/dev.css",
7
+
"devDependencies": {
8
+
"prettier": "latest",
9
+
},
10
+
},
11
+
},
12
+
"packages": {
13
+
"prettier": ["prettier@3.8.1", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg=="],
14
+
}
15
+
}
+7
-7
dev.css
+7
-7
dev.css
···
1
-
/* dev.css v4, a lightweight CSS framework - https://github.com/intergrav/dev.css */
1
+
/* dev.css v4, a lightweight CSS framework - https://tangled.org/devins.page/dev.css */
2
2
/* about: tiny, simple, classless CSS framework inspired by new.css */
3
3
4
4
/* table of contents
···
24
24
:root {
25
25
/* font families */
26
26
--dc-font: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;
27
-
--dc-font-mono: "Geist Mono", ui-monospace, "Cascadia Code", "Source Code Pro",
28
-
Menlo, Consolas, "DejaVu Sans Mono", monospace;
27
+
--dc-font-mono:
28
+
"Geist Mono", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
29
+
Consolas, "DejaVu Sans Mono", monospace;
29
30
30
31
/* light/dark colors */
31
32
--dc-cs: light dark; /* light and dark scrollbars, inputs, etc */
···
63
64
svg {
64
65
display: block;
65
66
max-width: 100%;
67
+
height: auto;
66
68
}
67
69
68
70
input,
···
430
432
}
431
433
432
434
/* 10. details */
433
-
details {
435
+
details:not(aside details) {
434
436
padding: 0.5rem 1rem;
435
437
background: var(--dc-bg-2);
436
438
border: 1px solid var(--dc-bg-3);
···
442
444
font-weight: bold;
443
445
}
444
446
445
-
details[open] summary {
447
+
details[open] > summary {
446
448
margin-bottom: 0.5rem;
447
449
}
448
450
449
451
details[open] > *:first-child {
450
452
margin-top: 0;
451
-
padding-top: 0;
452
453
}
453
454
454
455
details[open] > *:last-child {
455
456
margin-bottom: 0;
456
-
padding-bottom: 0;
457
457
}
458
458
459
459
/* 11. description lists */
+400
index.html
+400
index.html
···
1
+
<!doctype html>
2
+
<html lang="en">
3
+
<head>
4
+
<meta charset="UTF-8" />
5
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+
<title>Home - dev.css</title>
7
+
<meta name="title" content="dev.css" />
8
+
<meta
9
+
name="description"
10
+
content="dev.css is a lightweight, classless CSS framework"
11
+
/>
12
+
<meta
13
+
name="keywords"
14
+
content="css, web development, framework, lightweight, vercel, geist"
15
+
/>
16
+
<meta name="robots" content="index, follow" />
17
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
18
+
<meta name="language" content="English" />
19
+
<meta name="author" content="intergrav" />
20
+
<link rel="stylesheet" href="dev.css" />
21
+
<script src="addon/responsive-sidebar.js"></script>
22
+
</head>
23
+
24
+
<body>
25
+
<header>
26
+
<h1>dev.css</h1>
27
+
<p>A lightweight, classless CSS framework.</p>
28
+
<nav>
29
+
<ul>
30
+
<li><a href="https://tangled.org/devins.page/dev.css">git</a></li>
31
+
<li>
32
+
<a href="https://www.npmjs.com/package/@intergrav/dev.css">npm</a>
33
+
</li>
34
+
<li>
35
+
<a href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css/"
36
+
>jsDelivr</a
37
+
>
38
+
</li>
39
+
</ul>
40
+
</nav>
41
+
</header>
42
+
43
+
<aside>
44
+
<details>
45
+
<summary>Sidebar</summary>
46
+
<p>
47
+
Optional sidebar that you can use for pretty much anything. See the
48
+
README on GitHub for more information.
49
+
</p>
50
+
<ul>
51
+
<li><a href="https://example.org">Page 1</a></li>
52
+
<li><a href="https://example.org">Page 2</a></li>
53
+
<li><a href="https://example.org">Page 3</a></li>
54
+
<li>
55
+
<a href="https://example.org">Page 4</a>
56
+
<ul>
57
+
<li><a href="https://example.org">Page 4.1</a></li>
58
+
</ul>
59
+
</li>
60
+
<li>
61
+
<a href="https://example.org">Page 5</a>
62
+
<ul>
63
+
<li><a href="https://example.org">Page 5.1</a></li>
64
+
<li><a href="https://example.org">Page 5.2</a></li>
65
+
</ul>
66
+
</li>
67
+
<li><a href="https://example.org">Page 6</a></li>
68
+
</ul>
69
+
</details>
70
+
</aside>
71
+
72
+
<main>
73
+
<section>
74
+
<h1>Home</h1>
75
+
<p>
76
+
dev.css is a tiny, simple, classless CSS framework inspired by
77
+
Vercel's
78
+
<a href="https://vercel.com/geist">Geist</a> design system. It is
79
+
designed to make any plain HTML file look clean and modern. The
80
+
minified stylesheet weighs only <bold>~5.5kb</bold> and includes both
81
+
light and dark themes. Scroll down for a demo.
82
+
</p>
83
+
<p>
84
+
For installation instructions and much more information, see the
85
+
<a href="https://tangled.org/devins.page/dev.css">README.</a>
86
+
</p>
87
+
<h2>Who is this for?</h2>
88
+
<p>dev.css is a great choice for:</p>
89
+
<ul>
90
+
<li>A simple blog</li>
91
+
<li>A simple "about me" website</li>
92
+
<li>Collecting your most used links</li>
93
+
<li>Prototyping your raw HTML</li>
94
+
</ul>
95
+
<p>
96
+
dev.css was not meant for very complex websites. An example of a site
97
+
that uses dev.css is
98
+
<a href="https://skywardmc.org">SkywardMC's wiki</a>. This website was
99
+
also entirely made with dev.css, of course.
100
+
</p>
101
+
<p>
102
+
If you're using dev.css on your site, feel free to use this "powered
103
+
by dev.css" badge if you want to promote the project:
104
+
</p>
105
+
<pre><code><a href="https://devcss.devins.page"><img src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/badge.svg" alt="powered by dev.css"></a></code></pre>
106
+
<a href="https://devcss.devins.page"
107
+
><img
108
+
src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/badge.svg"
109
+
alt="powered by dev.css"
110
+
/></a>
111
+
</section>
112
+
113
+
<section>
114
+
<h1>Demo</h1>
115
+
<p>
116
+
Below is the demo for dev.css, a classless, lightweight, and
117
+
accessible CSS framework! Lorem ipsum odor amet, consectetuer
118
+
adipiscing elit. Hac suscipit magnis a, duis sollicitudin imperdiet.
119
+
</p>
120
+
<h2>Heading 2</h2>
121
+
<p>
122
+
Lorem ipsum odor amet, consectetuer adipiscing elit. Hac suscipit
123
+
magnis a, duis sollicitudin imperdiet. Aliquam inceptos quis semper
124
+
libero gravida purus dui posuere lacinia. Aliquet erat torquent auctor
125
+
leo habitasse feugiat iaculis pharetra. Dignissim ridiculus gravida
126
+
dictumst donec iaculis.
127
+
</p>
128
+
<h3>Heading 3</h3>
129
+
<p>
130
+
Sed tortor congue mauris molestie per facilisi vulputate. Quam aenean
131
+
mollis dui sollicitudin; per pretium mattis. Dis luctus vestibulum
132
+
proin id neque porta. Vehicula sapien aenean tellus inceptos lectus
133
+
facilisis viverra. Lacinia habitasse convallis diam elit lobortis
134
+
luctus.
135
+
</p>
136
+
<h4>Heading 4</h4>
137
+
<p>
138
+
Mattis per parturient convallis tempor nec posuere imperdiet. Natoque
139
+
dolor enim tempus bibendum ligula facilisis ipsum interdum. Netus
140
+
maximus laoreet adipiscing enim phasellus. Luctus nunc at egestas
141
+
torquent porttitor nostra aliquam tempus.
142
+
</p>
143
+
<h5>Heading 5</h5>
144
+
<p>
145
+
Erat interdum etiam condimentum, nullam odio ex maximus vel. Rhoncus
146
+
suspendisse vestibulum aptent amet torquent class suscipit ultrices
147
+
viverra.
148
+
</p>
149
+
<h6>Heading 6</h6>
150
+
<p>
151
+
Mattis primis lacus ac metus sollicitudin consequat bibendum luctus.
152
+
Ridiculus dignissim tortor viverra posuere cras curabitur.
153
+
</p>
154
+
155
+
<br />
156
+
<hr />
157
+
<br />
158
+
159
+
<blockquote>
160
+
This entire page was made with just dev.css and basic HTML. You can
161
+
view the source
162
+
<a href="https://tangled.org/devins.page/dev.css/blob/main/index.html"
163
+
>here</a
164
+
>.
165
+
</blockquote>
166
+
167
+
<br />
168
+
<hr />
169
+
<br />
170
+
171
+
<p>
172
+
Lorem <mark>ipsum</mark> dolor sit amet
173
+
<strong>consectetur</strong> adipisicing elit. Aut
174
+
<i>harum molestias</i> labore amet possimus
175
+
<s>exercitationem aperiam</s> earum, doloribus
176
+
<u>nobis ducimus</u> maiores quia voluptates quis omnis molestiae
177
+
quisquam. <a href="#">Voluptatibus, officiis laudantium?</a>
178
+
</p>
179
+
180
+
<p>
181
+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
182
+
<code>Hic culpa, nobis doloremque</code> veniam non, nihil cupiditate
183
+
odit repellat est <kbd>ALT + F4</kbd> expedita facilis. Fuga
184
+
aspernatur, alias debitis eveniet totam minima vel.
185
+
</p>
186
+
187
+
<ul>
188
+
<li>List item</li>
189
+
<li>List item</li>
190
+
<li>List item</li>
191
+
<li>List item</li>
192
+
</ul>
193
+
194
+
<ol>
195
+
<li>Step 1</li>
196
+
<li>Step 2</li>
197
+
<li>????</li>
198
+
<li>Profit!</li>
199
+
</ol>
200
+
201
+
<dl>
202
+
<dt>Web</dt>
203
+
<dd>The part of the Internet that contains websites and web pages</dd>
204
+
<dt>HTML</dt>
205
+
<dd>A markup language for creating web pages</dd>
206
+
<dt>CSS</dt>
207
+
<dd>A technology to make HTML look better</dd>
208
+
</dl>
209
+
210
+
<blockquote cite="https://en.wikiquote.org/wiki/Edward_Snowden">
211
+
If you think privacy is unimportant for you because you have nothing
212
+
to hide, you might as well say free speech is unimportant for you
213
+
because you have nothing useful to say.
214
+
<br />
215
+
<br />
216
+
– Edward Snowden
217
+
</blockquote>
218
+
219
+
<pre><code><!DOCTYPE html>
220
+
<html>
221
+
<head>
222
+
<title>Hello World</title>
223
+
</head>
224
+
<body>
225
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
226
+
</body>
227
+
</html></code></pre>
228
+
229
+
<br />
230
+
<hr />
231
+
<br />
232
+
233
+
<details>
234
+
<summary>Click me!</summary>
235
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
236
+
</details>
237
+
238
+
<br />
239
+
<hr />
240
+
<br />
241
+
242
+
<article>
243
+
<h1>Article element</h1>
244
+
<p>This is an article element by itself.</p>
245
+
</article>
246
+
247
+
<article>
248
+
<h1>Article element</h1>
249
+
<p>This is an article element with other nested elements.</p>
250
+
<article>
251
+
<h2>Article 1</h2>
252
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
253
+
</article>
254
+
<article>
255
+
<h2>Article 2</h2>
256
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
257
+
</article>
258
+
<details>
259
+
<summary>Click me!</summary>
260
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
261
+
</details>
262
+
</article>
263
+
264
+
<br />
265
+
<hr />
266
+
<br />
267
+
268
+
<table>
269
+
<caption>
270
+
Table caption
271
+
</caption>
272
+
<thead>
273
+
<tr>
274
+
<th>Meal</th>
275
+
<th>Time</th>
276
+
</tr>
277
+
</thead>
278
+
<tbody>
279
+
<tr>
280
+
<td>Breakfast</td>
281
+
<td>5-10 AM</td>
282
+
</tr>
283
+
<tr>
284
+
<td>Lunch</td>
285
+
<td>12-2 PM</td>
286
+
</tr>
287
+
<tr>
288
+
<td>Dinner</td>
289
+
<td>6-9 PM</td>
290
+
</tr>
291
+
</tbody>
292
+
</table>
293
+
294
+
<br />
295
+
<hr />
296
+
<br />
297
+
298
+
<form>
299
+
<p>
300
+
<em>
301
+
This is not a real form and does not submit or save any
302
+
information.
303
+
</em>
304
+
</p>
305
+
<p>
306
+
<label>First name</label><br />
307
+
<input type="text" name="first_name" />
308
+
</p>
309
+
<p>
310
+
<label>Last name</label><br />
311
+
<input type="text" name="last_name" />
312
+
</p>
313
+
<p>
314
+
<label>Number</label><br />
315
+
<label>
316
+
<input type="radio" name="radiooptions" value="1" />
317
+
1
318
+
</label>
319
+
<br />
320
+
<label>
321
+
<input type="radio" name="radiooptions" value="2" />
322
+
2
323
+
</label>
324
+
<br />
325
+
<label>
326
+
<input type="radio" name="radiooptions" value="3" />
327
+
3
328
+
</label>
329
+
</p>
330
+
<p>
331
+
<label>Email</label><br />
332
+
<input type="email" name="email" required="" />
333
+
</p>
334
+
<p>
335
+
<label>Phone number</label><br />
336
+
<input type="tel" name="phone" />
337
+
</p>
338
+
<p>
339
+
<label>Password</label><br />
340
+
<input type="password" name="password" />
341
+
</p>
342
+
<p>
343
+
<label>Country</label><br />
344
+
<select>
345
+
<option>United States</option>
346
+
<option>China</option>
347
+
<option>India</option>
348
+
<option>Indonesia</option>
349
+
<option>Brazil</option>
350
+
</select>
351
+
</p>
352
+
<p>
353
+
<label>Comments</label><br />
354
+
<textarea></textarea>
355
+
</p>
356
+
<p>
357
+
<label>
358
+
<input type="checkbox" value="terms" />
359
+
I agree to the <a>terms and conditions</a>
360
+
</label>
361
+
</p>
362
+
<p>
363
+
<button>Sign up</button>
364
+
<button type="reset">Reset form</button>
365
+
<button disabled="disabled">Disabled</button>
366
+
</p>
367
+
</form>
368
+
369
+
<br />
370
+
<hr />
371
+
<br />
372
+
373
+
<figure>
374
+
<img
375
+
alt="Apple and walnut orchards after a night of snowfall in Sangla in the Kinnaur district of the northern Indian state of Himachal Pradesh."
376
+
src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Orchards_in_snow%2C_Sangla%2C_Himachal_Pradesh%2C_India.jpg/1024px-Orchards_in_snow%2C_Sangla%2C_Himachal_Pradesh%2C_India.jpg?20250409065119"
377
+
/>
378
+
<figcaption>
379
+
Photo by
380
+
<a
381
+
href="https://commons.wikimedia.org/wiki/File:Orchards_in_snow,_Sangla,_Himachal_Pradesh,_India.jpg"
382
+
>UnpetitproleX</a
383
+
>,
384
+
<a href="https://creativecommons.org/licenses/by-sa/4.0"
385
+
>CC BY-SA 4.0</a
386
+
>, via Wikimedia Commons
387
+
</figcaption>
388
+
</figure>
389
+
</section>
390
+
</main>
391
+
392
+
<footer>
393
+
<p>
394
+
dev.css and this website was written by
395
+
<a href="https://devins.page">intergrav</a>. Inspired by
396
+
<a href="https://github.com/xz/new.css">new.css</a>.
397
+
</p>
398
+
</footer>
399
+
</body>
400
+
</html>
+9
-5
package.json
+9
-5
package.json
···
1
1
{
2
2
"name": "@intergrav/dev.css",
3
-
"version": "4.0.6",
3
+
"version": "4.4.0",
4
+
"author": "intergrav <devin@devins.page> (https://devins.page)",
4
5
"description": "Tiny, simple, classless CSS framework inspired by new.css.",
5
6
"keywords": [
6
7
"css",
···
15
16
],
16
17
"homepage": "https://devcss.devins.page",
17
18
"bugs": {
18
-
"url": "https://github.com/intergrav/dev.css/issues"
19
+
"url": "https://tangled.org/devins.page/dev.css/issues"
19
20
},
20
21
"license": "MIT",
21
-
"author": "intergrav <intergrav@proton.me> (https://devins.page)",
22
22
"files": [
23
23
"theme",
24
24
"addon",
25
-
"badge.svg"
25
+
"badge.svg",
26
+
"dev.css"
26
27
],
27
28
"main": "dev.css",
28
-
"repository": "github:intergrav/dev.css",
29
+
"repository": "https://tangled.org/devins.page/dev.css",
29
30
"prettier": {
30
31
"useTabs": true
32
+
},
33
+
"devDependencies": {
34
+
"prettier": "^3.8.1"
31
35
}
32
36
}
+5
-3
theme/boilerplate.user.css
+5
-3
theme/boilerplate.user.css
···
1
1
/* ==userstyle==
2
2
@name boilerplate for dev.css
3
-
@description a template that you can modify. mostly copied from dev.css defaults. removing lines will revert to the dev.css default, for example the font lines
3
+
@description a template that you can modify. copied from dev.css defaults. removing lines will revert to the dev.css default, for example the font lines
4
4
@namespace author
5
5
@version 1.0.0
6
6
@author author <author@example.com> (https://example.com)
···
11
11
12
12
:root {
13
13
/* font families */
14
-
--dc-font: sans-serif;
15
-
--dc-font-mono: monospace;
14
+
--dc-font: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;
15
+
--dc-font-mono:
16
+
"Geist Mono", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
17
+
Consolas, "DejaVu Sans Mono", monospace;
16
18
17
19
/* light/dark colors */
18
20
--dc-cs: light dark; /* light/dark scrollbars, inputs, etc */
+1
-1
theme/catppuccin-frappe.user.css
+1
-1
theme/catppuccin-frappe.user.css
···
5
5
@version 1.0.0
6
6
@author intergrav <intergrav@proton.me> (https://devins.page)
7
7
@homepageURL https://devcss.devins.page
8
-
@supportURL https://github.com/intergrav/dev.css/issues
8
+
@supportURL https://tangled.org/devins.page/dev.css/issues
9
9
@license MIT
10
10
==/userstyle== */
11
11
+1
-1
theme/catppuccin-macchiato.user.css
+1
-1
theme/catppuccin-macchiato.user.css
···
5
5
@version 1.0.0
6
6
@author intergrav <intergrav@proton.me> (https://devins.page)
7
7
@homepageURL https://devcss.devins.page
8
-
@supportURL https://github.com/intergrav/dev.css/issues
8
+
@supportURL https://tangled.org/devins.page/dev.css/issues
9
9
@license MIT
10
10
==/userstyle== */
11
11
+1
-1
theme/catppuccin-mocha.user.css
+1
-1
theme/catppuccin-mocha.user.css
···
5
5
@version 1.0.0
6
6
@author intergrav <intergrav@proton.me> (https://devins.page)
7
7
@homepageURL https://devcss.devins.page
8
-
@supportURL https://github.com/intergrav/dev.css/issues
8
+
@supportURL https://tangled.org/devins.page/dev.css/issues
9
9
@license MIT
10
10
==/userstyle== */
11
11
+1
-1
theme/day.user.css
+1
-1
theme/day.user.css
···
5
5
@version 1.0.0
6
6
@author intergrav <intergrav@proton.me> (https://devins.page)
7
7
@homepageURL https://devcss.devins.page
8
-
@supportURL https://github.com/intergrav/dev.css/issues
8
+
@supportURL https://tangled.org/devins.page/dev.css/issues
9
9
@license MIT
10
10
==/userstyle== */
11
11
+1
-1
theme/night.user.css
+1
-1
theme/night.user.css
···
5
5
@version 1.0.0
6
6
@author intergrav <intergrav@proton.me> (https://devins.page)
7
7
@homepageURL https://devcss.devins.page
8
-
@supportURL https://github.com/intergrav/dev.css/issues
8
+
@supportURL https://tangled.org/devins.page/dev.css/issues
9
9
@license MIT
10
10
==/userstyle== */
11
11
+1
-1
theme/terminal.user.css
+1
-1
theme/terminal.user.css
···
5
5
@version 1.0.0
6
6
@author intergrav <intergrav@proton.me> (https://devins.page)
7
7
@homepageURL https://devcss.devins.page
8
-
@supportURL https://github.com/intergrav/dev.css/issues
8
+
@supportURL https://tangled.org/devins.page/dev.css/issues
9
9
@license MIT
10
10
==/userstyle== */
11
11