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
2
3
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
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.
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
6
7
7
<details>
8
8
<summary>Click to view preview</summary>
···
12
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
13
</details>
14
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
+
15
28
## Importing
16
29
17
30
To use dev.css in your HTML, simply add the following line to the `<head>` section of your HTML file:
18
31
19
32
```html
20
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3">
33
+
<link
34
+
rel="stylesheet"
35
+
href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4"
36
+
/>
21
37
```
22
38
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.
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.
24
40
25
-
## Elements
41
+
## Elements and Structure
26
42
27
43
dev.css takes advantage of semantic HTML elements. Here are some guidelines on how to use them for the best results.
28
44
29
45
### Header
30
46
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.
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.
32
48
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.
49
+
If you want to add a traditional navigation element, you should lay out your `<nav>` element like this:
34
50
35
-
Optionally, you can add a `<p>` tag after the `<h1>` tag to provide a description of the current page.
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
+
```
36
116
37
117
### Footer
38
118
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.
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
+
```
40
138
41
139
### Text
42
140
···
71
169
72
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.
73
171
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
172
### `header-oneline.css`
83
173
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:
174
+
This addon makes the header much more compact on narrow viewports. To use, add the following line after the `dev.css` import:
85
175
86
176
```html
87
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-oneline.min.css">
177
+
<link
178
+
rel="stylesheet"
179
+
href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/addon/header-oneline.min.css"
180
+
/>
88
181
```
89
182
90
-
### `header-sidebar.css`
183
+
### `header-sticky.css`
91
184
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:
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:
93
186
94
187
```html
95
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-sidebar.min.css">
188
+
<link
189
+
rel="stylesheet"
190
+
href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/addon/header-sticky.min.css"
191
+
/>
96
192
```
97
193
98
194
### `scroll-to-top.js`
···
100
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:
101
197
102
198
```html
103
-
<script src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/scroll-to-top.min.js" defer></script>
199
+
<script
200
+
src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/addon/scroll-to-top.min.js"
201
+
defer
202
+
></script>
104
203
```
105
204
106
205
## Themes
107
206
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:
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:
109
208
110
209
```html
111
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/theme/terminal.min.css">
210
+
<link
211
+
rel="stylesheet"
212
+
href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/theme/terminal.user.min.css"
213
+
/>
112
214
```
113
215
114
-
If you are creating a custom theme, it is recommended to use the `boilerplate-auto.css` template for better accessibility.
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.
115
217
116
218
## Credits
117
219
118
-
- [xz/new.css](https://github.com/xz/new.css) is the main inspiration for this project
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
-
}
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 */
19
4
20
5
header * {
6
+
font-size: 1rem;
7
+
line-height: 1;
21
8
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;
9
+
padding: 0;
10
+
margin-bottom: 0 !important;
37
11
}
38
12
39
-
header h2::after,
40
-
header h3::after,
41
-
header h4::after,
42
-
header h5::after,
43
-
header h6::after {
44
-
content: "/";
13
+
header {
14
+
display: flex;
15
+
gap: 1rem;
16
+
padding: 0.75rem calc(50vw - 50%);
17
+
margin: 0 calc(50% - 50vw) 0;
45
18
}
46
19
47
-
/* make sure that all header elements have same font size */
48
-
header * {
49
-
font-size: 1rem !important;
20
+
header > *:not(img, h1, h2, h3, h4, h5, h6, nav, button) {
21
+
display: none;
50
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 */
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 */
5
4
6
-
header {
7
-
position: sticky;
8
-
top: 0;
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
+
}
9
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 */
1
+
/* scroll-to-top for dev.css v4, a lightweight CSS framework - https://github.com/intergrav/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");
···
12
12
right: "1rem",
13
13
width: "2.5rem",
14
14
height: "2.5rem",
15
+
"border-radius": "1.25rem",
15
16
});
16
17
document.body.appendChild(scrollToTopButton);
17
18
+279
-221
demo.html
+279
-221
demo.html
···
5
5
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
<title>Demo - dev.css</title>
7
7
<link rel="stylesheet" href="dev.css" />
8
+
<link rel="stylesheet" href="theme/terminal.user.css" />
8
9
<link
9
10
rel="stylesheet"
10
11
href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist.min.css"
···
18
19
<body>
19
20
<header>
20
21
<h1>dev.css</h1>
21
-
<p>This is the demo page for dev.css.</p>
22
+
<p>Optional short summary of the page.</p>
22
23
<nav>
23
24
<ul>
24
25
<li><a href="demo">Demo</a></li>
···
35
36
</nav>
36
37
</header>
37
38
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>
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>
67
65
68
-
<br />
69
-
<hr />
70
-
<br />
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>
71
106
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>
107
+
<br />
108
+
<hr />
109
+
<br />
77
110
78
-
<br />
79
-
<hr />
80
-
<br />
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>
81
118
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>
119
+
<br />
120
+
<hr />
121
+
<br />
90
122
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>
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>
97
131
98
-
<ul>
99
-
<li>List item</li>
100
-
<li>List item</li>
101
-
<li>List item</li>
102
-
<li>List item</li>
103
-
</ul>
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>
104
145
105
-
<ol>
106
-
<li>Step 1</li>
107
-
<li>Step 2</li>
108
-
<li>????</li>
109
-
<li>Profit!</li>
110
-
</ol>
146
+
<ol>
147
+
<li>Step 1</li>
148
+
<li>Step 2</li>
149
+
<li>????</li>
150
+
<li>Profit!</li>
151
+
</ol>
111
152
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>
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>
120
161
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>
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>
129
170
130
-
<pre><code><!DOCTYPE html>
171
+
<pre><code><!DOCTYPE html>
131
172
<html>
132
173
<head>
133
174
<title>Hello World</title>
···
137
178
</body>
138
179
</html></code></pre>
139
180
140
-
<br />
141
-
<hr />
142
-
<br />
181
+
<br />
182
+
<hr />
183
+
<br />
143
184
144
-
<details>
145
-
<summary>Click me!</summary>
146
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
147
-
</details>
185
+
<details>
186
+
<summary>Click me!</summary>
187
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
188
+
</details>
148
189
149
-
<br />
150
-
<hr />
151
-
<br />
190
+
<br />
191
+
<hr />
192
+
<br />
152
193
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>
194
+
<article>
195
+
<h1>Article element</h1>
196
+
<p>This is an article element by itself.</p>
197
+
</article>
192
198
193
-
<br />
194
-
<hr />
195
-
<br />
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>
196
215
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>
216
+
<br />
217
+
<hr />
218
+
<br />
266
219
267
-
<br />
268
-
<hr />
269
-
<br />
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>
270
259
271
-
<img
272
-
src="https://elements.xz.style/assets/fuji-daniel-hehn.jpg"
273
-
alt="Mt. Fuji"
274
-
/>
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>
275
333
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>
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>
285
343
286
344
<footer>
287
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 */
1
+
/* dev.css v4, a lightweight CSS framework - https://github.com/intergrav/dev.css */
2
2
/* about: tiny, simple, classless CSS framework in the style of Vercel's Geist design system */
3
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
+
4
9
/* table of contents
5
-
1. default configuration
6
-
2. dark mode handling
7
-
3. root color scheme
10
+
1. configurable variables
11
+
2. dark mode variables
12
+
3. color scheme
8
13
4. css reset
9
14
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
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
24
28
*/
25
29
26
-
/* 1. default configuration */
30
+
/* 1. configurable variables */
31
+
/* adjustable by you! see ./theme/boilerplate-auto.css */
27
32
:root {
28
33
/* 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
+
--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;
34
38
35
39
/* 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;
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 */
48
52
49
53
/* dark colors */
50
54
--dc-d-cs: dark;
51
55
--dc-d-tx-1: #ededed;
52
56
--dc-d-tx-2: #a1a1a1;
53
-
--dc-d-bg-1: #000;
54
-
--dc-d-bg-2: #0a0a0a;
57
+
--dc-d-bg-1: #0a0a0a;
58
+
--dc-d-bg-2: #000;
55
59
--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;
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;
62
66
}
63
67
64
-
/* 2. dark mode handling */
68
+
/* 2. dark mode variables */
69
+
/* adjusts variables if the user's browser prefers dark mode */
65
70
@media (prefers-color-scheme: dark) {
66
71
:root {
67
72
--dc-cs: var(--dc-d-cs);
···
79
84
}
80
85
}
81
86
82
-
/* 3. root color scheme */
87
+
/* 3. color scheme */
88
+
/* adjusts browser color scheme based on variable */
83
89
:root {
84
90
color-scheme: only var(--dc-cs);
85
91
}
86
92
87
-
/* 4. css reset - cleaned up https://www.joshwcomeau.com/css/custom-css-reset */
93
+
/* 4. css reset */
94
+
/* modified from https://www.joshwcomeau.com/css/custom-css-reset */
95
+
88
96
*,
89
97
*::before,
90
98
*::after {
91
99
box-sizing: border-box;
92
100
margin: 0;
93
-
word-break: break-word;
94
-
}
95
-
96
-
body {
97
-
line-height: 1.5;
98
101
}
99
102
100
103
img,
···
113
116
font: inherit;
114
117
}
115
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
+
116
141
#root,
117
142
#__next {
118
143
isolation: isolate;
···
130
155
dl,
131
156
fieldset,
132
157
figure,
158
+
footer,
133
159
form,
160
+
hr,
134
161
input,
135
162
iframe,
136
163
img,
164
+
main,
137
165
meter,
138
166
nav,
139
167
ol,
···
152
180
margin-bottom: 1rem;
153
181
}
154
182
155
-
/* 6. font family */
156
-
html {
157
-
font-family: var(--dc-font-sans);
183
+
/* 6. typography */
184
+
185
+
body {
186
+
font-family: var(--dc-font);
187
+
color: var(--dc-tx-2);
188
+
line-height: 1.5;
158
189
}
159
190
160
191
code,
···
162
193
kbd,
163
194
samp {
164
195
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;
196
+
font-size: 0.9rem;
211
197
}
212
198
213
199
h1,
···
216
202
h4,
217
203
h5,
218
204
h6 {
219
-
line-height: 1;
220
205
color: var(--dc-tx-1);
221
-
padding-top: 1rem;
206
+
line-height: 1;
207
+
padding-top: 0.5rem;
222
208
}
223
209
224
210
h1,
225
211
h2,
226
212
h3 {
227
-
padding-bottom: 0.25rem;
228
213
margin-bottom: 0.5rem;
214
+
padding-bottom: 0.25rem;
229
215
border-bottom: 1px solid var(--dc-bg-3);
230
216
}
231
217
218
+
article h1,
219
+
article h2,
220
+
article h3 {
221
+
padding-bottom: none;
222
+
border-bottom: none;
223
+
}
224
+
232
225
h4,
233
226
h5,
234
227
h6 {
···
245
238
}
246
239
247
240
mark {
241
+
border-radius: 0.375rem;
248
242
padding: 0.125rem 0.25rem;
249
243
background: var(--dc-ac-1);
250
244
color: var(--dc-ac-tx);
251
-
border-radius: 0.25rem;
252
245
}
253
246
254
-
/* 9. blockquotes */
255
-
blockquote {
256
-
padding: 1.25rem;
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;
257
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);
258
266
border: 1px solid var(--dc-bg-3);
259
-
border-left: 5px solid var(--dc-bg-3);
260
267
border-radius: 0.25rem;
261
268
}
262
269
263
-
blockquote *:last-child {
264
-
padding-bottom: 0;
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 {
265
280
margin-bottom: 0;
266
281
}
267
282
268
-
/* 10. header - make sure header addons dont break when modifying */
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
+
269
320
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;
321
+
padding: 1rem calc(50vw - 50%);
322
+
margin: 0 calc(50% - 50vw) 0;
274
323
}
275
324
276
325
header * {
277
-
padding-top: 0rem;
278
-
padding-bottom: 0rem;
279
-
margin-top: 0.25rem;
326
+
padding: 0;
327
+
margin: 0;
328
+
}
329
+
330
+
header > *:not(:last-child) {
280
331
margin-bottom: 0.25rem;
281
332
}
282
333
283
334
header h1,
284
335
header h2,
285
336
header h3 {
286
-
border-bottom: 0;
337
+
border-bottom: none;
338
+
padding-bottom: 0;
287
339
}
288
340
289
341
header nav ul {
···
299
351
content: "• ";
300
352
}
301
353
302
-
/* 11. footer */
303
-
footer {
304
-
border-top: 1px solid var(--dc-bg-3);
305
-
padding-top: 0.5rem;
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;
306
387
}
307
388
308
-
footer h1,
309
-
footer h2,
310
-
footer h3 {
311
-
border-bottom: 0;
389
+
blockquote > *:last-child {
390
+
padding-bottom: 0;
391
+
margin-bottom: 0;
312
392
}
313
393
314
-
/* 12. buttons and inputs */
394
+
/* 11. buttons and inputs */
315
395
a button,
316
396
button,
317
397
input[type="submit"],
···
325
405
background: var(--dc-lkb-1);
326
406
color: var(--dc-lkb-tx);
327
407
border: 0;
328
-
border-radius: 0.25rem;
408
+
border-radius: 0.375rem;
329
409
box-sizing: border-box;
330
410
cursor: pointer;
331
411
}
···
360
440
background: var(--dc-bg-2);
361
441
color: var(--dc-tx-2);
362
442
border: 1px solid var(--dc-bg-3);
363
-
border-radius: 0.25rem;
443
+
border-radius: 0.375rem;
364
444
box-shadow: none;
365
445
box-sizing: border-box;
366
446
}
···
374
454
accent-color: var(--dc-ac-1);
375
455
}
376
456
377
-
/* 13. code and keyboards */
457
+
/* 12. code and keyboards */
378
458
code,
379
459
samp,
380
460
kbd,
381
461
pre {
382
462
background: var(--dc-bg-2);
383
463
border: 1px solid var(--dc-bg-3);
384
-
border-radius: 0.25rem;
464
+
border-radius: 0.375rem;
385
465
padding: 0.125rem 0.25rem;
386
-
font-size: 0.9rem;
387
466
tab-size: 2;
388
467
}
389
468
···
402
481
border: 0;
403
482
}
404
483
405
-
/* 14. details */
484
+
/* 13. details */
406
485
details {
407
486
padding: 0.5rem 1rem;
408
487
background: var(--dc-bg-2);
409
488
border: 1px solid var(--dc-bg-3);
410
-
border-radius: 0.25rem;
489
+
border-radius: 0.375rem;
411
490
}
412
491
413
492
summary {
···
429
508
padding-bottom: 0;
430
509
}
431
510
432
-
/* 15. description lists */
511
+
/* 14. description lists */
433
512
dt {
434
513
font-weight: bold;
435
514
}
···
438
517
content: "→ ";
439
518
}
440
519
441
-
/* 16. horizontal rules */
520
+
/* 15. horizontal rules */
442
521
hr {
443
522
border: 0;
444
-
border-bottom: 1px solid var(--dc-bg-3);
445
-
margin: 1rem auto;
523
+
border-bottom: 2px solid var(--dc-bg-3);
446
524
}
447
525
448
-
/* 17. fieldsets */
526
+
/* 16. fieldsets */
449
527
fieldset {
450
528
margin-top: 1rem;
451
529
padding: 2rem;
452
530
border: 1px solid var(--dc-bg-3);
453
-
border-radius: 0.25rem;
531
+
border-radius: 0.375rem;
454
532
}
455
533
456
534
legend {
457
535
padding: auto 0.5rem;
458
536
}
459
537
460
-
/* 18. tables */
538
+
/* 17. tables */
461
539
table {
462
540
border-collapse: collapse;
463
541
width: 100%;
···
483
561
margin-bottom: 0.5rem;
484
562
}
485
563
486
-
/* 19. lists */
564
+
/* 18. lists */
487
565
ol,
488
566
ul {
489
567
padding-left: 2rem;
+4
-5
package.json
+4
-5
package.json
···
1
1
{
2
2
"name": "@intergrav/dev.css",
3
-
"version": "3.6.2",
3
+
"version": "4.0.0",
4
4
"description": "Tiny, simple, classless CSS framework in the style of Vercel's Geist design system",
5
5
"keywords": [
6
6
"css",
···
13
13
"geist",
14
14
"open-source"
15
15
],
16
-
"homepage": "https://github.com/intergrav/dev.css#readme",
16
+
"homepage": "https://devcss.devins.page",
17
17
"bugs": {
18
18
"url": "https://github.com/intergrav/dev.css/issues"
19
19
},
20
20
"license": "MIT",
21
-
"author": "intergrav <intergrav@proton.me> (https://intergrav.xyz)",
21
+
"author": "intergrav <intergrav@proton.me> (https://devins.page)",
22
22
"files": [
23
23
"theme",
24
-
"addon",
25
-
"demo.html"
24
+
"addon"
26
25
],
27
26
"main": "dev.css",
28
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
+
}