tiny, simple, classless CSS framework inspired by new.css
devcss.devins.page
devins.page
framework
lightweight
css
classless
stylesheet
feat: dev.css v4 redesign
still a work-in-progress, current changes include
- major redesign and cleanup
- themes now work as userstyles so you can add them to your manager to override any dev.css site's theme
- improved readme
to do:
- finish dev.css-docs and move demo to that site
- update dev.css preview images
.github/static/header-traditional.png
.github/static/header-traditional.png
This is a binary file and will not be displayed.
+130
-26
README.md
+130
-26
README.md
···
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
-
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>
···
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>`. You can use an `<h1>` tag for your website title, and another `<h1>` tag outside of the header for the page title.
32
33
-
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.
34
35
-
Optionally, you can add a `<p>` tag after the `<h1>` tag to provide a description of the current page.
36
37
### Footer
38
39
-
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.
40
41
### Text
42
···
71
72
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.
73
74
-
### `header-sticky.css`
75
-
76
-
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:
77
-
78
-
```html
79
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-sticky.min.css">
80
-
```
81
-
82
### `header-oneline.css`
83
84
-
This addon lays everything out in the header horizontally. This is ideal if you don't have much in your header and you want it to be more compact. It works great with `header-sticky.css`. I do not recommend adding `<p>` or more than one `<nav>` element in the header if you're using this. To use this addon, add the following line after the `dev.css` import:
85
86
```html
87
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-oneline.min.css">
88
```
89
90
-
### `header-sidebar.css`
91
92
-
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` or `header-oneline.css`, make sure to import it **after** those. To use this addon, add the following line after the `dev.css` import:
93
94
```html
95
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-sidebar.min.css">
96
```
97
98
### `scroll-to-top.js`
···
100
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:
101
102
```html
103
-
<script src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/scroll-to-top.min.js" defer></script>
104
```
105
106
## Themes
107
108
-
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:
109
110
```html
111
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/theme/terminal.min.css">
112
```
113
114
-
If you are creating a custom theme, it is recommended to use the `boilerplate-auto.css` template for better accessibility.
115
116
## Credits
117
118
-
- [xz/new.css](https://github.com/xz/new.css) is the main inspiration for this project
···
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.9kb** and includes both light and dark themes.
6
7
<details>
8
<summary>Click to view preview</summary>
···
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
+
## Who is this for?
16
+
17
+
dev.css is a great choice for:
18
+
19
+
- A simple blog
20
+
- A simple "about me" website
21
+
- Collecting your most used links
22
+
- Prototyping your raw HTML
23
+
24
+
dev.css was not meant for very complex websites.
25
+
26
+
An example of a site that uses dev.css is [SkywardMC's wiki](https://skywardmc.org).
27
+
28
## Importing
29
30
To use dev.css in your HTML, simply add the following line to the `<head>` section of your HTML file:
31
32
```html
33
+
<link
34
+
rel="stylesheet"
35
+
href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4"
36
+
/>
37
```
38
39
+
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.
40
41
+
## Elements and Structure
42
43
dev.css takes advantage of semantic HTML elements. Here are some guidelines on how to use them for the best results.
44
45
### Header
46
47
+
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.
48
49
+
If you want to add a traditional navigation element, you should lay out your `<nav>` element like this:
50
51
+
```html
52
+
<header>
53
+
<h1>Website Title</h1>
54
+
<p>An optional description of the website.</p>
55
+
<nav>
56
+
<ul>
57
+
<li><a href="https://example.com">Demo</a></li>
58
+
<li><a href="https://example.com">GitHub</a></li>
59
+
<li><a href="https://example.com">npm</a></li>
60
+
<li><a href="https://example.com">jsDelivr</a></li>
61
+
</ul>
62
+
</nav>
63
+
</header>
64
+
```
65
+
66
+
67
+
68
+
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>`.
69
+
70
+
```html
71
+
<header>
72
+
<nav>
73
+
<a href="../..">dev.css</a> / <a href="..">Blog</a> / Making a Website
74
+
</nav>
75
+
<h1>Making a Website</h1>
76
+
<p>Making a basic website with dev.css.</p>
77
+
</header>
78
+
```
79
+
80
+
81
+
82
+
### Main
83
+
84
+
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:
85
+
86
+
```html
87
+
<main>
88
+
<h1>Page 1</h1>
89
+
<p>Welcome to my website's first page! This is an example.</p>
90
+
</main>
91
+
```
92
+
93
+
### Sidebar
94
+
95
+
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 header, place an `<aside>` tag. You must put it above the `<main>` content. Here's an example:
96
+
97
+
```html
98
+
<aside>
99
+
<h1>Sidebar</h1>
100
+
<nav>
101
+
<ul>
102
+
<li><a href="https://example.com">Page 1</a></li>
103
+
<li>
104
+
<a href="https://example.com">Page 2</a>
105
+
<ul>
106
+
<li><a href="https://example.com">Page 2.1</a></li>
107
+
<li><a href="https://example.com">Page 2.2</a></li>
108
+
</ul>
109
+
</li>
110
+
<li><a href="https://example.com">Page 3</a></li>
111
+
<li><a href="https://example.com">Page 4</a></li>
112
+
</ul>
113
+
</nav>
114
+
</aside>
115
+
```
116
117
### Footer
118
119
+
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.
120
+
121
+
### Final Structure
122
+
123
+
In the end, this is what your page structure should look like if you decide to add everything:
124
+
125
+
```html
126
+
<html>
127
+
<head>
128
+
...
129
+
</head>
130
+
<body>
131
+
<header>...</header>
132
+
<aside>...</aside>
133
+
<main>...</main>
134
+
<footer>...</footer>
135
+
</body>
136
+
</html>
137
+
```
138
139
### Text
140
···
169
170
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.
171
172
### `header-oneline.css`
173
174
+
This addon makes the header much more compact on narrow viewports. To use, add the following line after the `dev.css` import:
175
176
```html
177
+
<link
178
+
rel="stylesheet"
179
+
href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/addon/header-oneline.min.css"
180
+
/>
181
```
182
183
+
### `header-sticky.css`
184
185
+
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:
186
187
```html
188
+
<link
189
+
rel="stylesheet"
190
+
href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/addon/header-sticky.min.css"
191
+
/>
192
```
193
194
### `scroll-to-top.js`
···
196
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:
197
198
```html
199
+
<script
200
+
src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/addon/scroll-to-top.min.js"
201
+
defer
202
+
></script>
203
```
204
205
## Themes
206
207
+
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:
208
209
```html
210
+
<link
211
+
rel="stylesheet"
212
+
href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/theme/terminal.user.min.css"
213
+
/>
214
```
215
216
+
If you are creating your own theme, it is recommended to use the `boilerplate-auto.css` rather than the `boilerplate.css` template for better accessibility.
217
218
## Credits
219
220
+
- [xz/new.css](https://github.com/xz/new.css) being a major inspiration for this project
221
+
- Vercel's [Geist](https://vercel.com/geist/introduction) design system
222
+
- [Catppuccin](https://github.com/catppuccin) for the colors used in the Catppuccin themes
+14
-42
addon/header-oneline.css
+14
-42
addon/header-oneline.css
···
1
-
/* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
2
-
/* about: everything in the header on one line, works well with addon/header-sticky.css */
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 you have p or multiple nav elements in header */
5
-
6
-
header {
7
-
align-items: center;
8
-
display: flex;
9
-
}
10
-
11
-
header h1,
12
-
header h2,
13
-
header h3,
14
-
header h4,
15
-
header h5,
16
-
header h6 {
17
-
white-space: nowrap;
18
-
}
19
20
header * {
21
margin: 0;
22
-
line-height: 1.5;
23
-
}
24
-
25
-
header h1,
26
-
header p {
27
-
margin-right: 1rem;
28
-
}
29
-
30
-
header h2,
31
-
header h3,
32
-
header h4,
33
-
header h5,
34
-
header h6 {
35
-
color: var(--dc-tx-2);
36
-
font-weight: normal;
37
}
38
39
-
header h2::after,
40
-
header h3::after,
41
-
header h4::after,
42
-
header h5::after,
43
-
header h6::after {
44
-
content: "/";
45
}
46
47
-
/* make sure that all header elements have same font size */
48
-
header * {
49
-
font-size: 1rem !important;
50
}
···
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
+
margin: 0 calc(50% - 50vw) 0;
18
}
19
20
+
header > *:not(img, h1, h2, h3, h4, h5, h6, nav, button) {
21
+
display: none;
22
}
+15
-7
addon/header-sticky.css
+15
-7
addon/header-sticky.css
···
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
+
/* 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
+
background-color: var(--dc-bg-2);
10
+
}
11
+
@supports (backdrop-filter: blur(24px)) {
12
+
header {
13
+
backdrop-filter: blur(24px);
14
+
background: none;
15
+
}
16
+
}
17
}
+2
-1
addon/scroll-to-top.js
+2
-1
addon/scroll-to-top.js
···
1
-
/* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
2
/* about: shows a "scroll to top" button in the bottom right corner of the screen when scrolling */
3
4
const scrollToTopButton = document.createElement("button");
···
12
right: "1rem",
13
width: "2.5rem",
14
height: "2.5rem",
15
});
16
document.body.appendChild(scrollToTopButton);
17
···
1
+
/* scroll-to-top for dev.css v4, a lightweight CSS framework - https://github.com/intergrav/dev.css */
2
/* about: shows a "scroll to top" button in the bottom right corner of the screen when scrolling */
3
4
const scrollToTopButton = document.createElement("button");
···
12
right: "1rem",
13
width: "2.5rem",
14
height: "2.5rem",
15
+
"border-radius": "1.25rem",
16
});
17
document.body.appendChild(scrollToTopButton);
18
+279
-221
demo.html
+279
-221
demo.html
···
5
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
<title>Demo - dev.css</title>
7
<link rel="stylesheet" href="dev.css" />
8
<link
9
rel="stylesheet"
10
href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist.min.css"
···
18
<body>
19
<header>
20
<h1>dev.css</h1>
21
-
<p>This is the demo page for dev.css.</p>
22
<nav>
23
<ul>
24
<li><a href="demo">Demo</a></li>
···
35
</nav>
36
</header>
37
38
-
<h1>Demo</h1>
39
-
<p>
40
-
This is the demo page for dev.css, a classless, lightweight, and accessible CSS framework!
41
-
</p>
42
-
<h2>Heading 2</h2>
43
-
<p>
44
-
This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
45
-
elit.
46
-
</p>
47
-
<h3>Heading 3</h3>
48
-
<p>
49
-
This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
50
-
elit.
51
-
</p>
52
-
<h4>Heading 4</h4>
53
-
<p>
54
-
This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
55
-
elit.
56
-
</p>
57
-
<h5>Heading 5</h5>
58
-
<p>
59
-
This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
60
-
elit.
61
-
</p>
62
-
<h6>Heading 6</h6>
63
-
<p>
64
-
This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
65
-
elit.
66
-
</p>
67
68
-
<br />
69
-
<hr />
70
-
<br />
71
72
-
<blockquote>
73
-
This entire page was made with dev.css. You can view the source
74
-
<a href="https://github.com/intergrav/dev.css/blob/main/demo.html">here</a
75
-
>.
76
-
</blockquote>
77
78
-
<br />
79
-
<hr />
80
-
<br />
81
82
-
<p>
83
-
Lorem <mark>ipsum</mark> dolor sit amet
84
-
<strong>consectetur</strong> adipisicing elit. Aut
85
-
<i>harum molestias</i> labore amet possimus
86
-
<s>exercitationem aperiam</s> earum, doloribus
87
-
<u>nobis ducimus</u> maiores quia voluptates quis omnis molestiae
88
-
quisquam. <a href="#">Voluptatibus, officiis laudantium?</a>
89
-
</p>
90
91
-
<p>
92
-
Lorem ipsum dolor sit amet consectetur adipisicing elit.
93
-
<code>Hic culpa, nobis doloremque</code> veniam non, nihil cupiditate odit
94
-
repellat est <kbd>ALT + F4</kbd> expedita facilis. Fuga aspernatur, alias
95
-
debitis eveniet totam minima vel.
96
-
</p>
97
98
-
<ul>
99
-
<li>List item</li>
100
-
<li>List item</li>
101
-
<li>List item</li>
102
-
<li>List item</li>
103
-
</ul>
104
105
-
<ol>
106
-
<li>Step 1</li>
107
-
<li>Step 2</li>
108
-
<li>????</li>
109
-
<li>Profit!</li>
110
-
</ol>
111
112
-
<dl>
113
-
<dt>Web</dt>
114
-
<dd>The part of the Internet that contains websites and web pages</dd>
115
-
<dt>HTML</dt>
116
-
<dd>A markup language for creating web pages</dd>
117
-
<dt>CSS</dt>
118
-
<dd>A technology to make HTML look better</dd>
119
-
</dl>
120
121
-
<blockquote cite="https://en.wikiquote.org/wiki/Edward_Snowden">
122
-
If you think privacy is unimportant for you because you have nothing to
123
-
hide, you might as well say free speech is unimportant for you because you
124
-
have nothing useful to say.
125
-
<br />
126
-
<br />
127
-
– Edward Snowden
128
-
</blockquote>
129
130
-
<pre><code><!DOCTYPE html>
131
<html>
132
<head>
133
<title>Hello World</title>
···
137
</body>
138
</html></code></pre>
139
140
-
<br />
141
-
<hr />
142
-
<br />
143
144
-
<details>
145
-
<summary>Click me!</summary>
146
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
147
-
</details>
148
149
-
<br />
150
-
<hr />
151
-
<br />
152
153
-
<table>
154
-
<caption>
155
-
Ho-kago Tea Time
156
-
</caption>
157
-
<thead>
158
-
<tr>
159
-
<th>Name</th>
160
-
<th>Instrument</th>
161
-
</tr>
162
-
</thead>
163
-
<tbody>
164
-
<tr>
165
-
<td>Yui Hirasawa</td>
166
-
<td>Lead Guitar</td>
167
-
</tr>
168
-
<tr>
169
-
<td>Mio Akiyama</td>
170
-
<td>Bass</td>
171
-
</tr>
172
-
<tr>
173
-
<td>Ritsu Tainaka</td>
174
-
<td>Drums</td>
175
-
</tr>
176
-
<tr>
177
-
<td>Tsumugi Kotobuki</td>
178
-
<td>Keyboard</td>
179
-
</tr>
180
-
<tr>
181
-
<td>Azusa Nakano</td>
182
-
<td>Rhythm Guitar</td>
183
-
</tr>
184
-
</tbody>
185
-
<tfoot>
186
-
<tr>
187
-
<th>Name</th>
188
-
<th>Instrument</th>
189
-
</tr>
190
-
</tfoot>
191
-
</table>
192
193
-
<br />
194
-
<hr />
195
-
<br />
196
197
-
<form>
198
-
<p>
199
-
<em>
200
-
This is not a real form and does not submit or save any information.
201
-
</em>
202
-
</p>
203
-
<p>
204
-
<label>First name</label><br />
205
-
<input type="text" name="first_name" />
206
-
</p>
207
-
<p>
208
-
<label>Last name</label><br />
209
-
<input type="text" name="last_name" />
210
-
</p>
211
-
<p>
212
-
<label>Gender</label><br />
213
-
<label>
214
-
<input type="radio" name="gender" value="Male" />
215
-
Male
216
-
</label>
217
-
<br />
218
-
<label>
219
-
<input type="radio" name="gender" value="Female" />
220
-
Female
221
-
</label>
222
-
<br />
223
-
<label>
224
-
<input type="radio" name="gender" value="other-none-na" />
225
-
Non-binary
226
-
</label>
227
-
</p>
228
-
<p>
229
-
<label>Email</label><br />
230
-
<input type="email" name="email" required="" />
231
-
</p>
232
-
<p>
233
-
<label>Phone number</label><br />
234
-
<input type="tel" name="phone" />
235
-
</p>
236
-
<p>
237
-
<label>Password</label><br />
238
-
<input type="password" name="password" />
239
-
</p>
240
-
<p>
241
-
<label>Country</label><br />
242
-
<select>
243
-
<option>China</option>
244
-
<option>India</option>
245
-
<option>United States</option>
246
-
<option>Indonesia</option>
247
-
<option>Brazil</option>
248
-
</select>
249
-
</p>
250
-
<p>
251
-
<label>Comments</label><br />
252
-
<textarea></textarea>
253
-
</p>
254
-
<p>
255
-
<label>
256
-
<input type="checkbox" value="terms" />
257
-
I agree to the <a>terms and conditions</a>
258
-
</label>
259
-
</p>
260
-
<p>
261
-
<button>Sign up</button>
262
-
<button type="reset">Reset form</button>
263
-
<button disabled="disabled">Disabled</button>
264
-
</p>
265
-
</form>
266
267
-
<br />
268
-
<hr />
269
-
<br />
270
271
-
<img
272
-
src="https://elements.xz.style/assets/fuji-daniel-hehn.jpg"
273
-
alt="Mt. Fuji"
274
-
/>
275
276
-
<p>
277
-
Inline image:
278
-
<a href="#"
279
-
><img
280
-
src="https://elements.xz.style/assets/fuji-daniel-hehn.jpg"
281
-
width="50"
282
-
alt="Mt. Fuji"
283
-
/></a>
284
-
</p>
285
286
<footer>
287
<p>This is an optional footer.</p>
···
5
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
<title>Demo - dev.css</title>
7
<link rel="stylesheet" href="dev.css" />
8
+
<link rel="stylesheet" href="theme/terminal.user.css" />
9
<link
10
rel="stylesheet"
11
href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist.min.css"
···
19
<body>
20
<header>
21
<h1>dev.css</h1>
22
+
<p>Optional short summary of the page.</p>
23
<nav>
24
<ul>
25
<li><a href="demo">Demo</a></li>
···
36
</nav>
37
</header>
38
39
+
<aside>
40
+
<h1>Sidebar</h1>
41
+
<p>
42
+
Optional sidebar that you can use for pretty much anything. See the
43
+
README for more information.
44
+
</p>
45
+
<ul>
46
+
<li><a href="">Page 1</a></li>
47
+
<li><a href="">Page 2</a></li>
48
+
<li><a href="">Page 3</a></li>
49
+
<li>
50
+
<a href="">Page 4</a>
51
+
<ul>
52
+
<li><a href="">Page 4.1</a></li>
53
+
</ul>
54
+
</li>
55
+
<li>
56
+
<a href="">Page 5</a>
57
+
<ul>
58
+
<li><a href="">Page 5.1</a></li>
59
+
<li><a href="">Page 5.2</a></li>
60
+
</ul>
61
+
</li>
62
+
<li><a href="">Page 6</a></li>
63
+
</ul>
64
+
</aside>
65
66
+
<main>
67
+
<h1>Demo</h1>
68
+
<p>
69
+
This is the demo page for dev.css, a classless, lightweight, and
70
+
accessible CSS framework! Lorem ipsum odor amet, consectetuer adipiscing
71
+
elit. Hac suscipit magnis a, duis sollicitudin imperdiet.
72
+
</p>
73
+
<h2>Heading 2</h2>
74
+
<p>
75
+
Lorem ipsum odor amet, consectetuer adipiscing elit. Hac suscipit magnis
76
+
a, duis sollicitudin imperdiet. Aliquam inceptos quis semper libero
77
+
gravida purus dui posuere lacinia. Aliquet erat torquent auctor leo
78
+
habitasse feugiat iaculis pharetra. Dignissim ridiculus gravida dictumst
79
+
donec iaculis.
80
+
</p>
81
+
<h3>Heading 3</h3>
82
+
<p>
83
+
Sed tortor congue mauris molestie per facilisi vulputate. Quam aenean
84
+
mollis dui sollicitudin; per pretium mattis. Dis luctus vestibulum proin
85
+
id neque porta. Vehicula sapien aenean tellus inceptos lectus facilisis
86
+
viverra. Lacinia habitasse convallis diam elit lobortis luctus.
87
+
</p>
88
+
<h4>Heading 4</h4>
89
+
<p>
90
+
Mattis per parturient convallis tempor nec posuere imperdiet. Natoque
91
+
dolor enim tempus bibendum ligula facilisis ipsum interdum. Netus
92
+
maximus laoreet adipiscing enim phasellus. Luctus nunc at egestas
93
+
torquent porttitor nostra aliquam tempus.
94
+
</p>
95
+
<h5>Heading 5</h5>
96
+
<p>
97
+
Erat interdum etiam condimentum, nullam odio ex maximus vel. Rhoncus
98
+
suspendisse vestibulum aptent amet torquent class suscipit ultrices
99
+
viverra.
100
+
</p>
101
+
<h6>Heading 6</h6>
102
+
<p>
103
+
Mattis primis lacus ac metus sollicitudin consequat bibendum luctus.
104
+
Ridiculus dignissim tortor viverra posuere cras curabitur.
105
+
</p>
106
107
+
<br />
108
+
<hr />
109
+
<br />
110
111
+
<blockquote>
112
+
This entire page was made with just dev.css and basic HTML. You can view
113
+
the source
114
+
<a href="https://github.com/intergrav/dev.css/blob/main/demo.html"
115
+
>here</a
116
+
>.
117
+
</blockquote>
118
119
+
<br />
120
+
<hr />
121
+
<br />
122
123
+
<p>
124
+
Lorem <mark>ipsum</mark> dolor sit amet
125
+
<strong>consectetur</strong> adipisicing elit. Aut
126
+
<i>harum molestias</i> labore amet possimus
127
+
<s>exercitationem aperiam</s> earum, doloribus
128
+
<u>nobis ducimus</u> maiores quia voluptates quis omnis molestiae
129
+
quisquam. <a href="#">Voluptatibus, officiis laudantium?</a>
130
+
</p>
131
132
+
<p>
133
+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
134
+
<code>Hic culpa, nobis doloremque</code> veniam non, nihil cupiditate
135
+
odit repellat est <kbd>ALT + F4</kbd> expedita facilis. Fuga aspernatur,
136
+
alias debitis eveniet totam minima vel.
137
+
</p>
138
+
139
+
<ul>
140
+
<li>List item</li>
141
+
<li>List item</li>
142
+
<li>List item</li>
143
+
<li>List item</li>
144
+
</ul>
145
146
+
<ol>
147
+
<li>Step 1</li>
148
+
<li>Step 2</li>
149
+
<li>????</li>
150
+
<li>Profit!</li>
151
+
</ol>
152
153
+
<dl>
154
+
<dt>Web</dt>
155
+
<dd>The part of the Internet that contains websites and web pages</dd>
156
+
<dt>HTML</dt>
157
+
<dd>A markup language for creating web pages</dd>
158
+
<dt>CSS</dt>
159
+
<dd>A technology to make HTML look better</dd>
160
+
</dl>
161
162
+
<blockquote cite="https://en.wikiquote.org/wiki/Edward_Snowden">
163
+
If you think privacy is unimportant for you because you have nothing to
164
+
hide, you might as well say free speech is unimportant for you because
165
+
you have nothing useful to say.
166
+
<br />
167
+
<br />
168
+
– Edward Snowden
169
+
</blockquote>
170
171
+
<pre><code><!DOCTYPE html>
172
<html>
173
<head>
174
<title>Hello World</title>
···
178
</body>
179
</html></code></pre>
180
181
+
<br />
182
+
<hr />
183
+
<br />
184
185
+
<details>
186
+
<summary>Click me!</summary>
187
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
188
+
</details>
189
190
+
<br />
191
+
<hr />
192
+
<br />
193
194
+
<article>
195
+
<h1>Article element</h1>
196
+
<p>This is an article element by itself.</p>
197
+
</article>
198
199
+
<article>
200
+
<h1>Article element</h1>
201
+
<p>This is an article element with other nested elements.</p>
202
+
<article>
203
+
<h2>Article 1</h2>
204
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
205
+
</article>
206
+
<article>
207
+
<h2>Article 2</h2>
208
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
209
+
</article>
210
+
<details>
211
+
<summary>Click me!</summary>
212
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
213
+
</details>
214
+
</article>
215
216
+
<br />
217
+
<hr />
218
+
<br />
219
220
+
<table>
221
+
<caption>
222
+
Ho-kago Tea Time
223
+
</caption>
224
+
<thead>
225
+
<tr>
226
+
<th>Name</th>
227
+
<th>Instrument</th>
228
+
</tr>
229
+
</thead>
230
+
<tbody>
231
+
<tr>
232
+
<td>Yui Hirasawa</td>
233
+
<td>Lead Guitar</td>
234
+
</tr>
235
+
<tr>
236
+
<td>Mio Akiyama</td>
237
+
<td>Bass</td>
238
+
</tr>
239
+
<tr>
240
+
<td>Ritsu Tainaka</td>
241
+
<td>Drums</td>
242
+
</tr>
243
+
<tr>
244
+
<td>Tsumugi Kotobuki</td>
245
+
<td>Keyboard</td>
246
+
</tr>
247
+
<tr>
248
+
<td>Azusa Nakano</td>
249
+
<td>Rhythm Guitar</td>
250
+
</tr>
251
+
</tbody>
252
+
<tfoot>
253
+
<tr>
254
+
<th>Name</th>
255
+
<th>Instrument</th>
256
+
</tr>
257
+
</tfoot>
258
+
</table>
259
260
+
<br />
261
+
<hr />
262
+
<br />
263
+
264
+
<form>
265
+
<p>
266
+
<em>
267
+
This is not a real form and does not submit or save any information.
268
+
</em>
269
+
</p>
270
+
<p>
271
+
<label>First name</label><br />
272
+
<input type="text" name="first_name" />
273
+
</p>
274
+
<p>
275
+
<label>Last name</label><br />
276
+
<input type="text" name="last_name" />
277
+
</p>
278
+
<p>
279
+
<label>Gender</label><br />
280
+
<label>
281
+
<input type="radio" name="gender" value="Male" />
282
+
Male
283
+
</label>
284
+
<br />
285
+
<label>
286
+
<input type="radio" name="gender" value="Female" />
287
+
Female
288
+
</label>
289
+
<br />
290
+
<label>
291
+
<input type="radio" name="gender" value="other-none-na" />
292
+
Non-binary
293
+
</label>
294
+
</p>
295
+
<p>
296
+
<label>Email</label><br />
297
+
<input type="email" name="email" required="" />
298
+
</p>
299
+
<p>
300
+
<label>Phone number</label><br />
301
+
<input type="tel" name="phone" />
302
+
</p>
303
+
<p>
304
+
<label>Password</label><br />
305
+
<input type="password" name="password" />
306
+
</p>
307
+
<p>
308
+
<label>Country</label><br />
309
+
<select>
310
+
<option>China</option>
311
+
<option>India</option>
312
+
<option>United States</option>
313
+
<option>Indonesia</option>
314
+
<option>Brazil</option>
315
+
</select>
316
+
</p>
317
+
<p>
318
+
<label>Comments</label><br />
319
+
<textarea></textarea>
320
+
</p>
321
+
<p>
322
+
<label>
323
+
<input type="checkbox" value="terms" />
324
+
I agree to the <a>terms and conditions</a>
325
+
</label>
326
+
</p>
327
+
<p>
328
+
<button>Sign up</button>
329
+
<button type="reset">Reset form</button>
330
+
<button disabled="disabled">Disabled</button>
331
+
</p>
332
+
</form>
333
334
+
<br />
335
+
<hr />
336
+
<br />
337
+
338
+
<img
339
+
src="https://elements.xz.style/assets/fuji-daniel-hehn.jpg"
340
+
alt="Mt. Fuji"
341
+
/>
342
+
</main>
343
344
<footer>
345
<p>This is an optional footer.</p>
+222
-144
dev.css
+222
-144
dev.css
···
1
-
/* dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
2
/* about: tiny, simple, classless CSS framework in the style of Vercel's Geist design system */
3
4
/* table of contents
5
-
1. default configuration
6
-
2. dark mode handling
7
-
3. root color scheme
8
4. css reset
9
5. margins for most elements
10
-
6. font family
11
-
7. body and selection styling
12
-
8. typography
13
-
9. blockquotes
14
-
10. header
15
-
11. footer
16
-
12. buttons and inputs
17
-
13. code and keyboards
18
-
14. details
19
-
15. description lists
20
-
16. horizontal rules
21
-
17. fieldsets
22
-
18. tables
23
-
19. lists
24
*/
25
26
-
/* 1. default configuration */
27
:root {
28
/* font families */
29
-
--dc-font-sans: "Geist", "Inter", system-ui, -apple-system, BlinkMacSystemFont,
30
-
"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
31
-
sans-serif;
32
-
--dc-font-mono: "Geist Mono", ui-monospace, Consolas, Monaco, "Ubuntu Mono",
33
-
"Liberation Mono", "Courier New", Courier, monospace;
34
35
/* light colors */
36
-
--dc-cs: light;
37
-
--dc-tx-1: #000000;
38
-
--dc-tx-2: #1a1a1a;
39
-
--dc-bg-1: #fafafa;
40
-
--dc-bg-2: #fff;
41
-
--dc-bg-3: #ebebeb;
42
-
--dc-lk-1: #0068d6;
43
-
--dc-lkb-1: #0072f5;
44
-
--dc-lkb-2: #0062d1;
45
-
--dc-lkb-tx: #ededed;
46
-
--dc-ac-1: #8e4ec6;
47
-
--dc-ac-tx: #ededed;
48
49
/* dark colors */
50
--dc-d-cs: dark;
51
--dc-d-tx-1: #ededed;
52
--dc-d-tx-2: #a1a1a1;
53
-
--dc-d-bg-1: #000;
54
-
--dc-d-bg-2: #0a0a0a;
55
--dc-d-bg-3: #2e2e2e;
56
-
--dc-d-lk-1: #52a8ff;
57
-
--dc-d-lkb-1: #0072f5;
58
-
--dc-d-lkb-2: #0062d1;
59
-
--dc-d-lkb-tx: #ededed;
60
-
--dc-d-ac-1: #8e4ec6;
61
-
--dc-d-ac-tx: #ededed;
62
}
63
64
-
/* 2. dark mode handling */
65
@media (prefers-color-scheme: dark) {
66
:root {
67
--dc-cs: var(--dc-d-cs);
···
79
}
80
}
81
82
-
/* 3. root color scheme */
83
:root {
84
color-scheme: only var(--dc-cs);
85
}
86
87
-
/* 4. css reset - cleaned up https://www.joshwcomeau.com/css/custom-css-reset */
88
*,
89
*::before,
90
*::after {
91
box-sizing: border-box;
92
margin: 0;
93
-
word-break: break-word;
94
-
}
95
-
96
-
body {
97
-
line-height: 1.5;
98
}
99
100
img,
···
113
font: inherit;
114
}
115
116
#root,
117
#__next {
118
isolation: isolate;
···
130
dl,
131
fieldset,
132
figure,
133
form,
134
input,
135
iframe,
136
img,
137
meter,
138
nav,
139
ol,
···
152
margin-bottom: 1rem;
153
}
154
155
-
/* 6. font family */
156
-
html {
157
-
font-family: var(--dc-font-sans);
158
}
159
160
code,
···
162
kbd,
163
samp {
164
font-family: var(--dc-font-mono);
165
-
}
166
-
167
-
/* 7. body and selection styling */
168
-
body {
169
-
margin: 0 auto;
170
-
max-width: 48rem;
171
-
padding: 2rem;
172
-
background: var(--dc-bg-1);
173
-
color: var(--dc-tx-2);
174
-
overflow-wrap: break-word;
175
-
overflow-x: hidden;
176
-
}
177
-
178
-
::selection {
179
-
background: var(--dc-ac-1);
180
-
color: var(--dc-ac-tx);
181
-
}
182
-
183
-
/* 8. typography */
184
-
h1 {
185
-
font-size: 2rem;
186
-
}
187
-
188
-
h2 {
189
-
font-size: 1.5rem;
190
-
}
191
-
192
-
h3 {
193
-
font-size: 1.17rem;
194
-
}
195
-
196
-
h4 {
197
-
font-size: 1rem;
198
-
}
199
-
200
-
h5 {
201
-
font-size: 0.83rem;
202
-
}
203
-
204
-
h6 {
205
-
font-size: 0.67rem;
206
-
}
207
-
208
-
p,
209
-
a {
210
-
font-size: 1rem;
211
}
212
213
h1,
···
216
h4,
217
h5,
218
h6 {
219
-
line-height: 1;
220
color: var(--dc-tx-1);
221
-
padding-top: 1rem;
222
}
223
224
h1,
225
h2,
226
h3 {
227
-
padding-bottom: 0.25rem;
228
margin-bottom: 0.5rem;
229
border-bottom: 1px solid var(--dc-bg-3);
230
}
231
232
h4,
233
h5,
234
h6 {
···
245
}
246
247
mark {
248
padding: 0.125rem 0.25rem;
249
background: var(--dc-ac-1);
250
color: var(--dc-ac-tx);
251
-
border-radius: 0.25rem;
252
}
253
254
-
/* 9. blockquotes */
255
-
blockquote {
256
-
padding: 1.25rem;
257
background: var(--dc-bg-2);
258
border: 1px solid var(--dc-bg-3);
259
-
border-left: 5px solid var(--dc-bg-3);
260
border-radius: 0.25rem;
261
}
262
263
-
blockquote *:last-child {
264
-
padding-bottom: 0;
265
margin-bottom: 0;
266
}
267
268
-
/* 10. header - make sure header addons dont break when modifying */
269
header {
270
-
background: var(--dc-bg-2);
271
-
border-bottom: 1px solid var(--dc-bg-3);
272
-
padding: 0.5rem calc(50vw - 50%);
273
-
margin: -2rem calc(50% - 50vw) 2rem;
274
}
275
276
header * {
277
-
padding-top: 0rem;
278
-
padding-bottom: 0rem;
279
-
margin-top: 0.25rem;
280
margin-bottom: 0.25rem;
281
}
282
283
header h1,
284
header h2,
285
header h3 {
286
-
border-bottom: 0;
287
}
288
289
header nav ul {
···
299
content: "• ";
300
}
301
302
-
/* 11. footer */
303
-
footer {
304
-
border-top: 1px solid var(--dc-bg-3);
305
-
padding-top: 0.5rem;
306
}
307
308
-
footer h1,
309
-
footer h2,
310
-
footer h3 {
311
-
border-bottom: 0;
312
}
313
314
-
/* 12. buttons and inputs */
315
a button,
316
button,
317
input[type="submit"],
···
325
background: var(--dc-lkb-1);
326
color: var(--dc-lkb-tx);
327
border: 0;
328
-
border-radius: 0.25rem;
329
box-sizing: border-box;
330
cursor: pointer;
331
}
···
360
background: var(--dc-bg-2);
361
color: var(--dc-tx-2);
362
border: 1px solid var(--dc-bg-3);
363
-
border-radius: 0.25rem;
364
box-shadow: none;
365
box-sizing: border-box;
366
}
···
374
accent-color: var(--dc-ac-1);
375
}
376
377
-
/* 13. code and keyboards */
378
code,
379
samp,
380
kbd,
381
pre {
382
background: var(--dc-bg-2);
383
border: 1px solid var(--dc-bg-3);
384
-
border-radius: 0.25rem;
385
padding: 0.125rem 0.25rem;
386
-
font-size: 0.9rem;
387
tab-size: 2;
388
}
389
···
402
border: 0;
403
}
404
405
-
/* 14. details */
406
details {
407
padding: 0.5rem 1rem;
408
background: var(--dc-bg-2);
409
border: 1px solid var(--dc-bg-3);
410
-
border-radius: 0.25rem;
411
}
412
413
summary {
···
429
padding-bottom: 0;
430
}
431
432
-
/* 15. description lists */
433
dt {
434
font-weight: bold;
435
}
···
438
content: "→ ";
439
}
440
441
-
/* 16. horizontal rules */
442
hr {
443
border: 0;
444
-
border-bottom: 1px solid var(--dc-bg-3);
445
-
margin: 1rem auto;
446
}
447
448
-
/* 17. fieldsets */
449
fieldset {
450
margin-top: 1rem;
451
padding: 2rem;
452
border: 1px solid var(--dc-bg-3);
453
-
border-radius: 0.25rem;
454
}
455
456
legend {
457
padding: auto 0.5rem;
458
}
459
460
-
/* 18. tables */
461
table {
462
border-collapse: collapse;
463
width: 100%;
···
483
margin-bottom: 0.5rem;
484
}
485
486
-
/* 19. lists */
487
ol,
488
ul {
489
padding-left: 2rem;
···
1
+
/* dev.css v4, a lightweight CSS framework - https://github.com/intergrav/dev.css */
2
/* about: tiny, simple, classless CSS framework in the style of Vercel's Geist design system */
3
4
+
/* todo for v4 release
5
+
- finish dev.css-docs and move demo to that site
6
+
- update dev.css preview images
7
+
*/
8
+
9
/* table of contents
10
+
1. configurable variables
11
+
2. dark mode variables
12
+
3. color scheme
13
4. css reset
14
5. margins for most elements
15
+
6. typography
16
+
7. document
17
+
8. header
18
+
9. footer
19
+
10. blockquotes
20
+
11. buttons and inputs
21
+
12. code and keyboards
22
+
13. details
23
+
14. description lists
24
+
15. horizontal rules
25
+
16. fieldsets
26
+
17. tables
27
+
18. lists
28
*/
29
30
+
/* 1. configurable variables */
31
+
/* adjustable by you! see ./theme/boilerplate-auto.css */
32
:root {
33
/* font families */
34
+
--dc-font: "Geist", "Inter", system-ui, "Segoe UI", Roboto, Helvetica, Arial,
35
+
sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
36
+
--dc-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Consolas,
37
+
"Liberation Mono", Menlo, monospace;
38
39
/* light colors */
40
+
--dc-cs: light; /* light/dark scrollbars, inputs, etc */
41
+
--dc-tx-1: #171717; /* primary text */
42
+
--dc-tx-2: #666; /* secondary text */
43
+
--dc-bg-1: #fff; /* primary background */
44
+
--dc-bg-2: #fafafa; /* secondary background */
45
+
--dc-bg-3: #ebebeb; /* border */
46
+
--dc-lk-1: #005ff2; /* link text */
47
+
--dc-lkb-1: #006bff; /* link button */
48
+
--dc-lkb-2: #0059ec; /* link button hover */
49
+
--dc-lkb-tx: #fff; /* text over link button */
50
+
--dc-ac-1: #a000f8; /* accent color */
51
+
--dc-ac-tx: #fff; /* text over accent color */
52
53
/* dark colors */
54
--dc-d-cs: dark;
55
--dc-d-tx-1: #ededed;
56
--dc-d-tx-2: #a1a1a1;
57
+
--dc-d-bg-1: #0a0a0a;
58
+
--dc-d-bg-2: #000;
59
--dc-d-bg-3: #2e2e2e;
60
+
--dc-d-lk-1: #47a8ff;
61
+
--dc-d-lkb-1: #006efe;
62
+
--dc-d-lkb-2: #005be7;
63
+
--dc-d-lkb-tx: #fff;
64
+
--dc-d-ac-1: #9440d5;
65
+
--dc-d-ac-tx: #fff;
66
}
67
68
+
/* 2. dark mode variables */
69
+
/* adjusts variables if the user's browser prefers dark mode */
70
@media (prefers-color-scheme: dark) {
71
:root {
72
--dc-cs: var(--dc-d-cs);
···
84
}
85
}
86
87
+
/* 3. color scheme */
88
+
/* adjusts browser color scheme based on variable */
89
:root {
90
color-scheme: only var(--dc-cs);
91
}
92
93
+
/* 4. css reset */
94
+
/* modified from https://www.joshwcomeau.com/css/custom-css-reset */
95
+
96
*,
97
*::before,
98
*::after {
99
box-sizing: border-box;
100
margin: 0;
101
}
102
103
img,
···
116
font: inherit;
117
}
118
119
+
p,
120
+
h1,
121
+
h2,
122
+
h3,
123
+
h4,
124
+
h5,
125
+
h6 {
126
+
overflow-wrap: break-word;
127
+
}
128
+
129
+
p {
130
+
text-wrap: pretty;
131
+
}
132
+
h1,
133
+
h2,
134
+
h3,
135
+
h4,
136
+
h5,
137
+
h6 {
138
+
text-wrap: balance;
139
+
}
140
+
141
#root,
142
#__next {
143
isolation: isolate;
···
155
dl,
156
fieldset,
157
figure,
158
+
footer,
159
form,
160
+
hr,
161
input,
162
iframe,
163
img,
164
+
main,
165
meter,
166
nav,
167
ol,
···
180
margin-bottom: 1rem;
181
}
182
183
+
/* 6. typography */
184
+
185
+
body {
186
+
font-family: var(--dc-font);
187
+
color: var(--dc-tx-2);
188
+
line-height: 1.5;
189
}
190
191
code,
···
193
kbd,
194
samp {
195
font-family: var(--dc-font-mono);
196
+
font-size: 0.9rem;
197
}
198
199
h1,
···
202
h4,
203
h5,
204
h6 {
205
color: var(--dc-tx-1);
206
+
line-height: 1;
207
+
padding-top: 0.5rem;
208
}
209
210
h1,
211
h2,
212
h3 {
213
margin-bottom: 0.5rem;
214
+
padding-bottom: 0.25rem;
215
border-bottom: 1px solid var(--dc-bg-3);
216
}
217
218
+
article h1,
219
+
article h2,
220
+
article h3 {
221
+
padding-bottom: none;
222
+
border-bottom: none;
223
+
}
224
+
225
h4,
226
h5,
227
h6 {
···
238
}
239
240
mark {
241
+
border-radius: 0.375rem;
242
padding: 0.125rem 0.25rem;
243
background: var(--dc-ac-1);
244
color: var(--dc-ac-tx);
245
}
246
247
+
::selection {
248
+
background: var(--dc-ac-1);
249
+
color: var(--dc-ac-tx);
250
+
}
251
+
252
+
/* 7. document */
253
+
254
+
body {
255
+
max-width: 48rem;
256
+
margin: 0 auto;
257
+
padding: 0 1rem;
258
background: var(--dc-bg-2);
259
+
overflow-x: hidden;
260
+
}
261
+
262
+
main,
263
+
aside {
264
+
padding: 1.5rem;
265
+
background: var(--dc-bg-1);
266
border: 1px solid var(--dc-bg-3);
267
border-radius: 0.25rem;
268
}
269
270
+
article {
271
+
padding: 1rem;
272
+
background: var(--dc-bg-2);
273
+
border: 1px solid var(--dc-bg-3);
274
+
border-radius: 0.375rem;
275
+
}
276
+
277
+
article > *:last-child,
278
+
aside > *:last-child,
279
+
main > *:last-child {
280
margin-bottom: 0;
281
}
282
283
+
@media only screen and (max-width: 48rem) {
284
+
main {
285
+
margin: -1rem;
286
+
margin-bottom: 0rem;
287
+
background: none;
288
+
border: none;
289
+
}
290
+
291
+
aside {
292
+
margin-top: 1rem;
293
+
margin-bottom: 1rem;
294
+
}
295
+
296
+
header {
297
+
background-color: var(--dc-bg-1);
298
+
border-bottom: 1px solid var(--dc-bg-3);
299
+
}
300
+
}
301
+
302
+
aside h1,
303
+
aside h2,
304
+
aside h3 {
305
+
padding-bottom: 0;
306
+
border-bottom: none;
307
+
}
308
+
309
+
@media only screen and (min-width: 82rem) {
310
+
aside {
311
+
position: absolute;
312
+
left: calc(50% - ((48rem) / 2) - (16rem));
313
+
width: 16rem;
314
+
overflow-y: auto;
315
+
}
316
+
}
317
+
318
+
/* 8. header */
319
+
320
header {
321
+
padding: 1rem calc(50vw - 50%);
322
+
margin: 0 calc(50% - 50vw) 0;
323
}
324
325
header * {
326
+
padding: 0;
327
+
margin: 0;
328
+
}
329
+
330
+
header > *:not(:last-child) {
331
margin-bottom: 0.25rem;
332
}
333
334
header h1,
335
header h2,
336
header h3 {
337
+
border-bottom: none;
338
+
padding-bottom: 0;
339
}
340
341
header nav ul {
···
351
content: "• ";
352
}
353
354
+
@media only screen and (max-width: 48rem) {
355
+
main,
356
+
aside {
357
+
padding: 1rem;
358
+
}
359
+
}
360
+
361
+
/* 9. footer */
362
+
363
+
footer > *:last-child {
364
+
margin-bottom: 0;
365
+
}
366
+
367
+
footer nav ul {
368
+
padding: 0;
369
+
}
370
+
371
+
footer nav ul li {
372
+
display: inline-block;
373
+
margin: 0;
374
+
}
375
+
376
+
footer nav ul li:not(:first-child)::before {
377
+
content: "• ";
378
+
}
379
+
380
+
/* 10. blockquotes */
381
+
blockquote {
382
+
padding: 1.25rem;
383
+
background: var(--dc-bg-2);
384
+
border: 1px solid var(--dc-bg-3);
385
+
border-left: 5px solid var(--dc-bg-3);
386
+
border-radius: 0.375rem;
387
}
388
389
+
blockquote > *:last-child {
390
+
padding-bottom: 0;
391
+
margin-bottom: 0;
392
}
393
394
+
/* 11. buttons and inputs */
395
a button,
396
button,
397
input[type="submit"],
···
405
background: var(--dc-lkb-1);
406
color: var(--dc-lkb-tx);
407
border: 0;
408
+
border-radius: 0.375rem;
409
box-sizing: border-box;
410
cursor: pointer;
411
}
···
440
background: var(--dc-bg-2);
441
color: var(--dc-tx-2);
442
border: 1px solid var(--dc-bg-3);
443
+
border-radius: 0.375rem;
444
box-shadow: none;
445
box-sizing: border-box;
446
}
···
454
accent-color: var(--dc-ac-1);
455
}
456
457
+
/* 12. code and keyboards */
458
code,
459
samp,
460
kbd,
461
pre {
462
background: var(--dc-bg-2);
463
border: 1px solid var(--dc-bg-3);
464
+
border-radius: 0.375rem;
465
padding: 0.125rem 0.25rem;
466
tab-size: 2;
467
}
468
···
481
border: 0;
482
}
483
484
+
/* 13. details */
485
details {
486
padding: 0.5rem 1rem;
487
background: var(--dc-bg-2);
488
border: 1px solid var(--dc-bg-3);
489
+
border-radius: 0.375rem;
490
}
491
492
summary {
···
508
padding-bottom: 0;
509
}
510
511
+
/* 14. description lists */
512
dt {
513
font-weight: bold;
514
}
···
517
content: "→ ";
518
}
519
520
+
/* 15. horizontal rules */
521
hr {
522
border: 0;
523
+
border-bottom: 2px solid var(--dc-bg-3);
524
}
525
526
+
/* 16. fieldsets */
527
fieldset {
528
margin-top: 1rem;
529
padding: 2rem;
530
border: 1px solid var(--dc-bg-3);
531
+
border-radius: 0.375rem;
532
}
533
534
legend {
535
padding: auto 0.5rem;
536
}
537
538
+
/* 17. tables */
539
table {
540
border-collapse: collapse;
541
width: 100%;
···
561
margin-bottom: 0.5rem;
562
}
563
564
+
/* 18. lists */
565
ol,
566
ul {
567
padding-left: 2rem;
+4
-5
package.json
+4
-5
package.json
···
1
{
2
"name": "@intergrav/dev.css",
3
-
"version": "3.6.2",
4
"description": "Tiny, simple, classless CSS framework in the style of Vercel's Geist design system",
5
"keywords": [
6
"css",
···
13
"geist",
14
"open-source"
15
],
16
-
"homepage": "https://github.com/intergrav/dev.css#readme",
17
"bugs": {
18
"url": "https://github.com/intergrav/dev.css/issues"
19
},
20
"license": "MIT",
21
-
"author": "intergrav <intergrav@proton.me> (https://intergrav.xyz)",
22
"files": [
23
"theme",
24
-
"addon",
25
-
"demo.html"
26
],
27
"main": "dev.css",
28
"repository": "github:intergrav/dev.css",
···
1
{
2
"name": "@intergrav/dev.css",
3
+
"version": "4.0.0",
4
"description": "Tiny, simple, classless CSS framework in the style of Vercel's Geist design system",
5
"keywords": [
6
"css",
···
13
"geist",
14
"open-source"
15
],
16
+
"homepage": "https://devcss.devins.page",
17
"bugs": {
18
"url": "https://github.com/intergrav/dev.css/issues"
19
},
20
"license": "MIT",
21
+
"author": "intergrav <intergrav@proton.me> (https://devins.page)",
22
"files": [
23
"theme",
24
+
"addon"
25
],
26
"main": "dev.css",
27
"repository": "github:intergrav/dev.css",
-54
theme/boilerplate-auto.css
-54
theme/boilerplate-auto.css
···
1
-
/* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
2
-
/* about: a template that you can modify, but with an automatic light/dark mode */
3
-
/* note: you can remove lines that you want to keep as the dev.css default, such as the font lines */
4
-
5
-
:root {
6
-
/* font families */
7
-
--dc-font-sans: sans-serif; /* sans serif */
8
-
--dc-font-mono: monospace; /* monospace */
9
-
10
-
/* light colors */
11
-
--dc-cs: light; /* light/dark scrollbars, inputs, etc */
12
-
--dc-tx-1: #000000; /* primary text */
13
-
--dc-tx-2: #1a1a1a; /* secondary text */
14
-
--dc-bg-1: #fafafa; /* main background */
15
-
--dc-bg-2: #fff; /* secondary background */
16
-
--dc-bg-3: #ebebeb; /* outlines */
17
-
--dc-lk-1: #0068d6; /* link text */
18
-
--dc-lkb-1: #0072f5; /* link button background */
19
-
--dc-lkb-2: #0062d1; /* link button background (hover) */
20
-
--dc-lkb-tx: #ededed; /* link button text */
21
-
--dc-ac-1: #8e4ec6; /* accent color */
22
-
--dc-ac-tx: #ededed; /* accent color text */
23
-
24
-
/* dark colors */
25
-
--dc-d-cs: dark;
26
-
--dc-d-tx-1: #ededed;
27
-
--dc-d-tx-2: #a1a1a1;
28
-
--dc-d-bg-1: #000;
29
-
--dc-d-bg-2: #0a0a0a;
30
-
--dc-d-bg-3: #2e2e2e;
31
-
--dc-d-lk-1: #52a8ff;
32
-
--dc-d-lkb-1: #0072f5;
33
-
--dc-d-lkb-2: #0062d1;
34
-
--dc-d-lkb-tx: #ededed;
35
-
--dc-d-ac-1: #8e4ec6;
36
-
--dc-d-ac-tx: #ededed;
37
-
}
38
-
39
-
@media (prefers-color-scheme: dark) {
40
-
:root {
41
-
--dc-cs: var(--dc-d-cs);
42
-
--dc-tx-1: var(--dc-d-tx-1);
43
-
--dc-tx-2: var(--dc-d-tx-2);
44
-
--dc-bg-1: var(--dc-d-bg-1);
45
-
--dc-bg-2: var(--dc-d-bg-2);
46
-
--dc-bg-3: var(--dc-d-bg-3);
47
-
--dc-lk-1: var(--dc-d-lk-1);
48
-
--dc-lkb-1: var(--dc-d-lkb-1);
49
-
--dc-lkb-2: var(--dc-d-lkb-2);
50
-
--dc-lkb-tx: var(--dc-d-lkb-tx);
51
-
--dc-ac-1: var(--dc-d-ac-1);
52
-
--dc-ac-tx: var(--dc-d-ac-tx);
53
-
}
54
-
}
···
+63
theme/boilerplate-auto.user.css
+63
theme/boilerplate-auto.user.css
···
···
1
+
/* ==userstyle==
2
+
@name boilerplate-auto for dev.css
3
+
@description a template that you can modify, but with two color schemes for light/dark mode. copied from dev.css defaults. you can remove lines that you want to keep as the dev.css default, such as the font lines
4
+
@namespace author
5
+
@version 1.0.0
6
+
@author author <author@example.com> (https://example.com)
7
+
@homepageURL https://example.com
8
+
@supportURL https://example.com/issues
9
+
@license MIT
10
+
==/userstyle== */
11
+
12
+
:root {
13
+
/* font families */
14
+
--dc-font: "Geist", "Inter", system-ui, "Segoe UI", Roboto, Helvetica,
15
+
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
16
+
--dc-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Consolas,
17
+
"Liberation Mono", Menlo, monospace;
18
+
19
+
/* light colors */
20
+
--dc-cs: light; /* light/dark for scrollbars, inputs, etc */
21
+
--dc-tx-1: #171717; /* primary text */
22
+
--dc-tx-2: #666; /* secondary text */
23
+
--dc-bg-1: #fff; /* primary background */
24
+
--dc-bg-2: #fafafa; /* secondary background */
25
+
--dc-bg-3: #ebebeb; /* border */
26
+
--dc-lk-1: #005ff2; /* link text */
27
+
--dc-lkb-1: #006bff; /* link button */
28
+
--dc-lkb-2: #0059ec; /* link button hover */
29
+
--dc-lkb-tx: #fff; /* text over link button */
30
+
--dc-ac-1: #a000f8; /* accent color */
31
+
--dc-ac-tx: #fff; /* text over accent color */
32
+
33
+
/* dark colors */
34
+
--dc-d-cs: dark;
35
+
--dc-d-tx-1: #ededed;
36
+
--dc-d-tx-2: #a1a1a1;
37
+
--dc-d-bg-1: #0a0a0a;
38
+
--dc-d-bg-2: #000;
39
+
--dc-d-bg-3: #2e2e2e;
40
+
--dc-d-lk-1: #47a8ff;
41
+
--dc-d-lkb-1: #006efe;
42
+
--dc-d-lkb-2: #005be7;
43
+
--dc-d-lkb-tx: #fff;
44
+
--dc-d-ac-1: #9440d5;
45
+
--dc-d-ac-tx: #fff;
46
+
}
47
+
48
+
@media (prefers-color-scheme: dark) {
49
+
:root {
50
+
--dc-cs: var(--dc-d-cs);
51
+
--dc-tx-1: var(--dc-d-tx-1);
52
+
--dc-tx-2: var(--dc-d-tx-2);
53
+
--dc-bg-1: var(--dc-d-bg-1);
54
+
--dc-bg-2: var(--dc-d-bg-2);
55
+
--dc-bg-3: var(--dc-d-bg-3);
56
+
--dc-lk-1: var(--dc-d-lk-1);
57
+
--dc-lkb-1: var(--dc-d-lkb-1);
58
+
--dc-lkb-2: var(--dc-d-lkb-2);
59
+
--dc-lkb-tx: var(--dc-d-lkb-tx);
60
+
--dc-ac-1: var(--dc-d-ac-1);
61
+
--dc-ac-tx: var(--dc-d-ac-tx);
62
+
}
63
+
}
-23
theme/boilerplate.css
-23
theme/boilerplate.css
···
1
-
/* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
2
-
/* about: a template that you can modify */
3
-
/* note: you can remove lines that you want to keep as the dev.css default, such as the font lines */
4
-
5
-
:root {
6
-
/* font families */
7
-
--dc-font-sans: sans-serif; /* sans serif */
8
-
--dc-font-mono: monospace; /* monospace */
9
-
10
-
/* colors */
11
-
--dc-cs: light; /* light/dark scrollbars, inputs, etc */
12
-
--dc-tx-1: #000000; /* primary text */
13
-
--dc-tx-2: #1a1a1a; /* secondary text */
14
-
--dc-bg-1: #fafafa; /* main background */
15
-
--dc-bg-2: #fff; /* secondary background */
16
-
--dc-bg-3: #ebebeb; /* outlines */
17
-
--dc-lk-1: #0068d6; /* link text */
18
-
--dc-lkb-1: #0072f5; /* link button background */
19
-
--dc-lkb-2: #0062d1; /* link button background (hover) */
20
-
--dc-lkb-tx: #ededed; /* link button text */
21
-
--dc-ac-1: #8e4ec6; /* accent color */
22
-
--dc-ac-tx: #ededed; /* accent color text */
23
-
}
···
+32
theme/boilerplate.user.css
+32
theme/boilerplate.user.css
···
···
1
+
/* ==userstyle==
2
+
@name boilerplate for dev.css
3
+
@description a template that you can modify. copied from dev.css defaults. you can remove lines that you want to keep as the dev.css default, such as the font lines
4
+
@namespace author
5
+
@version 1.0.0
6
+
@author author <author@example.com> (https://example.com)
7
+
@homepageURL https://example.com
8
+
@supportURL https://example.com/issues
9
+
@license MIT
10
+
==/userstyle== */
11
+
12
+
:root {
13
+
/* font families */
14
+
--dc-font: "Geist", "Inter", system-ui, "Segoe UI", Roboto, Helvetica,
15
+
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
16
+
--dc-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Consolas,
17
+
"Liberation Mono", Menlo, monospace;
18
+
19
+
/* light colors */
20
+
--dc-cs: light; /* light/dark for scrollbars, inputs, etc */
21
+
--dc-tx-1: #171717; /* primary text */
22
+
--dc-tx-2: #666; /* secondary text */
23
+
--dc-bg-1: #fff; /* primary background */
24
+
--dc-bg-2: #fafafa; /* secondary background */
25
+
--dc-bg-3: #ebebeb; /* border */
26
+
--dc-lk-1: #005ff2; /* link text */
27
+
--dc-lkb-1: #006bff; /* link button */
28
+
--dc-lkb-2: #0059ec; /* link button hover */
29
+
--dc-lkb-tx: #fff; /* text over link button */
30
+
--dc-ac-1: #a000f8; /* accent color */
31
+
--dc-ac-tx: #fff; /* text over accent color */
32
+
}
-50
theme/catppuccin-frappe.css
-50
theme/catppuccin-frappe.css
···
1
-
/* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
2
-
/* about: catppuccin's frappé color scheme - https://github.com/catppuccin */
3
-
/* note: this will use catppuccin latte if the user's device prefers light mode for accessibility and consistency */
4
-
5
-
:root {
6
-
/* light colors - latte */
7
-
--dc-cs: light;
8
-
--dc-tx-1: #4c4f69; /* primary text | Text */
9
-
--dc-tx-2: #4c4f69; /* secondary text | Text */
10
-
--dc-bg-1: #e6e9ef; /* main background | Mantle */
11
-
--dc-bg-2: #eff1f5; /* secondary background | Base */
12
-
--dc-bg-3: #ccd0da; /* outlines | Surface0 */
13
-
--dc-lk-1: #1e66f5; /* link text | Blue */
14
-
--dc-lkb-1: #bcc0cc; /* link button background | Surface1 */
15
-
--dc-lkb-2: #ccd0da; /* link button background (hover) | Surface0 */
16
-
--dc-lkb-tx: #4c4f69; /* link button text | Text */
17
-
--dc-ac-1: #8839ef; /* accent color | Mauve */
18
-
--dc-ac-tx: #eff1f5; /* accent color text | Base */
19
-
20
-
/* dark colors */
21
-
--dc-d-cs: dark;
22
-
--dc-d-tx-1: #c6d0f5; /* primary text | Text */
23
-
--dc-d-tx-2: #c6d0f5; /* secondary text | Text */
24
-
--dc-d-bg-1: #292c3c; /* main background | Mantle */
25
-
--dc-d-bg-2: #303446; /* secondary background | Base */
26
-
--dc-d-bg-3: #414559; /* outlines | Surface0 */
27
-
--dc-d-lk-1: #8caaee; /* link text | Blue */
28
-
--dc-d-lkb-1: #51576d; /* link button background | Surface1 */
29
-
--dc-d-lkb-2: #414559; /* link button background (hover) | Surface0 */
30
-
--dc-d-lkb-tx: #c6d0f5; /* link button text | Text */
31
-
--dc-d-ac-1: #ca9ee6; /* accent color | Mauve */
32
-
--dc-d-ac-tx: #303446; /* accent color text | Base */
33
-
}
34
-
35
-
@media (prefers-color-scheme: dark) {
36
-
:root {
37
-
--dc-cs: var(--dc-d-cs);
38
-
--dc-tx-1: var(--dc-d-tx-1);
39
-
--dc-tx-2: var(--dc-d-tx-2);
40
-
--dc-bg-1: var(--dc-d-bg-1);
41
-
--dc-bg-2: var(--dc-d-bg-2);
42
-
--dc-bg-3: var(--dc-d-bg-3);
43
-
--dc-lk-1: var(--dc-d-lk-1);
44
-
--dc-lkb-1: var(--dc-d-lkb-1);
45
-
--dc-lkb-2: var(--dc-d-lkb-2);
46
-
--dc-lkb-tx: var(--dc-d-lkb-tx);
47
-
--dc-ac-1: var(--dc-d-ac-1);
48
-
--dc-ac-tx: var(--dc-d-ac-tx);
49
-
}
50
-
}
···
+56
theme/catppuccin-frappe.user.css
+56
theme/catppuccin-frappe.user.css
···
···
1
+
/* ==userstyle==
2
+
@name catppuccin frappé and latte for dev.css
3
+
@description dev.css theme based on catppuccin's frappé and latte colors - https://github.com/catppuccin
4
+
@namespace intergrav
5
+
@version 1.0.0
6
+
@author intergrav <intergrav@proton.me> (https://github.com/intergrav)
7
+
@homepageURL https://github.com/intergrav/dev.css
8
+
@supportURL https://github.com/intergrav/dev.css/issues
9
+
@license MIT
10
+
==/userstyle== */
11
+
12
+
:root {
13
+
/* light colors - latte */
14
+
--dc-cs: light;
15
+
--dc-tx-1: #4c4f69; /* primary text | Text */
16
+
--dc-tx-2: #4c4f69; /* secondary text | Text */
17
+
--dc-bg-1: #eff1f5; /* primary background | Base */
18
+
--dc-bg-2: #e6e9ef; /* secondary background | Mantle */
19
+
--dc-bg-3: #ccd0da; /* border | Surface0 */
20
+
--dc-lk-1: #1e66f5; /* link text | Blue */
21
+
--dc-lkb-1: #bcc0cc; /* link button | Surface1 */
22
+
--dc-lkb-2: #ccd0da; /* link button hover | Surface0 */
23
+
--dc-lkb-tx: #4c4f69; /* text over link button | Text */
24
+
--dc-ac-1: #8839ef; /* accent color | Mauve */
25
+
--dc-ac-tx: #eff1f5; /* text over accent color | Base */
26
+
27
+
--dc-d-cs: dark;
28
+
--dc-d-tx-1: #c6d0f5; /* primary text | Text */
29
+
--dc-d-tx-2: #c6d0f5; /* secondary text | Text */
30
+
--dc-d-bg-1: #303446; /* primary background | Base */
31
+
--dc-d-bg-2: #292c3c; /* secondary background | Mantle */
32
+
--dc-d-bg-3: #414559; /* border | Surface0 */
33
+
--dc-d-lk-1: #8caaee; /* link text | Blue */
34
+
--dc-d-lkb-1: #51576d; /* link button | Surface1 */
35
+
--dc-d-lkb-2: #414559; /* link button hover | Surface0 */
36
+
--dc-d-lkb-tx: #c6d0f5; /* text over link button | Text */
37
+
--dc-d-ac-1: #ca9ee6; /* accent color | Mauve */
38
+
--dc-d-ac-tx: #303446; /* text over accent color | Base */
39
+
}
40
+
41
+
@media (prefers-color-scheme: dark) {
42
+
:root {
43
+
--dc-cs: var(--dc-d-cs);
44
+
--dc-tx-1: var(--dc-d-tx-1);
45
+
--dc-tx-2: var(--dc-d-tx-2);
46
+
--dc-bg-1: var(--dc-d-bg-1);
47
+
--dc-bg-2: var(--dc-d-bg-2);
48
+
--dc-bg-3: var(--dc-d-bg-3);
49
+
--dc-lk-1: var(--dc-d-lk-1);
50
+
--dc-lkb-1: var(--dc-d-lkb-1);
51
+
--dc-lkb-2: var(--dc-d-lkb-2);
52
+
--dc-lkb-tx: var(--dc-d-lkb-tx);
53
+
--dc-ac-1: var(--dc-d-ac-1);
54
+
--dc-ac-tx: var(--dc-d-ac-tx);
55
+
}
56
+
}
-50
theme/catppuccin-macchiato.css
-50
theme/catppuccin-macchiato.css
···
1
-
/* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
2
-
/* about: catppuccin's macchiato color scheme - https://github.com/catppuccin */
3
-
/* note: this will use catppuccin latte if the user's device prefers light mode for accessibility and consistency */
4
-
5
-
:root {
6
-
/* light colors - latte */
7
-
--dc-cs: light;
8
-
--dc-tx-1: #4c4f69; /* primary text | Text */
9
-
--dc-tx-2: #4c4f69; /* secondary text | Text */
10
-
--dc-bg-1: #e6e9ef; /* main background | Mantle */
11
-
--dc-bg-2: #eff1f5; /* secondary background | Base */
12
-
--dc-bg-3: #ccd0da; /* outlines | Surface0 */
13
-
--dc-lk-1: #1e66f5; /* link text | Blue */
14
-
--dc-lkb-1: #bcc0cc; /* link button background | Surface1 */
15
-
--dc-lkb-2: #ccd0da; /* link button background (hover) | Surface0 */
16
-
--dc-lkb-tx: #4c4f69; /* link button text | Text */
17
-
--dc-ac-1: #8839ef; /* accent color | Mauve */
18
-
--dc-ac-tx: #eff1f5; /* accent color text | Base */
19
-
20
-
/* dark colors */
21
-
--dc-d-cs: dark;
22
-
--dc-d-tx-1: #cad3f5; /* primary text | Text */
23
-
--dc-d-tx-2: #cad3f5; /* secondary text | Text */
24
-
--dc-d-bg-1: #1e2030; /* main background | Mantle */
25
-
--dc-d-bg-2: #24273a; /* secondary background | Base */
26
-
--dc-d-bg-3: #363a4f; /* outlines | Surface0 */
27
-
--dc-d-lk-1: #8aadf4; /* link text | Blue */
28
-
--dc-d-lkb-1: #494d64; /* link button background | Surface1 */
29
-
--dc-d-lkb-2: #363a4f; /* link button background (hover) | Surface0 */
30
-
--dc-d-lkb-tx: #cad3f5; /* link button text | Text */
31
-
--dc-d-ac-1: #c6a0f6; /* accent color | Mauve */
32
-
--dc-d-ac-tx: #24273a; /* accent color text | Base */
33
-
}
34
-
35
-
@media (prefers-color-scheme: dark) {
36
-
:root {
37
-
--dc-cs: var(--dc-d-cs);
38
-
--dc-tx-1: var(--dc-d-tx-1);
39
-
--dc-tx-2: var(--dc-d-tx-2);
40
-
--dc-bg-1: var(--dc-d-bg-1);
41
-
--dc-bg-2: var(--dc-d-bg-2);
42
-
--dc-bg-3: var(--dc-d-bg-3);
43
-
--dc-lk-1: var(--dc-d-lk-1);
44
-
--dc-lkb-1: var(--dc-d-lkb-1);
45
-
--dc-lkb-2: var(--dc-d-lkb-2);
46
-
--dc-lkb-tx: var(--dc-d-lkb-tx);
47
-
--dc-ac-1: var(--dc-d-ac-1);
48
-
--dc-ac-tx: var(--dc-d-ac-tx);
49
-
}
50
-
}
···
+57
theme/catppuccin-macchiato.user.css
+57
theme/catppuccin-macchiato.user.css
···
···
1
+
/* ==userstyle==
2
+
@name catppuccin macchiato and latte for dev.css
3
+
@description dev.css theme based on catppuccin's macchiato and latte colors - https://github.com/catppuccin
4
+
@namespace intergrav
5
+
@version 1.0.0
6
+
@author intergrav <intergrav@proton.me> (https://github.com/intergrav)
7
+
@homepageURL https://github.com/intergrav/dev.css
8
+
@supportURL https://github.com/intergrav/dev.css/issues
9
+
@license MIT
10
+
==/userstyle== */
11
+
12
+
:root {
13
+
/* light colors - latte */
14
+
--dc-cs: light;
15
+
--dc-tx-1: #4c4f69; /* primary text | Text */
16
+
--dc-tx-2: #4c4f69; /* secondary text | Text */
17
+
--dc-bg-1: #eff1f5; /* primary background | Base */
18
+
--dc-bg-2: #e6e9ef; /* secondary background | Mantle */
19
+
--dc-bg-3: #ccd0da; /* border | Surface0 */
20
+
--dc-lk-1: #1e66f5; /* link text | Blue */
21
+
--dc-lkb-1: #bcc0cc; /* link button | Surface1 */
22
+
--dc-lkb-2: #ccd0da; /* link button hover | Surface0 */
23
+
--dc-lkb-tx: #4c4f69; /* text over link button | Text */
24
+
--dc-ac-1: #8839ef; /* accent color | Mauve */
25
+
--dc-ac-tx: #eff1f5; /* text over accent color | Base */
26
+
27
+
/* dark colors - macchiato */
28
+
--dc-d-cs: dark;
29
+
--dc-d-tx-1: #cad3f5; /* primary text | Text */
30
+
--dc-d-tx-2: #cad3f5; /* secondary text | Text */
31
+
--dc-d-bg-1: #24273a; /* primary background | Base */
32
+
--dc-d-bg-2: #1e2030; /* secondary background | Mantle */
33
+
--dc-d-bg-3: #363a4f; /* border | Surface0 */
34
+
--dc-d-lk-1: #8aadf4; /* link text | Blue */
35
+
--dc-d-lkb-1: #494d64; /* link button | Surface1 */
36
+
--dc-d-lkb-2: #363a4f; /* link button hover | Surface0 */
37
+
--dc-d-lkb-tx: #cad3f5; /* text over link button | Text */
38
+
--dc-d-ac-1: #c6a0f6; /* accent color | Mauve */
39
+
--dc-d-ac-tx: #24273a; /* text over accent color | Base */
40
+
}
41
+
42
+
@media (prefers-color-scheme: dark) {
43
+
:root {
44
+
--dc-cs: var(--dc-d-cs);
45
+
--dc-tx-1: var(--dc-d-tx-1);
46
+
--dc-tx-2: var(--dc-d-tx-2);
47
+
--dc-bg-1: var(--dc-d-bg-1);
48
+
--dc-bg-2: var(--dc-d-bg-2);
49
+
--dc-bg-3: var(--dc-d-bg-3);
50
+
--dc-lk-1: var(--dc-d-lk-1);
51
+
--dc-lkb-1: var(--dc-d-lkb-1);
52
+
--dc-lkb-2: var(--dc-d-lkb-2);
53
+
--dc-lkb-tx: var(--dc-d-lkb-tx);
54
+
--dc-ac-1: var(--dc-d-ac-1);
55
+
--dc-ac-tx: var(--dc-d-ac-tx);
56
+
}
57
+
}
-50
theme/catppuccin-mocha.css
-50
theme/catppuccin-mocha.css
···
1
-
/* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
2
-
/* about: catppuccin's mocha color scheme - https://github.com/catppuccin */
3
-
/* note: this will use catppuccin latte if the user's device prefers light mode for accessibility and consistency */
4
-
5
-
:root {
6
-
/* light colors - latte */
7
-
--dc-cs: light;
8
-
--dc-tx-1: #4c4f69; /* primary text | Text */
9
-
--dc-tx-2: #4c4f69; /* secondary text | Text */
10
-
--dc-bg-1: #e6e9ef; /* main background | Mantle */
11
-
--dc-bg-2: #eff1f5; /* secondary background | Base */
12
-
--dc-bg-3: #ccd0da; /* outlines | Surface0 */
13
-
--dc-lk-1: #1e66f5; /* link text | Blue */
14
-
--dc-lkb-1: #bcc0cc; /* link button background | Surface1 */
15
-
--dc-lkb-2: #ccd0da; /* link button background (hover) | Surface0 */
16
-
--dc-lkb-tx: #4c4f69; /* link button text | Text */
17
-
--dc-ac-1: #8839ef; /* accent color | Mauve */
18
-
--dc-ac-tx: #eff1f5; /* accent color text | Base */
19
-
20
-
/* dark colors */
21
-
--dc-d-cs: dark;
22
-
--dc-d-tx-1: #cdd6f4; /* primary text | Text */
23
-
--dc-d-tx-2: #cdd6f4; /* secondary text | Text */
24
-
--dc-d-bg-1: #181825; /* main background | Mantle */
25
-
--dc-d-bg-2: #1e1e2e; /* secondary background | Base */
26
-
--dc-d-bg-3: #313244; /* outlines | Surface0 */
27
-
--dc-d-lk-1: #89b4fa; /* link text | Blue */
28
-
--dc-d-lkb-1: #45475a; /* link button background | Surface1 */
29
-
--dc-d-lkb-2: #313244; /* link button background (hover) | Surface0 */
30
-
--dc-d-lkb-tx: #cdd6f4; /* link button text | Text */
31
-
--dc-d-ac-1: #cba6f7; /* accent color | Mauve */
32
-
--dc-d-ac-tx: #1e1e2e; /* accent color text | Base */
33
-
}
34
-
35
-
@media (prefers-color-scheme: dark) {
36
-
:root {
37
-
--dc-cs: var(--dc-d-cs);
38
-
--dc-tx-1: var(--dc-d-tx-1);
39
-
--dc-tx-2: var(--dc-d-tx-2);
40
-
--dc-bg-1: var(--dc-d-bg-1);
41
-
--dc-bg-2: var(--dc-d-bg-2);
42
-
--dc-bg-3: var(--dc-d-bg-3);
43
-
--dc-lk-1: var(--dc-d-lk-1);
44
-
--dc-lkb-1: var(--dc-d-lkb-1);
45
-
--dc-lkb-2: var(--dc-d-lkb-2);
46
-
--dc-lkb-tx: var(--dc-d-lkb-tx);
47
-
--dc-ac-1: var(--dc-d-ac-1);
48
-
--dc-ac-tx: var(--dc-d-ac-tx);
49
-
}
50
-
}
···
+57
theme/catppuccin-mocha.user.css
+57
theme/catppuccin-mocha.user.css
···
···
1
+
/* ==userstyle==
2
+
@name catppuccin mocha and latte for dev.css
3
+
@description dev.css theme based on catppuccin's mocha and latte colors - https://github.com/catppuccin
4
+
@namespace intergrav
5
+
@version 1.0.0
6
+
@author intergrav <intergrav@proton.me> (https://github.com/intergrav)
7
+
@homepageURL https://github.com/intergrav/dev.css
8
+
@supportURL https://github.com/intergrav/dev.css/issues
9
+
@license MIT
10
+
==/userstyle== */
11
+
12
+
:root {
13
+
/* light colors - latte */
14
+
--dc-cs: light;
15
+
--dc-tx-1: #4c4f69; /* primary text | Text */
16
+
--dc-tx-2: #4c4f69; /* secondary text | Text */
17
+
--dc-bg-1: #eff1f5; /* primary background | Base */
18
+
--dc-bg-2: #e6e9ef; /* secondary background | Mantle */
19
+
--dc-bg-3: #ccd0da; /* border | Surface0 */
20
+
--dc-lk-1: #1e66f5; /* link text | Blue */
21
+
--dc-lkb-1: #bcc0cc; /* link button | Surface1 */
22
+
--dc-lkb-2: #ccd0da; /* link button hover | Surface0 */
23
+
--dc-lkb-tx: #4c4f69; /* text over link button | Text */
24
+
--dc-ac-1: #8839ef; /* accent color | Mauve */
25
+
--dc-ac-tx: #eff1f5; /* text over accent color | Base */
26
+
27
+
/* dark colors - mocha */
28
+
--dc-d-cs: dark;
29
+
--dc-d-tx-1: #cdd6f4; /* primary text | Text */
30
+
--dc-d-tx-2: #cdd6f4; /* secondary text | Text */
31
+
--dc-d-bg-1: #1e1e2e; /* primary background | Base */
32
+
--dc-d-bg-2: #181825; /* secondary background | Mantle */
33
+
--dc-d-bg-3: #313244; /* border | Surface0 */
34
+
--dc-d-lk-1: #89b4fa; /* link text | Blue */
35
+
--dc-d-lkb-1: #45475a; /* link button | Surface1 */
36
+
--dc-d-lkb-2: #313244; /* link button hover | Surface0 */
37
+
--dc-d-lkb-tx: #cdd6f4; /* text over link button | Text */
38
+
--dc-d-ac-1: #cba6f7; /* accent color | Mauve */
39
+
--dc-d-ac-tx: #1e1e2e; /* text over accent color | Base */
40
+
}
41
+
42
+
@media (prefers-color-scheme: dark) {
43
+
:root {
44
+
--dc-cs: var(--dc-d-cs);
45
+
--dc-tx-1: var(--dc-d-tx-1);
46
+
--dc-tx-2: var(--dc-d-tx-2);
47
+
--dc-bg-1: var(--dc-d-bg-1);
48
+
--dc-bg-2: var(--dc-d-bg-2);
49
+
--dc-bg-3: var(--dc-d-bg-3);
50
+
--dc-lk-1: var(--dc-d-lk-1);
51
+
--dc-lkb-1: var(--dc-d-lkb-1);
52
+
--dc-lkb-2: var(--dc-d-lkb-2);
53
+
--dc-lkb-tx: var(--dc-d-lkb-tx);
54
+
--dc-ac-1: var(--dc-d-ac-1);
55
+
--dc-ac-tx: var(--dc-d-ac-tx);
56
+
}
57
+
}
-18
theme/day.css
-18
theme/day.css
···
1
-
/* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
2
-
/* about: makes it always light, regardless of device setting */
3
-
4
-
:root {
5
-
/* colors */
6
-
--dc-cs: light;
7
-
--dc-tx-1: #000000;
8
-
--dc-tx-2: #1a1a1a;
9
-
--dc-bg-1: #fafafa;
10
-
--dc-bg-2: #fff;
11
-
--dc-bg-3: #ebebeb;
12
-
--dc-lk-1: #0068d6;
13
-
--dc-lkb-1: #0072f5;
14
-
--dc-lkb-2: #0062d1;
15
-
--dc-lkb-tx: #ededed;
16
-
--dc-ac-1: #8e4ec6;
17
-
--dc-ac-tx: #ededed;
18
-
}
···
+26
theme/day.user.css
+26
theme/day.user.css
···
···
1
+
/* ==userstyle==
2
+
@name day for dev.css
3
+
@description dev.css theme that makes it always light mode regardless of device setting
4
+
@namespace intergrav
5
+
@version 1.0.0
6
+
@author intergrav <intergrav@proton.me> (https://github.com/intergrav)
7
+
@homepageURL https://github.com/intergrav/dev.css
8
+
@supportURL https://github.com/intergrav/dev.css/issues
9
+
@license MIT
10
+
==/userstyle== */
11
+
12
+
:root {
13
+
/* colors */
14
+
--dc-cs: light;
15
+
--dc-tx-1: #171717;
16
+
--dc-tx-2: #666;
17
+
--dc-bg-1: #fff;
18
+
--dc-bg-2: #fafafa;
19
+
--dc-bg-3: #ebebeb;
20
+
--dc-lk-1: #005ff2;
21
+
--dc-lkb-1: #006bff;
22
+
--dc-lkb-2: #0059ec;
23
+
--dc-lkb-tx: #fff;
24
+
--dc-ac-1: #a000f8;
25
+
--dc-ac-tx: #fff;
26
+
}
-18
theme/night.css
-18
theme/night.css
···
1
-
/* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
2
-
/* about: makes it always dark, regardless of device setting */
3
-
4
-
:root {
5
-
/* colors */
6
-
--dc-cs: dark;
7
-
--dc-tx-1: #ededed;
8
-
--dc-tx-2: #a1a1a1;
9
-
--dc-bg-1: #000;
10
-
--dc-bg-2: #ffffff0f;
11
-
--dc-bg-3: #ffffff24;
12
-
--dc-lk-1: #52a8ff;
13
-
--dc-lkb-1: #0072f5;
14
-
--dc-lkb-2: #0062d1;
15
-
--dc-lkb-tx: #ededed;
16
-
--dc-ac-1: #8e4ec6;
17
-
--dc-ac-tx: #ededed;
18
-
}
···
+26
theme/night.user.css
+26
theme/night.user.css
···
···
1
+
/* ==userstyle==
2
+
@name night for dev.css
3
+
@description dev.css theme that makes it always dark mode regardless of device setting
4
+
@namespace intergrav
5
+
@version 1.0.0
6
+
@author intergrav <intergrav@proton.me> (https://github.com/intergrav)
7
+
@homepageURL https://github.com/intergrav/dev.css
8
+
@supportURL https://github.com/intergrav/dev.css/issues
9
+
@license MIT
10
+
==/userstyle== */
11
+
12
+
:root {
13
+
/* colors */
14
+
--dc-cs: dark;
15
+
--dc-tx-1: #ededed;
16
+
--dc-tx-2: #a1a1a1;
17
+
--dc-bg-1: #0a0a0a;
18
+
--dc-bg-2: #000;
19
+
--dc-bg-3: #2e2e2e;
20
+
--dc-lk-1: #47a8ff;
21
+
--dc-lkb-1: #006efe;
22
+
--dc-lkb-2: #005be7;
23
+
--dc-lkb-tx: #fff;
24
+
--dc-ac-1: #9440d5;
25
+
--dc-ac-tx: #fff;
26
+
}
-24
theme/terminal.css
-24
theme/terminal.css
···
1
-
/* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
2
-
/* about: has a similar look to a computer terminal */
3
-
4
-
@import url("https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist-mono.min.css");
5
-
6
-
:root {
7
-
/* font families */
8
-
--dc-font-sans: "Geist Mono", monospace;
9
-
--dc-font-mono: "Geist Mono", monospace;
10
-
11
-
/* colors */
12
-
--dc-cs: dark;
13
-
--dc-tx-1: #ffffff;
14
-
--dc-tx-2: #eeeeee;
15
-
--dc-bg-1: #000000;
16
-
--dc-bg-2: #002700;
17
-
--dc-bg-3: #005800;
18
-
--dc-lk-1: #00ff00;
19
-
--dc-lkb-1: #00ff00;
20
-
--dc-lkb-2: #00d400;
21
-
--dc-lkb-tx: #000000;
22
-
--dc-ac-1: #00ff00;
23
-
--dc-ac-tx: #000000;
24
-
}
···
+31
theme/terminal.user.css
+31
theme/terminal.user.css
···
···
1
+
/* ==userstyle==
2
+
@name terminal for dev.css
3
+
@description dev.css theme that has a similar look to a computer terminal
4
+
@namespace intergrav
5
+
@version 1.0.0
6
+
@author intergrav <intergrav@proton.me> (https://github.com/intergrav)
7
+
@homepageURL https://github.com/intergrav/dev.css
8
+
@supportURL https://github.com/intergrav/dev.css/issues
9
+
@license MIT
10
+
==/userstyle== */
11
+
12
+
:root {
13
+
/* font families */
14
+
--dc-font: var(--dc-font-mono);
15
+
--dc-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Consolas,
16
+
"Liberation Mono", Menlo, monospace;
17
+
18
+
/* colors */
19
+
--dc-cs: dark;
20
+
--dc-tx-1: #ffffff;
21
+
--dc-tx-2: #eeeeee;
22
+
--dc-bg-1: #001a00;
23
+
--dc-bg-2: #000;
24
+
--dc-bg-3: #005800;
25
+
--dc-lk-1: #00ff00;
26
+
--dc-lkb-1: #00ff00;
27
+
--dc-lkb-2: #00d400;
28
+
--dc-lkb-tx: #000;
29
+
--dc-ac-1: #00ff00;
30
+
--dc-ac-tx: #000;
31
+
}